How to load content with dojo? - javascript

I'm writing a single page website using dojo. Tutorials describe how to use dojo/request for making ajax requests. I can simply make request, receive html content and insert it into a content panel (div element). This is also demonstrated in the samples.
When I start to load real content with some desired functionality, I need to also add a script element to the content which is requested by an ajax call. The problem is that the script received with ajax content is not executed.
I tried using contentNode.innerHTML = data; and also domConstruct.place(data, contentNode, "only");
In both cases content is shown but the scripts inside the content is not executed.
As I understand there's also a dijit.layout.ContentPane which is more suitable for loading content on design time, not runtime.
I cannot execute the script before the content is loaded, because in every page there are some elements which I need to process, and they are simple not available when the main page is loaded. For example, I need to change form submission behavior.
So what can I do to make the loaded script executed?

There is a dojox.layout.ContentPane that provides the ability to execute scripts from the loaded content.
See the official documentation here. It excplicitly addresses your use case
If you need to execute JavaScript inside your content panes, use
dojox/layout/ContentPane instead of dijit/layout/ContentPane and set
executeScripts=”true”. Actually executeScripts defaults to “true” but
might be a visual cue down the road as to why you are using
dojox/layout/ContentPane.

Related

How to get javascript in main page to append to elements in ajax loaded div using jquery?

I'm using the jquery load function to switch out a div. Whenever I load a certain element via ajax that needs javascript to run -it won't work in the div. I know that this is because the element didn't exist in the dom on the initial page load.
I've googled for days and haven't found an answer that can give me an easy to understand explanation. Essentiallly, I'm told to just use .on or $getScript.
However, this doesn't seem to be the appropriate answer.
Since, each element loaded in the div has similar properties -I simply want to load the jquery library, and the same two external scripts in my index page's head section -and then make sure that those scripts stay "live" or append to the simple html content that is being externally loaded in the div via ajax.
So, for example, if page 1 has a div named bouncingcats, and page 2 has a div named bouncingdogs -that both require an external javascript named 'bounce' -I want to load the javascript file 'bounce' ONE TIME in the head section of my index page -and then dynamically swap out the div named bouncinganimals on my index page with either cats or dogs.
So far, it seems as if the only advice I'm getting is to just put the jquery library AND the bounce.js file at the end of page 1 and at the end of page 2. This, of course works -but it seems too redundant and of course slows down the ajax load.
Do you know of a way in which I could just load the jquery library and the external javascript page in my index page head once, and have them run when I load content via ajax into my div?
An issue that I have is that I didn't write the script bounce.js myself -and it is already minimized -so changing the script could prove to be extremely difficult. Is there something I can just wrap around the external javascript links themselves?

Ajax load javascript and css with content

I am using jquery ajax to load content from one page into a div on the current one, similar to the way gmail switches between inbox, trash, etc. I am using jQuery's load method
$("#divGlobal").load("newPage.html #container");
to load the content I need into my div.
newpage.html #container also has associated javascript & css files associated with it. Right now I am loading them by appending the necessary <script> and <link> tags to <head> but it does not always work. The files always load (I am watching XHR info in Firefox) but do not always seem to work correctly.
For instance, if I load page1.html & associated files (including jQuery functions for UI), everything works fine. However, if I then load page2.html and go back to page1.html, the files load but the jQuery functions are not responding.
Is there a better way of loading javascript & css files associated with the content I am loading?
Reloading the same javascript that you have previously loaded may not do what you want because all the variables and functions are already defined from the previous load and some state may already be in place from the previous load. Loading it again into the same page doesn't start from scratch which is probably what you want.
If you control the pages you're loading, then you can write the javascript in a way that will work by just having the scripts in the content load specifically designed so that they set the state exactly how you want it and clean up any previously loaded state, but you would have to write them that way in order to work that way. This would include resetting any DOM modifications, event handlers, global variables, etc... that the first invocation of the script may have modified.

how to load a new script in a single-page app?

