Reload embedded javascript in templates (Grails) - javascript

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.

Related

Page specific script remains when page changes in Next js

I'm trying to add the Facebook Pixel script to a specific page (X) of my Next js application.
I'm using next/script to add it and it is loaded properly only when page X is accessed.
However, whenever I navigate to another page after accessing page X and after the script is loaded, the script remains in the Devtools. My question is: is it supposed to work that way? Is Next.js just optimizing the script load and only executing it when page X is loaded/being accessed and nowhere else or should I explicitly tell it to remove the script if the page path is different?
I'm using the inline script approach (with the default loading strategy of next/script):
<Script id="Facebook_Pixel_Code">
{`!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js');fbq('init', [OUR_FB_ID]);fbq('track', 'PageView');`}
</Script>

Javascript within jQuery-modal ajax child Fails

I am loading modal windows via ajax into jQuery-modal.
I want to make sure the content within my modal windows are not loaded independently (directly), and if a direct request is attempted, I want them redirected to the page that loads the modal (I do this by testing for the presence of jQuery).
The redirect works great on the direct link, but for some reason, the added javascript prevents the modal window from displaying (the ajax calls are coming through fine, but the new modal DIV that is created does not take on the correct ID and styles [jquery-modal blocker current]).
This is the small bit of Javascript inside my html page that kills the modal...
<script>if (!(window.jQuery)){window.location.href='/';}</script>
FYI, I've tried placing the script inside and outside of <DIV class="modal"> on the page that is being loaded with ajax. Neither version works.
I have also tried removing the actual code from the script but it appears the mere presence of the <script> tag is a problem for the jquery-modal. I've also posted this issue to the GitHub repo, but the owner claims it is an implementation error.
Instead of calling the javascript via a <script> tag, you can put it in the <body onload=''> and it will bypass whatever issue the <script> tag causes.

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...

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

Why does my external javascript file keep getting reloaded?

I have a jqGrid displaying Tabular data. I have a qTip2 popup window displaying a small window when a user mouses over a hyperlink inside the grid. I'm noticing that an external javascript file is being reloaded every time this popup window displays information. The script is not referenced in the file that is called to display this popup window and would be loaded for the display of the main page.
I see the file being reloaded over and over with this kind of call:
GET http://localhost:4111/Scripts/HelperScript.js?_=1359649163699
GET http://localhost:4111/Scripts/HelperScript.js?_=1359649165768
and so on...
Can someone put me on the path of why this is happening?
So I just double checked and for some reason I had a call in the code that was being loaded to present the popup window that would also reference my script file.
<script src="#Url.Content("~/Scripts/HelperScript.js")" type="text/javascript"></script>
I"m assuming since it was trying to load two copies of the same Javascript file that it was loading it again with a random name so as not to conflict? (Removing the above reference from my code has stopped the script from being loaded again)

Categories