CODEWITHSUNDEEP
javascriptjqueryajaxdynamic
Alvaro
Alvaro

Reputation: 9682

Load page with Ajax and load new scripts if necessary

I have a page1 which has a wrapper with articles.

<div id="wrapper">
    <article>...</article>
    <article>...</article>
    <article>...</article>
    <article>...</article>
</div>

I am loading new articles from page2 with Ajax and appending them to the wrapper

    $.ajax({
        url : page_to_load,
        success : function (data) {

            $('article',data).appendTo('#wrapper');

        }
    });

But some of this new articles might need specific scripts that were not loaded in page1 but would be loaded if accessed directly page2.

So the problem is some of the content in new articles breaks as they are missing those scripts.

What is the best solution? I can think of checking the new loaded page scripts and compare them with the already loaded and download the new ones, but I have no idea of how to do this.

EDIT

I noticed if I set the dataType to 'html' I cant search for the scripts, although they are there:

$('script',data)//doesn't match anything

But if I do:

console.log(data);

I can see the whole page with <html> and <script> tags

Upvotes: 2

Views: 289

Answers (6)

Ardavan Dejpanah
Ardavan Dejpanah

Reputation: 106

you can use RequireJS or HeadJs library for calling js files.

RequireJS is a JavaScript file and module loader and HeadJS, a small library for Responsive Design, Feature Detections & Resource Loading

HeadJs is great and useful, try it.

Upvotes: 0

Oleg Ozimok
Oleg Ozimok

Reputation: 259

Disable async.

$.ajax({
  url : page_to_load,
  async: false, 
  success : function (data) {  
   $('article',data).appendTo('#wrapper');
  }
});

Upvotes: 0

Vincent Duprez
Vincent Duprez

Reputation: 3882

There is no problem actually, if you append HTML to the Dom then script calls will be interpreted as if the page was loaded directly, just make sure you use the same parameters as the shorthand jquery $.POST method.

I actually do this all the time and the <script src=""> are called and interpreted correctly

Just make sure you're accessing the scripts from the right scope as if the html was hardcoded on page1.

If this doesn't work, then check with the web inspector if the scripts are loaded or not.

Upvotes: 1

sjkm
sjkm

Reputation: 3937

Working solution:

$.ajax({
    url : page_to_load,
    success : function (data) {
        // load the scripts
        var dom = $(data);
        dom.filter('script').each(function(){
            var scriptSrc = $(this).attr('src');
            if(!$('script[src="'+ scriptSrc +'"]').length && scriptSrc !== undefined) {
                var script = $("<script/>");
                script.attr('src', scriptSrc);
                $("head").append(script);
            }
        });
        // load the articles
        $('article',data).appendTo('#wrapper');
    }
});

Upvotes: 0

MD. Sahib Bin Mahboob
MD. Sahib Bin Mahboob

Reputation: 20534

This workflow should work :

  1. After every page request :
  2. Get all the script tags in the loaded page.
  3. Loop over the scripts
  4. If it's not loaded yet , load it.

Here is the code snippet :

$.ajax({
    url : 'http://localhost',
    success : function (data) {
        $('article',data).appendTo('#wrapper');
        $.each($.parseHTML(data,null,true),function(){
          if($(this)[0].tagName == "SCRIPT"){
              var src = $(this).attr('src');
                if($('script[src="'+ src +'"]').length){
                    $.getScript(src);
            }
        });
    }
});

Upvotes: 0

Dean.DePue
Dean.DePue

Reputation: 1013

Not sure but maybe you could add a script in the AJAX call - I'm not sure of this because I haven't tried it:

Proxy.Scripts.Add(new ScriptReference(AddVersion("/Pages/Items/SearchList/SearchList.Grid.js" )));

Upvotes: 0

Related Questions