Needing to reload page for javascript to load? - javascript

I have a rails app with a notification drop down (similar to facebook or most other social sites) which uses javascript to post the notifications. On most page loads this feature doesn't load until I refresh the page. Any idea why this might be?
I'm not hugely familiar with js to know off-hand so it may be a simple fix.

You have Turbolinks enabled I guess. To resolve this problem you have to load your javascript field not only on document ready but also on page fetch.
In your .js files add loader for page:load
# will load .js content on document ready
$(function(){
yourJavascriptFileNameInitialize();
});
# will load content when your route changes using Turbolinks
$(document).on("page:load",function(){
yourJavascriptFileNameInitialize();
});
function yourJavascriptFileNameInitialize(){
# put here your code
}
Turbolinks is by default enabled, it uses ajax to fetch new content for the page you load, to reduce content it loads from server (makes your app faster). When this happens you need to again load your .js files because they are loaded but no document ready has been recorded. Thus you have to load also when page:load events happens.

Related

How to load content with AJAX that contains a script?

So I am working on a website trying to use jquery/ajax to load content into the home page. Current test site is [http://newconstructionflorida.net] the home & about me page work without any issue, however the property search link does not load.
The content/property-search.php file I am trying to load contains a script:
<script src="//idx.diversesolutions.com/scripts/controls/Remote-Frame.aspx?MasterAccountID=115580&SearchSetupID=143&LinkID=0&Height=2000"></script>
What am I missing to be able to get this script to execute when loaded via AJAX? If I insert it into the home page directly it works without issue so it must be related to the jquery/ajax.
Loading .js scripts via ajax is not a good idea since .js scripts functionality is always bound to the loaded HTML DOM and my not work properly if loaded asynchronously via ajax after the DOM is fully loaded.
What you can do is loading the script once the ajax response is completely received using javascript functions like getScript() or .append().
See this answer here on how to use javascript to append an external script to your page:

Caching of JS resources with AJAX call in JQuery tools

In my application I'm using the overlay effect of jquerytools.
I'm opening an external page inside the overlay as explained in this demo.
In my external page I'm using some javascripts to do validation and so on. My application is using the Struts2 framework.
The problem I have is concerning the performances of the overlay effect. In the web server (apache) I'm using the mod_expires to let the browser cache the resources.
The problem is that while the file jquery-1.7.2.min.js gets cached in all the application when opening the overlay it won't be cached because it's name changes with an dynamically generated numerical string.
For example the file name changes in this way:
Main application: jquery-1.7.2.min.js
Inside the overlay: jquery-1.7.2.min.js?_=1386932790620
This numerical string changes everytime, preventing the browser (Chrome) to cache the resource. So every time a user opens the overlay the jquery-1.7.2.min.js gets downloaded slowing down the performances.
You can see this problem in the attached pictures:
Caching:
Non caching:
I guess that the overlay effect of jquerytools is using AJAX to load an external page, so the question is:
is there a way to remove that numeric string from being attached to the resource name?
There'are other solutions to prevent the overlay effect to download everytime the javascript resource?
You can try adding this to your code -
$.ajaxSetup({ cache: true });
This will ensure that no cache-busting strategy is used by jQuery.

Jquery Mobile .load() not retrieving content from Application Cache

I have an application that uses cache.manifest to cache HTML content locally. When I retrieve this content using Jquery .load(), the content is NOT retrieved from the application cache and the call fails if the device is offline.
The files specified in cache.manifest are being loaded, I can see that in charles when I load in the site.
When offline I can enter the cached file URL in the browser and it shows it just fine, just not using .load(), so I am sure that the cache.manifest is loading everything correctly.
My question is, how can I load the HTML pages using jquery or plain JS, and make sure it uses the application cache if the device is offline?
CACHE MANIFEST
/m2/docs/e5a133db912860d8ec124cce9caa78d1/Q00X03.htm
/m2/docs/e5a133db912860d8ec124cce9caa78d1/M00X03.htm
/m2/docs/e5a133db912860d8ec124cce9caa78d1/Q97X01.htm
/m2/docs/e5a133db912860d8ec124cce9caa78d1/M97X01.htm
/m2/style.css
/m2/docs/e5a133db912860d8ec124cce9caa78d1/index.htm
/m2/docs/e5a133db912860d8ec124cce9caa78d1/doc.json
Then calling like this:
$("#docu").load("/m2/docs/e5a133db912860d8ec124cce9caa78d1/M97X01.htm");
Any help is appreciated.
I was able to get it working doing this (rather messy):
In my application I made a hidden iFrame:
<div style="display:none;">
<iframe id="dummyContent"></iframe>
</div>
Setup a listener for this iFrame to read out the BODY and insert it into my display element anytime it loads:
$("#dummyContent").load(function(){
var $con = $("#dummyContent").contents().find("body");
$("#docu").html($con); // docu is my display div
});
Set a click handler for the content retrieval button to set the src of the iFrame to my content:
THIS is loaded from Application Cache as expected.
$("#questionButton").click(function(ev) {
$("#dummyContent").attr("src","/m2/docs/e5a133db912860d8ec124cce9caa78d1/M97X01.htm");
});
I would appreciate it if anyone had a different method, perhaps not using an iFrame. This solution is right up there with using tables to align page content...

jQuery load function modified to include relevant scripts

Ive been playing with the load, get, ajax and get scripts function.
The most appropriate to the majority of function where I intend to load in content on a page would be the load function. It is a simple and effective way of getting the relevant content from an associate page.
But since it does not include scripts and the new content does not respond to the pages ready. functions I was wondering if there was a simple enhancement we could make that would allow the scripts of the page to be refreshed to include loaded content.
Something like
function loadall(url,container){
$(container).load(url);
scritps.reset();
}
What would be the way of doing this.

Which javascript loading option would have the most negligible effect on page load time?

Let's say I host a javascript file on my server at www.website.com/javascripts/application.js that I want 3rd party sites to load up.
On those third party sites, you could just add:
<script src="www.website.com/javascripts/application.js" type="text/javascript"></script>
but it would need to evaluate all of the javascript before fully loading the page.
Instead if the third party site had something like
<script type="text/javascript>
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'www.website.com/javascripts/application.js');
document.getElementsByTagName('head').appendChild(script);
</script>
would this make any difference in the page load time? Would it load the javascript file asynchronously?
What about if the site had
<script src="www.website.com/javascripts/dynamic_loader.js" type="text/javascript"></script>
which linked to a script that dynamically built the script tag linking to the application.js file as in the example right above this?
Which would be the best option and why? Is there a better way to load third-party javascript that I'm not aware of?
Your second option will load the script asynchronously and the page can display before the script has loaded. This can be an advantage if you're optimizing for page display time and no page initialization scripts need to use your script. This can be a disadvantage (and won't speed the overall page load up) if everything else just has to wait for your script to load before the page can be fully populated.
So, it really depends upon what the script does. A perfect example of something that can be successfully loaded asynchronously is Google Analytics because it's 100% stand-alone. Nothing else on the page depends upon it. When exactly it loads doesn't matter at all in relation to the page display.
An example of something that wouldn't really benefit from loading asychronously is a script that has an integral role in display the initial content or a script that has dependent scripts who have an integral role in the display of the initial content. Since you can't see the content until they are all loaded anyway, it doesn't really help things to make one of the asynch load.
Dynamic loading (your last option) is most useful when you only want to load modules upon demand (not necessarily when the page loads at all) when they are actually needed (if ever).

Categories