jQuery load function modified to include relevant scripts - javascript

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.

Related

Needing to reload page for javascript to load?

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.

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:

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

Ajax Load with Javascript Script in target container

On my site, there is an area where I load several different widgets via AJAX. Some widgets need an external JS script that the rest of my page doesn't so I'd rather not load that script until the window opens for that specific widget.
the ajax code is:
$.get(content_url, null, function(rawResponse, status, xhr) { // get new data
content_target.html(rawResponse); // replace with new data
loadingSomething = false;
});
The content loaded is:
<script type="text/javascript" src="http://www.bandsintown.com/javascripts/bit_widget.js"></script>
<script type="text/javascript">var widget = new BIT.Widget({"artist": "{{ id }}"});widget.insert_events();</script>
But when I do this, the widget doesn't load. I'm guessing it's because the external script isn't loading.
Any ideas on how to make this work? Keep in mind I'm loading several different widgets with their own external scripts, so it'd be tough to add that into the JS since that's standardized across all widgets.
Thoughts?
It's a bit of a headache to load scripts like this, especially if you're trying to make a cross-domain ajax request. Consider using HeadJS to improve load times without making things hellishly complicated.
JavaScript loader
Load scripts in parallel but execute in order
head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {
// all done
});
Head JS loads JavaScript files like images without blocking the page. Your page will be faster even with a single combined file.

Modifying Javascript to run after AJAX load

I am using a little javascript thingy (app?) from http://code.google.com/p/tumblrbadge/ to load my most recent tumblog post into my webpage. However, when I load the 'tumblr' section with AJAX using Jquery, the script does not get executed. I understand why this is and that I need to include the javascript file in the and execute it after the AJAX load is complete. My problem is this: I do not fully understand the tumblrbadge code and, when I include the script in the and call tumblrBadge() after loading, it does not run. How must I modify the tumblrbadge code to allow it to be run on demand from the ?
All of this is hosted at http://jquerytest.webs.com
It looks like your problem is that the script tags within the tumblr section of your site are not being executed. When you insert html into a page using ajax, you have to parse out the contents of any script tags and execute them separately.
After the content of the tumblr tab is inserted in your page, get all of its script tags with $("#contentOfTumblrTab script") and evaluate their innerHTML using eval().
Try $(window).onload instead of $(document).ready.

Categories