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 and updates a div. Inside that data there is a jQuery function, but the function is not being called after the data is loaded into the page. I have the proper js files included 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 )

Christian C. Salvadó · Accepted Answer · 2008-10-25 06:14:12Z

27

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

answered Oct 25, 2008 at 6:14

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

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

Comments

wilcox00 · Accepted Answer · 2009-02-21 18:10:06Z

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]);

JimFing · Accepted Answer · 2011-10-06 16:55:07Z

1

Changing

<script type="text/javascript">
...
</script>

To:

<script>
...
</script>

Fixed the issue for me.

answered Oct 6, 2011 at 16:55

JimFing

1515 silver badges11 bronze badges

Comments

Peter · Accepted Answer · 2009-07-17 14:16:10Z

-1

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()...

answered Jul 17, 2009 at 14:16

Peter

Comments

dc2009 · Accepted Answer · 2009-12-02 13:49:16Z

-1

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

answered Dec 2, 2009 at 13:49

dc2009

8521 gold badge9 silver badges7 bronze badges

Comments

ajitatif · Accepted Answer · 2009-05-11 10:10:59Z

-7

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

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

answered May 11, 2009 at 10:10

ajitatif

1171 silver badge9 bronze badges

Collectives™ on Stack Overflow

Calling a jQuery function inside html return from an AJAX call

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related