Calling a jQuery function inside html return from an AJAX call

Question

I am working on a web page that is using jQuery. I have an ajax call that gets data from the server an updates a div. Inside that data there is a jQuery function; however, the function is not being called after the data is loaded into the page. I have the proper js files include in the page already.

This is what is returned from the ajax call and placed into a div:

<script type="text/javascript">
    $(function() {
         $('input').myFunction('param');      
    }); 
</script>
<p> other html </p>

How do I get the returned javascript to run after the html is inserted into the page?

(I am using Rails with the jRails plugin )

Answer 1

If you want JavaScript tag evaluation, with html content, you should set the dataType option of the ajax call to "html":

$.ajax({
  type: "GET",
  url: "yourPage.htm",
  dataType: "html"
});

Or dataType "script", if you want to load and execute a .js file:

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

more info here: Ajax/jQuery.ajax

Answer 2

I had a similar problem where I wanted to add little jquery date pickers to a couple fields I was retrieving via ajax. here is what I did to get around it... just quick and dirty. Instead of returning this whole block from my ajax call:

<script type="text/javascript">
    $(function() {
         $('input').myFunction('param');                         
    }); 
</script>
<p> other html </p>

I would return this (note the made up |x| separator)

    $(function() {
         $('input').myFunction('param');                         
    }); 

|x|

<p> other html </p>

Then when I received the data back via ajax, I split the return value into 2 parts: the javascript to be executed, and the html to display:

 r = returnvalfromajax.split("|x|");       
 document.getElementById('whatever').innerHTML = r[1];  
 eval(r[0]);

Answer 3

have you tried Sys.WebForms.PageRequestManager.add_endRequest method?

    $(document).ready(function()
    {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);           
    }
    );
    function endRequestHandler(sender, args)
    {
        // whatever
    }

Answer 4

Well, you can use jQuery load() function: http://docs.jquery.com/Ajax/load#urldatacallback As a callback you can define function which will be executed after loading new content example:

$("#feeds").load("new_content.html",, doSomething());

and in new_content.html you can define function doSomething()...

Answer 5

for ajax.net the endRequestHandler(sender, args) solution works fine though