Reloading a page or navigating directly to the jQuery Mobile hash URL does not fire the pageinit even once. For example, I have tried this on my secondary page:
$(function () {
$(page).bind('pageinit', function () {
console.log('bind pageinit');
});
$(document).on('pagecreate', page, function () {
console.log('pagecreate');
});
$(document).on('pageshow', page, function () {
console.log('pageshow');
});
$(document).on('pageinit', page, function () {
console.log('pageinit');
});
});
While on page one, I click to go to the page two and the above life cycles gets written to the console. The URL also appended #two. This is great, but when going to the link on another machine, the page init does not fire. It seems only a button click can trigger the page init.
I have a live example here: http://dl.dropbox.com/u/5986646/jqm-pageinit.html. Paste this in the URL and events do not trigger: http://dl.dropbox.com/u/5986646/jqm-pageinit.html#two (notice the hash URL).
Yes I had the same problem.
For execute some javascript code on page init a use this structure:
$(document).bind("mobileinit", function(){
$('#mainPage').live('pageshow', function(){
// Some Javascript code
});
});
Now I can execute code all the time that the page was called.
Related
I have a very simple jQuery function
$('#bnAddDegree').click(function () {
alert("bnAddDegree Loaded");
});
I have broken my site into different pieces based upon what the user clicks. If they click on a tab in the menu to load a section I call a partial_html page and load the section into the center div. If I put the code above into the main page load it will not fire. If I add an external js file and load it when the page loads it will not fire, I think because the elements are not initialized yet. If I put it into an external js page that is loaded after the partial_html is loaded it will not fire. If I put it ON the partial_html page with a tag it DOES fire. If I put a simple javascript function
function testFile() {
alert("File Loaded");
}
In the places that the jQuery code will not fire it works fine.
Is there something special that I'm missing with jQuery?
When I load the javascrip file I use
$.getScript("js/biosketch.js")
And test it with the simple javascript file and it works fine but not the jQuery call.
You need to use delegated event handlers since you are modifying the DOM dynamically.
$(document).on('click', '#bnAddDegree', function () {
alert("bnAddDegree Loaded");
});
here's what I have:
$(document).ready(function(){
//stuff
}).ajaxSend(function() {
$('.overlay').show();
}).ajaxStop(function() {
$('.overlay').fadeOut();
});
The problem I am having is that the first time I trigger an ajax action it works perfectly, but not any time after that. I have to reload the page for the ajaxSend/Stop to work again. So say I load a page, click 'load more' to ajax load content, the overlay shows up no problem. but then I click it a second time, everything works fine except the modal doesn't show up this time or any time after.
any ideas?
$(document).ready will only be called once - when the DOM is loaded. This won't work when loading data via ajax.
Two options:
First, if you can identify the div using its id that you are loading as part of your ajax page load, then you can do (edited):
$('.overlay').ajaxSend(function() {
$(this).show(); });
$('.overlay').ajaxStop(function() {
$(this).fadeOut(); });
Alternatively, you could forego ajaxStart and ajaxStop altogether, and trigger them as you click the "Load More" link e.g. something like:
$("a").click(function(){
var url = $(this).attr('href');
$(".overlay").show("fast", function(){
$("#targetdiv").load(url + " #div_id", {}, function(){
$(".overlay").fadeOut();
})
})
return false;
});
I have following closeable JQuery tabs running on my page. It opens a new jsp page in the tab which is running an ajax function to poll latest data (through a servlet). The HREF link contains the parameters based on which polling occurs. While the first page opens fine, additional pages do not run the script except the first one. Any ideas?
Tried setting cache true (first page works fine and all the time) and false (the first page also stops working on opening a new tab)
JQuery in the main page :
function opentabs() {
$(function () {
var tab_counter = 0;
$('#tabs1').tabs({
closable: true,
cache: false,
add: function (e, ui) {
$('#tabs1').tabs('select', '#' + ui.panel.id);
}
});
$("a.tablinks").bind("click", function () {
tab_counter += 1;
$('#tabs1').tabs('add', $(this).attr('href'), $(this).attr('id'));
return false;
});
$('#tabs2').tabs();
});
}(jQuery);
$(document).ready(opentabs);
Ajax polling function in the linked jsp page:
var i=self.setInterval("sendRequest()",60000);
I'm not 100% sure that I understand all your problem, but looking at the code itself, I see this:
The $(document).ready is called only once, when the page is loaded. Thus, it's not called again when a new tab is loaded.
I'll admit the title is a bit confusing but it was hard to come up with a better one.
Ok, so What I have is 3 pages, first is the main page that the user loads up and the other 2 are ones that are going to be loaded into the main page with jQuery.
Here is the JavaScript code on the first page:
$(document).ready(function(){
$("#mainWrap").css({ width:"300px", height:"200px" });
$("#mainWrap").load("modules/web/loginForm.php");
$('[name=loadRegisterForm]').click(function() {
$("#mainWrap").load("modules/web/registerForm.php");
});
});
First of all it loads the login form into the page and then it listens for a link to be pressed which will then load up the register form in its place if it is pressed.
The link is in the login form that gets loaded, but unfortunately it doesn't work. What am I doing wrong?
I've tried placing the link on the main page with the JavaScript code and it does work, so is it just the fact that loading the link after the JavaScript has all ready been loaded going to leave it not working?
You need to have a callback function for the first load call. In side that call back is where you would set the click handler for the $('[name=loadRegisterForm]') element. Basically,
you are binding a handler to an element that does not exist until the first load is complete.
$(document).ready(function(){
$("#mainWrap").css({ width:"300px", height:"200px" });
$("#mainWrap").load("modules/web/loginForm.php", null, onLoadComplete);
});
function onLoadComplete()
{
$('[name=loadRegisterForm]').click(function() {
$("#mainWrap").load("modules/web/registerForm.php");
});
}
At the beginning of my script, I have:
jQuery(function() {
jQuery('img.thumbnail').hide().load( function() {
jQuery('img.thumbnail').fadeIn();
});
});
Which nicely fades in all the thumbnails on the page as they are loaded. However, when I access the page for a second time (when it is cached), or when I press the back button in the browser, the images stay hidden and never appear. I have to manually refresh the page.
What am I doing wrong?
Try this, since .load() may not fire on all browsers when fetching from cache:
jQuery(function() {
jQuery('img.thumbnail').hide().each(function() {
if (this.complete)
$(this).fadeIn();
else
$(this).load( function() { $(this).fadeIn(); });
});
});
Have you tried adding it to a $(document).ready() statement? Then it should run whenever the page is done loading.