During the development process, I encountered the problem of integrating javascript-a for widgets in an ajax application. I use the html5-history-api library.

Here is a piece of code:

$("a").live('click', function() { history.pushState( null, null, this.href ); var urlReq = this.href; $.post( urlReq, {}, function(data){ var content = $("#content"); $("title").text(data.module.title); content.html(data.module.content); }, 'json' ); return false; });

This code loads the main content on the page. And the salt itself is this:

With a non-ajax request, the server issues the entire page, incl. and <script src = ""> </ script>. When switching from one page of the application to another, the content of the module changes, and other widgets should be loaded. For example, the text page module displays the contents of the main page and the news widget is spinning to the right. When the transition to the "news" is carried out, the publication module loads the news, and the news widget on this page is not needed. So here. If you take the situation. The news page is loaded -> click on the main one -> the text of the main one is loaded + it is necessary to load the widget that pulls the js-files behind it. There is a method:

 function addScript(src){ var newScript = document.createElement("script"); newScript.src = src; newScript.type = "text/javascript"; document.getElementsByTagName("head")[0].appendChild(newScript); }

And finally, the same question:

Will the following scheme be a good implementation:

On each page, add the addScript script (src) and with an ajax request do something like this:

  $("a").live('click', function() { history.pushState( null, null, this.href ); var urlReq = this.href; $.post( urlReq, {}, function(data){ var content = $("#content"); $("title").text(data.module.title); content.html(data.module.content); for (var widget in data.widgets){ for(wScript in widget.scripts) addScript(wScript); } }, 'json' ); return false; });

In general, addScript () will be visible in function (data) {}?

  • Is everybody already celebrating the holiday and no one wants to answer? for sound advice / recommendations / criticism I give 100 mana points. - Vitaly Kustov
  • 2
    IMHO - if you make a "one-page" site - merge the whole JS together. In principle, you can use something similar, but for this you need to have modules independent of each other and implement caching (that is, create an array of paths of already loaded scripts and connect a new one only if it is not in this list). Actually the question is whether such a implementation would be good, the answer is obvious - no. How many times the user will click back forward - so many times new scripts will be loaded and updated to the DOM, and that is sad - Zowie
  • The system is complicated. Scripts connect only those that are needed. That every time everything is new will be loaded - this is no longer the case. Now I have a singleton with an array of states. How do I finish, give the code ts community approval. I just had to work with js very little. Now I work on my project - I have to remember .. - Vitaly Kustov

1 answer 1

So you will create new script tags for each request, why? and the old remain or are deleted? you need to load the script once and then just call its functions to update the widget, the script tag still needs to add the async = true attribute so that the browser loads everything at once and does not wait until each script loads in turn and the onload event on which the launch of the widget works. addScript (src) will be visible function (data)? depending on where to announce it

  • declared in the global scope. Or, most likely I will do it, declare it as a method of the object that will be created in a single copy. Singleton in general will be. - Vitaly Kustov