CODEWITHSUNDEEP
javascriptjqueryajax
smtp
smtp

Reputation: 159

trigger external script and load content

I triggered the external .js function using $.getScript, after it's done, i am loading the content to 'div' element ('Result'). So after everything is done, i would like to perform other function like say for example alert the downloaded content (eg: #items). But, when i do alert, i don't think the whole content is yet downloaded, so it's not giving me the fully downloaded content. How can i achieve it?

$.getScript( "../js/script.js" )
          .done(function( script, textStatus ) {            
            load(function(){                
                $('Result').html();

            });
            alert($('#items').html());
          })
          .fail(function( jqxhr, settings, exception ) {
            alert( "Triggered ajaxError handler." );
          }); 

function load(callback)
    {
         $("#Result").load("/somepage.aspx", function (response, status, xhr){
          if ( status == "error" ) {
            var msg = "error: ";
            $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
          }
          if(callback){
            callback();
          }
        });                                         
    };  

<div id="Result"></div>    
<div id="error"></div>

Upvotes: 0

Views: 616

Answers (3)

Mehdi Dehghani
Mehdi Dehghani

Reputation: 11601

So, after some chat, here is my solution, hope this help: I made 2 .html files, a.html and b.html.

Content of a.html:

<div></div>
<script>
    $.getScript("main.js", function() {
        $("div").load("b.html #items");
    });
</script>

And b.html:

<body>
    <script src="main.js"></script>
</body>

Also content of main.js file:

$('<div></div>', {
    text: 'I am alive !!!',
    id: '#items'
}).appendTo('body');

and when I open the a.html, I can see I am alive !!!.

Edit:

Please note, I didn't add link of main.js to a.html.

UPDATE, same result with this code:

$.getScript("main.js").done(function() {
        load();
    }).fail(function(jqxhr, settings, exception) {
        alert("Triggered ajaxError handler.");
    });

    function load() {            
        $("#Result").load("b.html #items", function(response, status, xhr) {
            if (status == "error") {
                var msg = "error: ";
                $("#error").html(msg + xhr.status + " " + xhr.statusText);
            }
        });
    };

Upvotes: 0

Muhammad Umer
Muhammad Umer

Reputation: 18117

if downloaded script is in turn downloading something else, then most likely it's being done async. Which means you need to make the following changes:

wrap the external script in function

do getScript

upon completion invoke that function with parameter containing a callback function

inside this callback function do alert

attach event handler in external script's function to whatever that is downloading the content to call that parameter.

so for example you would do

      load(function(){                
            $('Result').html();
             wrapperFunction(function(){
               alert($('#items').html());  
             });
        });

and in script at ../js/script.js

you would write 

     function wrapperFunction(cb) {
     ..
      .done(function( ) {            
         cb();
      });
     ..
     }

Upvotes: 0

Mehdi Dehghani
Mehdi Dehghani

Reputation: 11601

I'm not sure your code is in right way, because you get the js, but on done, you give the html of #result, then alert html of #item! this doesn't makes any sense to me. Also what is job of load function that you wrote below the $.getScript?

Update So, you made some update, I think you want to fetch one page, without any postback, isn't it?

Upvotes: 1

Related Questions