Im new to Javascript and HTML.
I can't find what I am doing wrong, my objective is:
From a dummy login page, I click on the login button and It takes me to a page where It loads comic books from themoviedb API.
The problem Is that It won't change to the comic books page:
Here is the working code: JSFiddle link
Code in question:
function goToListView() {
$(':mobile-pagecontainer').pagecontainer('change', '#listMenuPage', {
transition: 'pop',
changeHash: false,
reverse: true,
showLoadMsg: true
});
}
Instead of inline code on your button, move it into the pagecreate of the login page:
$(document).on("pagecreate", "#loginPage", function(){
$("#btnLogin").on("click", function(){
goToListView();
return false;
});
});
Here is your updated (and simplified) FIDDLE
Note: in the fiddle I set the code to "No Wrap - in <body>"
function goToListView() {
$.mobile.changePage('#listMenuPage');
}
PS : dont try it in jsfiddle try it in your html file becouse somehow jsfiddle donest recognise the function
Related
In my app I would like to re-use the panel so I call this function when opening index.html:
var add_panel=function() {
//add button
$('[data-role="header"]').append('Menu');
//panel
$.get('panel.html').success(function(data) {
$('div[data-role="page"]').append(data);
$('#leftpanel').trigger('create');
$('#leftpanel').panel();
});
//open panel
$('body').on('click', '.ui-icon-bars', function() {
$("#leftpanel").panel("toggle");
});
}
This works great on the first page and when returning to this page from another page.
I had hoped to call the same function inside "pagecontainertransition" to add the panel to other pages as well, but this doesn't seem to work:
//handle page transitions
$('body').on('pagecontainertransition', function(event, ui) {
add_panel();
});
Can this be done?
I'm loading in a report and displaying it with jquery-ui in tab format. The report is returned by an ajax call in json, and a function is formatting it into HTML. Example code below:
<div id="reportdiv">
</div>
<script>
function displayreport(objectid)
{
$( "#reportdiv" ).hide();
$( "#reportdiv" ).html("");
$.ajax({
type: "GET",
headers: { 'authtoken': getToken() },
url:'/reportservice/v1/report/'+objectid.id,
success: function(data){
if(data == null)
{
alert("That report does not exist.");
}
else
{
var retHTML = dataToTabHTML(data.config);
$("#reportdiv").html(retHTML).fadeIn(500);
$(function() {
tabs = $( "#reportdiv" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
axis: "x",
stop: function() {
tabs.tabs( "refresh" );
}
});
});
}
}
});
}
</script>
This works fine the first time displayreport is called. However, if the user enters another value and runs displayreport again, the "tabs" format is completely lost (the tabs are displayed as links above my sections, and clicking on a link takes you to that section further down the page).
I figured completely re-setting the reportdiv html at the beginning of the function would bring me back to original state and allow it to work normally every time. Any suggestions?
After more testing, found that destroy was the way to go. If I've set up tabs already, run the destroy, otherwise, skip the destroy (http://jsfiddle.net/scmxyras/1/) :
if(tabs!=undefined)$( "#reportdiv" ).tabs("destroy");
I'm using JQuery Autocomplete feature.
The source come from url.
I wanted to know if I can know that the source is empty,
I mean i want to print alert message when the source the come back from the url is empty.
my code is
$(function() {
$( "#tags" ).autocomplete({
source: remoteurl
select: function (event, ui) {
alert(ui.item.value);
return true;
}
});
});
Thanks,
John.
I hope someone can help as I'm at my wits end with this. What I'm trying to do is this.
"Draggable" Item is Dropped into a "Droppable" area (this works)
This posts the id of the item to my controller which returns the type of item it is (this works)
I pass the returned item name to a function which opens a modal and renders a partial view in the modal depending on the particular item.
The last bit is where the issue is. All the steps above work fine, the modal is popped and the partial view is rendered to the modal. But the button to close the dialog throws the error ".dialog is not a function" and after closing the modal using the 'x' in the corner subsequent attempts to open the modal will not work throwing a similar error.
Here's the example I'm working with to try get this working.
$(function () {
$('.draggable').draggable({ containment: '#imageboundry', revert: 'valid' });
$('#droppable').droppable({
drop: function (event, ui) {
$.ajax({
type: "POST",
url: '/Home/AddToCart/' + $(ui.draggable).attr("id"),
success: function (data) {
getItemType(data);
}
});
}
});
});
function getItemType(itemName) {
$('#dialogs').dialog({
open: function () {
$(this).load("AdditionalContent", { itemName: itemName }, function () {
alert("This happened");
});
},
modal: true,
resizable: false,
title: itemName,
width: 400,
autoOpen: false,
buttons: {
"Confirm": function () {
$(this).dialog('close');
}
}
});
}
This is my controller which returns the partial view to the modal
public PartialViewResult AdditionalContent(string itemName)
{
return PartialView("_" + itemName + "Attributes");
}
The close button works once I take out the open: function () { ... } bit and I can reopen the modal again and again but once I put this back in the error gets thrown. This is obviously the cause but cannot for the life of me figure out why.
Thanks in advance for your help and sorry for the very long post.
UPDATE:
I've attempted initializing the modal in document.ready and call it from my "drop" function in the first main function. From doing this I've narrowed it down to this line of code which loads the partial view from my controller. Without this line the functionality works. Any ideas on what is wrong with this.
$(this).load("AdditionalContent", { itemName: itemName }
I figured it out. Included in the partial views was a second call to the jQuery library which was added automatically when the view was created. Plus it was version 1.4.4 while I was using 1.5.1 straight from Google in the _Layout page. The second jQuery library was obviously breaking the functionality as there was a conflict between the two versions. It wasn't until I watched the FireBug console that I noticed the second loading of the 1.4.4 library.
Thanks to all for your help, feel like a bit of an idiot but lesson learned..... for now
could try this but i am not sure
$('#dialogs').dialog({
var self = this;
open: function () {
$(self).load("AdditionalContent", { itemName: itemName }, function () {
alert("This happened");
});
},
with the below code, I'm able to add a page fragment to an other page. The page contains a form to be posted to a certain action method.
$("#ul-menu a").click(function () {
$.get($(this).attr("href"), function (response) {
$("#dialog-div div").replaceWith($(response));
});
return false;
})
Instead of having the form anywhere in the page, I'd like to get it as a modal JQueryUI dialog.
How can I do that.
Thanks for helping.
This will work for you. Also, I've added a better method of preventing the original click. Instead of returning false, which kills all bubbling, you should use event.preventDefault();
$("#ul-menu a").click(function (event) {
event.preventDefault();
$.get($(this).attr("href"), function (response) {
$(response).dialog({ modal : true });
});
})
You don't even need to insert the response into the page.
You can just do this:
var myDialog = $(response).dialog();
EDIT
Not the above snippet won't create a modal dialog, I assumed you know you need to pass in { modal: true } as part of your configuration.