executing script after jQuery Ajax Call

Question

I load some HTML code into a div with the .load function af jQuery that contains some code I want to execute;

$.ajax({
    type: "GET",
    url: url,
    dataType: "html",
    success: function(data){
        //.....
   }
 });

After loading the ajax request the alert(); function works, but the the someFunction won't.

$(document).ready(function(){
    alert('TEST'); //this works
    someFunction("#debug",'var');//this doesn't
});

How can I execute this function from an Ajax call

A function executed as <a onclick="someFunction()" won't work either.

Do you mean to execute JS appending from the ajax content, or execute a function after the ajax call and appending is done? — meder omuraliev
– meder omuraliev, Commented Aug 18, 2010 at 16:05
someFunction is defined in a .js files in the page that calls the ajax request. There's HTML loaded into an DIV that calls the function — waterschaats
– waterschaats, Commented Aug 18, 2010 at 16:09
you are loading <script> AND html into a <div> and expecting 'document' ready to trigger? — Scott Evernden
– Scott Evernden, Commented Aug 18, 2010 at 16:14
Looks like someFunction may have problematic code. Can we see it? — palswim
– palswim, Commented Aug 18, 2010 at 16:15

Oleg · Accepted Answer · 2010-08-18 16:17:48Z

1

Probably you should use jQuery.getScript to loading some javascript from the server and execute it.

UPDATED: In the most cases one load only the pure HTML fragment with respect of jQuery.ajax. Binding of elements to some javascript functions one do inside of success handle. All functions which one use in any event handler one loaded before (with <script> in the <head> block) on the main page (on the page which call jQuery.ajax). Then all look very clear and dynamic loading of any scripts is not needed.

edited Aug 18, 2010 at 16:17

answered Aug 18, 2010 at 16:08

Oleg

222k36 gold badges414 silver badges826 bronze badges

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

8 Comments

waterschaats Over a year ago

Why should I do that, if the javascript is already present in the document that call the new HTML

Oleg Over a year ago

You should look which data you have inside of success handler of jQuery.ajax. Probably you want use jQuery.load (see api.jquery.com/load). jQuery.ajax will be not used for page redirection, but for inserting or modifying some parts of existing HTML page. So <head> part of html page will not be loaded. Moreover it is better to prepare html code fragments which will be loaded per ajax instead of using full existing html pages.

waterschaats Over a year ago

hmmm, oké I'll try that. So its not possible?

waterschaats Over a year ago

Well, I do not load comple pages I just load some HTML without the head, body etc... the loaded HTML just call the some javascript functions.

Oleg Over a year ago

all is possible. But you should load html code fragment with jQuery.load and then either had already all scripts loaded before or load and execute the code per jQuery.getScript after the new html already loaded. In general you should not use existing full html pages, but prepare html fragments and seldom javascript code specially for loading per ajax.

|

chromaloop · Accepted Answer · 2010-08-18 16:33:10Z

0

Why wouldn't you use the callback function that's already available in your ajax call?

$.ajax({
type: "GET",
url: url,
dataType: "html",
success: function(data){
    alert('TEST'); //this works
    someFunction("#debug",'var');//this doesn't
}});

I would take a closer look at how you are architecting the code

answered Aug 18, 2010 at 16:33

chromaloop

2225 silver badges11 bronze badges

Collectives™ on Stack Overflow

executing script after jQuery Ajax Call

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related