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;
});
Related
I am working on a project wherein I am loading database data in a section. I have used an indicator which is basically an GIF image which gets displayed when I click on the URL which opens the page where data gets loaded. The indicator is hidden when data loads completely. This seems to be working well in this scenario but it does not work when I click on the other URL which loads the section without refreshing the page.
Code which handles on link click:
$(".link1").click(function(event){
alert("hi")
//$('#overlay').fadeIn();
$("#overlay").css("display", "block");
event.preventDefault();
var url = $(this).attr("href");
$('#MainContent').load(url);
var res = url.split("/");
res = res[2].replace(/([A-Z]+)/g, " $1");
document.getElementById("pageName").innerHTML = res;
});
Code which hides the GIF once the data loading is complete:
jQuery(window).load(function(){
$("#overlay").css("display", "none");
});
To hide the image when the load() completes you should provide a callback function, like this:
$("#overlay").show();
// ...
$('#MainContent').load(url, function() {
$("#overlay").hide();
});
Also note the preferred use of show() and hide() over css().
I'm trying to always prevent the default function of a button on a shopping cart.
The problem is, is the cart is loaded after the original page is ready. I've been using jQuery ajaxComplete and it works some of the time, just not all the time. Is there someway to select a button on a page rendered after the original document has loaded?
This is my code that works about 80% of the time.
mine();
function mine(){
$(document).ajaxComplete(function(event, request, settings){
console.log("got in here");
$("form[action='/cart']").submit(function(event){
event.preventDefault();
console.log("hell yea");
});
});
}
Thanks
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.
Say I wanna load a new html file, with some jQuery pages, like this:
$.mobile.changePage("some_page.html");
If this html file has two pages inside, how do I load not the first, but the second page?
I Tried
$.mobile.changePage("some_page.html#second_page_id");
But it doesn't work.
Thanks
Dude try to make your second page element data-url as <div data-url="page.html&subpageidentifier">
in the target html page. and let me know is that really worked for you.
The $.mobile.changePage() function takes the first div with data-role="page" and loads it into the dom with an AJAX call. The best solution is to move the second page to the top of the html code.
Otherwise, if you want to decide to load the first or second page, you could put them in different files.
Maybe there's a way of calling the second page, but i have no idea of how to accomplish this.
You can manually grab the element you want:
//delegate the event binding for some link(s)
$(document).delegate('a.my-link', 'click', function () {
//show the loading spinner
$.mobile.showPageLoadingMsg();
//make the AJAX request for the link's href attribute
$.ajax({
url : this.href,
success : function (serverResponse) {
//get the data-role="page" elements out of the server response
var $elements = $(serverResponse).find('[data-role="page"]');
//you can now access each `data-role="page` element in the `$elements` object
$elements.filter('#page-id').appendTo('body');
//now use changePage to navigate to the newly added page
$.mobile.changePage($('#page-id'), { /*options*/ });
//hide the loading spinner
$.mobile.hidePageLoadingMsg();
},
error : function (jqXHR, textStatus, errorThrown) { /*Don't forget to handler errors*/ }
});
//stop the default behavior of the link, also stop the event from bubbling
return false;
});
But I have to say, with the way jQuery Mobile currently works, you're better off putting each data-role="page" elements in a separate document.
ทำแบบนี้ครับ
ออก
สำคัญคือให้ใส่ data-ajax="false"
คุณก็จะ changepage ได้จากต่างหน้า
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.