Instantclick running functions more than once - javascript

I'm using http://instantclick.io which is a jQuery plugin for pjax, however I'm getting some strange problems with my scripts. I've moved bits around so that scripts which did run on $(document).ready(function(){ now run on InstantClick.on('change', function(){ but I still get random problems when I browse through my website.
I was starting to get a feeling that the code is being run more than once, for example when I click on a button, the code it should run was happening more than once. So I stuck this piece of code in my js file just to see what was going on:
$(document).click(function(){
console.log('click');
});
So whenever, I click on anything in the page, I'll get a console log. On initial load of a page, I get the console log once per click. Then when I navigate to a different page, I get two console logs per click, then three logs on the third page I visit etc. So it seems that the InstantClick is caching the js file and running the scripts every time a page is loaded.
I tried putting the data-no-instant attribute on the script tag where the js file is included, but this breaks my code completely.
Hope someone can help!

Related

jQuery.getScript doesn't load after a page reload?

I am trying to debug some code which loads a script with jQuery like this
$.getScript('src/myscript.js', function(){ // start page });
The majority of the time, everything works fine. But some users report intermittent problems with the page not starting. Based on logs I have added to the code, it is clear that for some users, the load callback is never triggered again after they load the page a second time. Clearing their cache removes the problem, but every subsequent reload of the page...it stops again. Other users report intermittent problems, same log results. The user who always has the problem is using Chrome on a Mac.
Anyone had problems like this? I can't find anything in the docs or Googling which would suggest a possible reason..

Page load event debugging

I'm working on a big application. In my application a lightbox opens up on page load and refresh. There are many JavaScript files included in the application, and many developers have worked on it. I'm trying to debug and identify the JS code that is causing that lightbox to open up so that I could edit it.
I tried adding breakpoint in Chrome developer's tool on Load (see image below), but when it stops on first breakpoint, the lightbox is already on the screen. Which means the code for lightbox was rendered before first load event listener fired up.
Is there any way I can find out from where that lightbox code is opening up?
P.S: I'm also unsure what is the exact code syntax used to open up the lightbox, otherwise I would have searched the source files for that syntax.
UPDATE: On further inspection, I've found out when these lines in the jQuery library file are executed, the lightbox shows up.
These lines appear to be event loop triggering. I'm not sure if this information is any useful for solving this problem.
You can use
console.trace();
To see what functions where invoced to get to the line in code you put the .trace in.
Since you found a function inside the jQuery library that is somehow involved in the opening you should put it there.
Aditiinally you can put a code-sided breakpoint underneath it by calling
debugger;
If not already. consider using a local, uncompressed version of jq for easier debugging.

Script does not run in JQuery Mobile 1.2.0

I have a script in a separate js file, which for now, contains
$('#page-seriesLevel').live('pageinit', function(){
console.log(document.URL + ' loaded.');});
This is called from series.php ideally when the page is ready, and catalog.php links to series.php.
But when I go to that page from catalog.php, the script does not execute. I have to refresh to see it. Sometimes the script executes from catalog.php which it shouldn't.
I'm a little confused about what your asking. If the problem is that the page load event, 'pageinit', is not triggered every time you go to the page, try using 'pagebeforeshow' or 'pageshow'. 'pageinit' is only triggered the first time you go to the page.
See the "page load events" section on http://jquerymobile.com/demos/1.2.0/docs/api/events.html for more information.
I knew that JQM loads pages via ajax, but I didn't know that it just loads the element with data-role="page", ignoring the head (where my JS was), as this answer says. https://stackoverflow.com/a/7449731/677331

List of all webrequests in chrome extension

Im playing around with making my first chrome extension. Im making a small extension that monitors the webrequests a page makes. This means that im listening to the: chrome.webRequest.onBeforeRequest.addListener event
I am a little confused on how to execute this code on every page i load. It works on any page if i open the extension web page and run the code in this context. However i would like it to run regardless of having the page open. How do i go around doing this?
I looked at content_scripts, but havent figured out if they are the proper path to take - and ven if they are how do i send a message from my content script to my web page notifying it to run the code. As far as i understand this the content script is first run after the page has been loaded and therefore it does not matter if i call my page and add the listeners, because the show is already over - is this correct?
The wa i understand this is that i cannot add listeners in the content script - hence the need to make this messaging thing - is this correct?
Thank you.
You would put the onBeforeRequest listener in a background page, specifically the persistent variant of it. When the event is invoked, whatever you have in the handler will be run.

Firebug won't let me select a script file

Firefox 13.0.1 with Firebug 1.9.2.
I load a page with Firebug activated. I select the Script tab. This page loaded multiple script files, and the script tab shows the first one on the list (which happens to be JQuery). So far, so good. I go to the menu with all the scripts, and I select the one I want to look at. It shows this script for about half a second, then switches back to JQuery.
This happens every time, but only on the page that I'm working on right now, and only with one particular script file. There aren't any error messages.
Anybody have any ideas?
Update: The problem appears tied to one line in the script file.
$(document).ready(function() {
// ...
// If I remove this, the problem goes away:
setInterval("foo()", 1000)
})

Categories