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.
Related
I am developing a Rails Gem and part of it's functionality injects a javascript tracking code into the HTML body of a rails view/page.
However, Turbolinks is giving me an issue. My tracking code script runs fine on pages with full page refreshes but for pages that don't, the script doesn't run (although I can see it present in the body of the HTML)
Without Turbolinks, everything works fine but I know a lot of people use it so want to find a solution to work with it (so Jquery.turbolinks gem is not really a solution)
Here is what I have tried so far. (I've consoled logged the statement 'working?' to see if the turbolinks:load event is actually firing on the pages I expect it to, and it is. So now just unsure why the script 'trackingCode' function won't fire either.)
var trackingCode;
trackingCode = function() {
// my javascript code
};
$(document).ready(trackingCode)
$(document).on('page:load', trackingCode)
$(document).on('ready turbolinks:load', trackingCode);
$(document).on('ready turbolinks:load', console.log('working?'))
Hopefully that is clear enough but please let me know if there's anymore information needed.
Thanks
Remove 'ready'.
$(document).on('turbolinks:load', function() {
console.log('it works');
});
Or for turbolinks-classic
$(document).on('page:change', function() {
console.log('it works');
});
I wonder if i've unset($_SESSION['enough']); and want to free it up on closing the page.
[ suppose visitor is viewing page of the website pages in new tab ]
i'm using this code
<script language="javascript">
window.onbeforeunload = function() {
console.log('event');
return false;
}
</script>
i wonder how can i apply to fire this code unset($_SESSION['login_id']); , it might look ridicules but this is the basic idea and i'm gonna give example what can be used for
For example : media website would like members not to watching more than one video in same time so the watching page drop session and free it on closing it so can watch more! js indeed is essential for website using jwplayer so no chance of talking about members with disabled js.
In order to load the killsession.php that runs the unset() command, you can run that page with ajax with async:false
Have a look at
Ajax request with JQuery on page unload
jQuery.ajax({url:"http://localhost/killsession.php", async:false})
You can use jQuery to fire on unload with the unload function (http://api.jquery.com/unload/).
$( window ).unload(function() {
// On the unload, we can fire a request back to the server
// .get(), .post(), and .ajax() may be useful.
});
I have a foo.js from FoosController. If I enter localhost:3000/foos, then the jquery onready function will be loaded. However, if I click on an <a href="/foos"> or link_to, the jquery onready function won't be loaded. Is there a problem with my configuration? or is this an expected result.
I think the cause of your problem is turbolinks. Try to disable turbolinks or add a data-no-turbolink='true' to your links and check if it works.
More about turbolink and document.ready here.
run your code after turbolink:load event:
$( document ).on('turbolinks:load', () => {
// your code
});
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
Clicking a button on a page causes to a javascript file to be loaded. How do I call a function on the completion of the loaded file?
Description
You can load the file using jQuery's getScript() function and then call a function from this script.
Sample
$.getScript('YourJavascriptFile.js', function() {
// file is loaded
});
More Information
jQuery.getScript()
Take a look at:
http://api.jquery.com/jQuery.getScript/
I believe you can put a $(document).ready in the script file you are dynamically loading, which will execute as soon as the loading is complete (assuming the DOM it's being loaded into is already "ready")
$(document).ready(function () {
// save the world
});