This example does not show exactly the problem, just to have an idea. For example when I click on the page 2, the content does not load in the div, I must refresh the page to see the content of the page 2.
P.S : The same code is duplicated in the others pages.
Code :
$(document).ready(function() {
$('.content-primary').html("Content of page 1"); // This line just in this example
//$(".content-primary").load("content-of-page.php"); // but I used this code on all my pages
});
This is a common jQuery Mobile problem.
You should not use document ready with jQM, instead jQM provides page events. Your problem is document ready who can, and usually triggers before page is loaded into the DOM. That is why refresh helps, at that point page is already loaded.
I made you a working example: http://jsfiddle.net/Gajotres/8hKe2/
$(document).on('pagebeforeshow', '#foo', function(){
alert('This is foo');
});
$(document).on('pagebeforeshow', '#bar', function(){
alert('This is bar');
});
Basically each page event will trigger javascript code only meant for that page. If you want your code to execute only once, pageinit event should be used instead of pagebeforeshow, like this:
$(document).on('pageinit', '#foo', function(){
alert('This is foo');
});
$(document).on('pageinit', '#bar', function(){
alert('This is bar');
});
If you want to find more take a look at my other article/answer: https://stackoverflow.com/a/14469041/1848600
Related
I'm using Turbolinks 2.5.3 and I have a script tag at the bottom of the home page.
<script>
$(document).ready(function() {
alert('hello');
});
</script>
For every page on the site, I run the following JS:
Turbolinks.pagesCached(0);
If I visit the home page, the alert appears once. If I press the back button then forward button on my browser the home page will load, and now two alerts appear. If I repeat this process again, three alerts will appear.
Here's my question:
Why is Turbolinks caching the page when I explicitly told it not to. Does it have to do with Turbolinks transforming the document ready event listener? How do I fix this so it only loads once every time?
use turbolinks:load
<script>
$(document).on('turbolinks:load',function() {
alert('hello');
});
</script>
Use this for on load instead
$(document).on('ready page:load', function() {
https://github.com/turbolinks/turbolinks-classic#events
Try something like this
<script>
$(document).ready(function() {
if (alert('hello')) {
}
else {
alert('hello');
}
});
</script>
everyone!
I have integrated to my site a pjax. It is working but other js-scripts like GoogleMap or DataTable - no. If press f5 to reload the page - all other js on the page working perfect! What I did wrong? How to resolve this issue?
Pjax uses ajax to replace content so more than likely you are just loading your javascript on the document ready and you need to reload it when pjax is completed. There is a handler that you can use when pjax is completed to restart your javascript.
You can see pjax's events on the github page at https://github.com/defunkt/jquery-pjax
Scroll to the bottom and see events.
But you could probably do something like the following but it is hard to tell becaue you didn't post any code.
You could either state your funcitons and then initiate them on document ready and after pjax completes like so.
function datatables(){
//your datatables code here
{
function googleMaps(){
//your google maps code here
}
$( document ).ready(function() {
datatables();
googleMaps();
});
$(document).on('pjax:complete', function() {
datatables();
googleMaps();
});
Or you could state them on document ready and when pjax completes like so
$( document ).ready(function() {
//your datatables code here
//your google maps code here
});
$(document).on('pjax:complete', function() {
//your datatables code here
//your google maps code here
});
Or something to that effect.
Hope it helps.
I know there're a lot of duplicate questions out there, I checked almost all of them, but I just couldn't find a solution in my case. So, here's my problem:
I have a banner which will show on every page of the project, inside the banner there's a close button to close the banner, and a download button which leads user to the app store to download the app. My banner works perfect only except I have to refresh the page to get these two buttons works. Here's my code:
$(document).on("pageinit", function () {
$("#close").on("click", CloseBanner);
$("#download").on("click", SetAppStorePath);
//alert("pageinit");
});
function SetAppStorePath() {
if (isIOS) {
window.location = "https://itunes.apple.com/us/app/myapp/id.....";
}
else if (isAndroid) {
window.location = "https://play.google.com/store/apps/details?id=.....";
}
}
function CloseBanner() {
$('.banner').hide();
}
Here's the simplified html:
<div class="banner">
<div class="container">
<a id="close">×</a>
<a id="download">Download</a>
</div>
</div>
I did a little test, and found something tricky: I added that alert inside pageinit, I noticed that the alert is always executed(means my button on click events are always registered) when I jump from page A to page B. But when the button works, I see page A is gone, blank page shows, alert shows, then page B shows, the buttons work. When it doesn't work, the order is different, I still can see page A, then I see alert(I still can see page A now), then it changes to page B, the buttons don't work.
So seems that when pageinit executed after page jumped, it works,but sometimes pageinit executed before page jumped, then it doesn't work.
I think your elements are dynamically created. You may need event delegation.
$(document).on("pagecreate", function () {
$("body").on("click", "#close", CloseBanner);
$("body").on("click", "#download", SetAppStorePath);
});
Move following outside of the init and change it like following
$(document).on("click","#close", CloseBanner);
$(document).on("click","#download", SetAppStorePath);
when page init executes, DOM is not ready. that is the reason it is not binding to close or download elements. and this is the way to overcome that. you dont need pageinit event here
I'm building a JQuery mobile site which has an image slider on 2 pages. The sliders are activated using the following JS:
$(function () {
$("#slider").excoloSlider();
});
where '#slider' is the name of the div that gets rendered as the slider.
I have this slider on the 2 pages and have given both the same id, and don't want to insert the above code into both pages. To make things easy I want to be able to make add the above code into a.js file that I'm referencing at the top of both pages.
However, the script only kicks in when one of the pages are the first page to be navigated to. So, I assume this means the code is only being called in the once, and due to the AJAX loading of the subsequent page, it isnt called when this new page loads.
So, how can I run the code to affect any/all pages which feature the slider?
I dont know how many times you have to call .excoloSlider(); function. In case you have to call it each time the page is visited, then you need to use any of these page events, pagecontainershow or pagecontainerbeforeshow.
If you use pagecontainershow, you can run .excoloSlider(); on #slider even if you have the same id in a different page. This way, you specify in which page to look for #slider.
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
/* check if #slider is within active page */
var slider = activePage.find("#slider").not(".slider");
if(slider) {
slider.excoloSlider();
}
});
Update
I have added .not(".slider") selector to exclude already rendered slider. The function .excoloSlider() will be called on new sliders only.
Demo
Try to use class instead of id since id is unique, then you can change your jQuery code to:
$(function () {
$(".slider").excoloSlider();
});
Use jQuery Mobile API for the navigation system
$(window).on( "navigate", function( event, data ) {
$("#slider").excoloSlider();
});
Edit
Use pageinit
From the jQM docs:
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.
the contained of my pages are dynamic, then how to display the page if the page contained is complete, if not I wait message appears.
i used jquery mobile.
$("#A1").live('pageshow', function()
{
// code for fill the page
}
You could handle the pagebeforeshow event. Your code would be executed before the page is shown:
$(document).on('pagebeforeshow', '#A1', function(ev){
// your code
});