I override the onLoad method of Dialog,like this:
$('#billInfoDlg').dialog({
onLoad: function () {
console.log("fire onload event");
}
})
if I resize the window when the dialog is opened,then,I close but not destroy the dialog.When I reopen the dialog ,the onLoad event were fired twice!
Related
I am using an external toolbar in a jQuery Mobile site I'm working on. I initialize it like so:
$(document).ready(function () {
$("[data-role='header'], [data-role='footer']").toolbar();
});
I have a couple of buttons in the toolbar and want to disable them during page transitions so users don't click them multiple times which seems to get the framework into a weird state. My first attempt has been to listen for the pagebeforeshow and pageshow events to programmatically disable and enable the buttons:
$(function() {
$("[data-role='header'], [data-role='footer']").toolbar({
create: function (event, ui) {
$(document).on('pagebeforeshow', function () {
$('#page-header .ui-btn').button('disable');
});
$(document).on('pageshow', function () {
$('#page-header .ui-btn').button('enable');
});
}
});
});
I have the code nested inside like that because I don't want to register the handlers until the toolbar has been initialized. However, I'm running into a separate problem:
Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'disable'
Since I'm not explicitly initializing the buttons myself, I'm not sure I understand how / where I can wait for them to be initialized.
Is there a better approach to this, and does anyone have any suggestions to get this working?
Use .button() on input with type button, reset and submit. For anchor or button tag you need to add / remove ui-state-disabled class.
$(document).on("pagecontainerbeforehide", function () {
$('#page-header .ui-btn').addClass('ui-state-disabled');
});
$(document).on("pagecontainershow", function () {
$('#page-header .ui-btn').removeClass('ui-state-disabled');
});
Demo
I'm trying to stop jQuery Mobile hiding the loading spinner when changePage is called.
The program flow goes like this, starting with clicking a link, which has its click event defined like this:
$('body').delegate('.library-link', 'click', function() {
$.mobile.loading( 'show' );
$.mobile.changePage($('#page-library'));
return false;
});
Upon clicking the link, the pagebeforeshow event is fired, which triggers a function to populate the page from the local storage, or else make an ajax call to get the data.
$(document).on('pagebeforeshow', '#page-library', function(event){
ui.populate_data();
});
In ui.populate_data() we get the data from local storage or make an ajax call.
ui.populate_data = function() {
if (localdata) {
// populate some ui on the page
$.mobile.loading( 'hide' );
} else {
// make an ajax call
}
};
If the data is there, we load the data into the container and hide the loading spinner. If not it makes the ajax call, which on complete saves the data in local storage, and calls ui.populate_data()
The problem is, after the pagebeforeshow event is finished, changePage is calling $.mobile.loading( 'hide' ), even though the data might not be there yet. I can't find any way to prevent changePage from hiding the spinner, other than by temporarily redefining $.mobile.loading, which feels pretty wrong:
$('body').delegate('.library-link', 'click', function() {
$.mobile.loading( 'show' );
loading_fn = $.mobile.loading;
$.mobile.loading = function() { return; };
$.mobile.changePage($('#page-library'), {showLoadMsg: false});
return false;
});
and before hiding the spinner in my ui function:
ui.populate_data = function() {
if (localdata) {
// populate some ui on the page
if (typeof loading_fn === 'function') {
$.mobile.loading = loading_fn;
}
$.mobile.loading( 'hide' );
} else {
// make an ajax call
}
};
Surely there must be a way to get complete control over the showing and hiding of the loading widget, but I can't find it. I tried passing {showLoadMsg: false} to changePage, but as suggested by the docs it only does things when loading pages over ajax, which I'm not doing.
Maybe it's too much for many, but I found a solution other than the written in the comments (which didn't work for me).
I use the jquery mobile router and in the 'show' event of a page, I do $.mobile.loading("show");, so when the page appears it does with the loading spinner showing.
Though to hide the spinner, I had to use $('.ui-loader').hide();, which is weird, I know...
I use Jquery Mobile Router for a lot more, but it solved this issue.
(Maybe just listening to the proper event and triggering the spinner would also work, as this is what JQMR does...)
I'm using JQM 1.4.2...
Is it possible to have a loading spinner, called by $.mobile.loading, within a jQuery mobile dialog, and have it position relative to that dialog?
It's not possible directly, but you could do it in a hacky way :
On the pageinit of the dialog, clone the <div/> with .ui-loader class.
var loader = $(".ui-loader").clone();
Then add it into our dialog, like this :
$page.find('[data-role="content"]').html(loader); //$page is the dialog
Create a class called .ui-loader-altered and add position:relative to it. Add the class to the loader inside dialog. This will make loader stay within dialog.
$page.find(".ui-loader").addClass("ui-loader-altered");
Now that you've got the dialog, why dont you show it up?
$page.find(".ui-loader-altered").show();
Full code :
$(document).on("pageinit", "#second", function () {
$page = $(this);
$(this).on("click", "#show", function () {
//clone
var loader = $(".ui-loader").clone();
//add to dialog
$page.find('[data-role="content"]').html(loader);
//add class which makes dialog position relative to div
$page.find(".ui-loader").addClass("ui-loader-altered");
//show it up
$page.find(".ui-loader-altered").show();
})
});
Demo : http://jsfiddle.net/hungerpain/P2XJt/3/
I have two pages, the method name is changepage index2.html ... inside this page I would like to make a call to the database and dynamically populate a listview but I can not get to call the function we just change the page ..
on the main page I have this script:
$(document).live( 'pageinit',function(event){
$("#changePageButton").click(function() {
$.mobile.changePage("index2.html", { transition: 'slideup'});
});
in index2
$(document).live( 'pageinit',function(event){
alert("OK");
});
but never displays the alert
Here's what I want to do:
load basket using Ajax
show "wait" message
once loaded, refresh basket.
When I try to use pageinit function:
$(document).bind('pageinit', function(evt) {
console.log(evt);
}
Console log show it's called 29 times!
Everything is on one HTML page, and I'm using $.mobile.changePage() to change pages. So I tried this hack:
$(document).bind('pagebeforeshow', function(evt, pg) {
if (pg.prevPage.length==0) {
/* first page = code executed once */
var pg = $('#page-basket'),
footer = pg.children( ":jqmData(role=footer)" );
footer.hide().trigger('updatelayout');
AjaxGetBasket( function(data) { console.log('ajax basket ok'); });
}
});
But the layout is never updated.
How shall I do to modify page but only once at the beginning?
Try delegating the pageinit event handler so it only runs when #page-basket is initialized:
$(document).on("pageinit", "#page-basket", function() {
$(this).children(":jqmData(role=footer)").hide().trigger("updatelayout");
AjaxGetBasket(function(data) {
console.log("ajax basket ok");
});
});
I do not understand if your problem is solved, but i am in the same situation explained in the question and i have solved the problem binding a function to pagecreate event:
$(document).bind("pagecreate", function(e){
// call ajax and update the DOM of first 'page'
});
and that's all.