Script does not run in JQuery Mobile 1.2.0 - javascript

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

Related

Issue in javascript loader

I am having a strange problem i.e., when I am opening my website a loader is loaded and then homepage displays. Now I am navigating from home page to different page, everything is fine . The problem arises when I am getting back to the home page the loader is again loading.
In normal situation it should not load. Not able to find out the reason. I am running the website locally so cant provide the url
window.onload() I have used.
The Window.onLoad() event ALWAYS triggers when the page finishes loading.
http://www.w3schools.com/jsref/event_onload.asp
What is the reason to think that going to your page won't trigger onLoad() the second time? The browser won't know the difference whether it is the first, second, or 500th time.

When does a javascript function is being executed in a jquery mobile page?

I have a php function that, after it did his computations, contains this code:
echo("<script> window.location.replace('index.php#login'); </script>");
meant to redirect the page to another, under certain circumstances. The function works, the javascript code works, but if fails in one case. If i write manually the address of the page the javascript part of the code seems not to be executed, while if i manually reload the page (for example using the reload button in firefox) works like a charm.
The php function is being executed, with his redirect code, at the beginning of the page index.php in the head section. The page index php is a jquery mobile page, that include every other page of the site, so if i want to call a page, i have to write an address like site.com/index.php#nameOfThePage. The problem happen when i am, for example on a page site.com/index.php#Page1 and i call another Page manually deleting from the address the part "Page1" and writing, for instance, "Page2". Instead, if i reload, the script is being correctly executed.
So the question is: when does a javascript function is being executed in a jquery mobile page? What i have to do to make the function works in every way, even manually, a page is called?
EDIT: the problem happens in firefox e safari, while with chrome the code works in every case...

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.

Reload embedded javascript in templates (Grails)

well I got a (jquery) javascript in .js loading inside a template in grails , the first time it loads in the template, and the script works perfectly, but once I hit the button to change the content in the template , the javascript doesn't reload, but once I embedded javascript directly in the template it loads fine, but once I put it back in a .js it doesn't load again. any suggestion?
it works this way:
<g:javascript>
code code
</g:javascript>
but doesn't work again if I use this:
<script src="${resource(dir:'js',file:'hoverInfo.js')}" type="text/javascript" charset="utf-8"></script>
once I hit the button to change the content in the template...
do you reload the full page or just a portion via remoteLink/ajax?
I guess in the second case, the browser notices that it already loaded the js-source and will not reload it - hence will not execute it a second time...
I guess you will have to use the onSuccess event to execute the script a second time...
Double check the location of the javascript source file, which can be different when loading the page. Therefore go in to the network tab of your firebug and check, whether the browser tells you 404, when pressing your ajax-button.

Is it possible for me to load a lightbox before the page has loaded

I have a pretty large form to develop and it could take some time to render (over 5 secs). Now to give the user an indication of something happening I'd like to fire up a lightbox with a simple "page loading" message whilst the rest of the page loads in the background. Once the page is fully loaded I can close the lightbox and the user can continue through the application. Now I know I shouldn't use window.onload to activate this as jQuery's document.ready is quicker and a better solution for this issue but does anyone have any advice on how to do this or if it's possible.
It is better to just add a semi-transparant div to the dom and and make it disappear onload.
Executing javascript-heavy functions (like the lightbox) kind of defeat the purpose of a waiting indicator.
Add a script in the head (after css is included) that opens the lightbox. Last in the body add a script (preferably with an event handler to know that the dom actually is ready) that closes the lightbox :)
document.addEventListener("DOMContentLoaded", function () {
//close lightbox
}, false);

Categories