Calling a Javascript function after AJAX call

Question

I have a javascript function to which I am being passed a functionName that I need to call after making a ajax call. The ajax call is returning some html that contains a reference to a js file. The functionName being passed to my function is in the html but it is referencing an object in the js file. What I am noticing that the object sometimes exists and sometimes doesn't. Is there a way to ensure that the object always exists(or wait till it exists) and then only call the javascript function. Please note that I have no idea what the object variable is, so is there a way to ensure that the script file has been loaded in dom and then make the call to the function.

   function(functionName)
   {
      $.ajax({
    url: properties.url,
    type: properties.type,
    data: properties.data,
    dataType: properties.format,
    success: function (data) {
     // data contains <div>myname</div><script src="/myfile.js" type="text/javascript"></script>
     // Put the data in some div
     BindData(data);

     // How to ensure that the script myfile.js is loaded in dom before I call eval
     eval(functionName);
     }   );      

    }

Can you provide your code for GetAjaxData? The solution may require passing a callback for that function. — apsillers
– apsillers, Commented Jun 1, 2012 at 23:02
sorry..your right. the eval code is in the success part of the ajax call..I'll edit it above — Kunal Ranglani
– Kunal Ranglani, Commented Jun 1, 2012 at 23:04
Also, is functionName really just a string with the name of a function? If so, it's not going to execute without () on the end. Right now, you're just throwing the name of a variable into eval. And if functionName is just a string with the name of function, just use window[functionName]() instead. — apsillers
– apsillers, Commented Jun 1, 2012 at 23:06
binding the data does not ensure that the script has been loaded in dom..so I want to call eval only if the script is loaded in dom — Kunal Ranglani
– Kunal Ranglani, Commented Jun 1, 2012 at 23:10

Perpetual Infinity · Accepted Answer · 2012-06-20 12:46:23Z

2

function(functionName)
   {
      $.ajax({
    url: properties.url,
    type: properties.type,
    data: properties.data,
    dataType: properties.format,
    success: function (data) {
     // data contains <div>myname</div><script src="/myfile.js" type="text/javascript"></script>
     // Put the data in some div
     BindData(data);

    //ensure the script has loaded.
    $.getScript($('script:first',data).attr('src'), function(){
            eval(functionName);
    });

    });      

    }

edited Jun 20, 2012 at 12:46

answered Jun 2, 2012 at 0:49

Perpetual Infinity

362 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrea V. Abbondanza · Accepted Answer · 2012-06-01 23:06:56Z

0

You can try to watch what is data before the ajax call end. Not sure but, if data is "undefined" you can check something like this

var data = GetAjaxData();
while(typeof data === undefined);
bind, eval ecc ecc

But this will change if GetAjaxData return something else. You can try the same thing but before do:

var data = null;
data = GetAjaxData();
while(data == null);
do stuff

You can also try $.ajax jquery with the success handler callback Hope help

answered Jun 1, 2012 at 23:06

Andrea V. Abbondanza

3643 silver badges14 bronze badges

Collectives™ on Stack Overflow

Calling a Javascript function after AJAX call

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related