I'm trying to build a single-page app that has several views (screens, page contents)
My App's UI has a permanent menu bar and a "view area" which retrieves a view via Ajax, based on menu selections. This works great for simple HTML content and keeps my menu-script running on the background despite which view is being displayed.
But what if my view needs an additional script? How do you load and execute a script as a result of a view change (=a page fragment was loaded as a result of a button click) also, how do I get rid of that script when I choose a different view?
I know I can embed a script-tag into the page fragment and write the code there, but I'm really looking for a more robust way of doing this, preferably so that an instance of an object is created when the view is loaded and then discarded when the view changes.
yepnope.js is a great conditional loader. You could use it to check certain conditions (e.g. view, state) before loading a script. I don't think it has the ability to remove a script that's already been loaded, though.
You can use javascript to add a <script> tag in the same way you would any other tag.
The hardest part is knowing where to place it, but if you have control over your markup, this isn't too big a barrier.
Something along these lines:
function DST(url)
{
var s = document.createElement(’script’);
s.type=’text/javascript’;
s.src= url;
document.getElementsByTagName(’head’)[0].appendChild(s);
}
If you need something to happen automatically when you load that script, you should be able to use a self executing anonymous function to do the job.
(function(){alert('this happened automatically');})();
If you need to pass anything in to the function it would look like this:
(function($){alert('this happened automatically');})(jQuery);
If you really need to discard the scripts, you can delete the nodes, but it might be better to leave them in, in case a user reactivates a view, so you don't have to make the AJAX call and associated HTTP request, allowing the page to load faster.

Putting jQuery/javascript source pages before end of body tag

I've seen in several plugin instructions , paste the javascript/jQuery source just before the end of body tag. I made search why they are saying like that, didn't make me any sense.
If I put the src file where ever in the script, I never faced a problem at all. Could anyone give me a good answer about this?
If javascript code does not reference the DOM or any objects in the DOM, then it can be put anywhere in your page.
If you put it AFTER the HTML in the body tag right before the </body> tag, then the page will be parsed and displayed before your scripts load which will get your page displayed faster. So, the recommendation you've seen is to maximize the initial display performance of your pages.
If javascript DOES reference the DOM or any objects in the DOM, then it must either have special code to wait for the DOM to be loaded before executing using something like $(document).ready(fn) in jQuery or the code must physically be loaded after the DOM so that it won't execute until the DOM is loaded.
And, of course, code must be loaded after any code that it's initial execution immediately depends upon. So, a jQuery plugin would need to be loaded after the jQuery library itself.
Here's a general set of guidelines:
Put code as late as possible in the page to maximize the display performance of your page.
Put code after any other libraries that its initial execution depends on.
Put code in the <head> section only if that code needs to execute or be used before the document loads. As an example, if you had code that was examining the URL and cookie and deciding whether to do a client-side redirect, you want that code to execute immediately so you might put that code in the <head> section so it can execute before the DOM loads or displays. As another example, if you have some inline javascript that needs certain functions to be available during the page load (e.g. some inline javascript that does document.write() and calls some utility functions), then put those utility functions in the <head> section so they are available as the page loads.
If there is no reason to execute the code before the page loads or if the code needs to access the DOM itself, then put the code right before the </body> tag to optimize page display time and position the code where the DOM is ready for manipulation when the code runs.
Put code in external JS files whenever possible to take maximum advantage of browsing caching.

How to use Ajax to bring a page into my site then wait until it is fully loaded scripts and all

I have a site which pulls pages into a dynamic interface. Currently, the main page requires that any javascript the external pages will need be loaded with the main page. Most javascript the external pages have are objects that are built when the page gets pulled in, but first, which causes issues.
It's a little hard for me to explain for some reason so here's a simple walk through of process.
1.Request a page be pulled in
2.Based on a variable passed to function create a specific object which will be associated with the physical html coming from the page ( This is the external Javascript)
3.Load page into the objects frame
This flow requires that the external javascript be attached to the main page not the page being pulled in.
I want to switch steps 2 and 3, but I assume that I will need a way to know that the page and all its scripts have fully loaded before attempting to create the designated object, but I have no idea how to do that.
I am using jQuery and hope that this can be accomplished without a plugin but if it is needed then so be it.
Thanks
Update
Good questions. So the pages are local pages that we build at this point, so we know what to expect. Also the pages are loaded just into basic div structure.
Specifically the main page makes a request to get a page. That page is returned in the form of a string and is then pasted into a div element that is on the main page. The pages are more like fragments I guess. But they can range from fairly complicated and require a bit of javascript to not using any javascript at all.
And the external javascript would generally be added via a script tag and is not inline.
Due to the dynamic nature of the page we do NOT use IFRAME's, they cause issues with the movement of our modules.
If you're using an iframe then I imagine you are changing it's src attribute. To get an alert on when that iframe is done loading you should include a script on the page within the iframe:
<script>
$(window).load(function() {
alert("All Done");
});
</script>
If you are just requesting a string version of a page via AJAX and populating a div you need some extra JavaScript to detect when those dynamically loaded script files have finished downloading to the client.
I would visit this link to get you started.
A combination of Nick and Mic's solution.
In your IFRAME pages, you need a way to determine when the content is done loading, or ready, and then alert your main page:
<script>
$(function() {
parent.frameReady();
});
</script>
In your main page, you can code in the hook from your IFRAMEs:
<script>
function frameReady() {
// attach custom js to iframe here
}
</script>

Categories