0

I have the following javascript

$.ajax({
    type: ... url: ... data: ... bla bla...

    success: function( html ) {

        var response = $( html ).filter( '#targetID' ).html();

        $( 'body' ).html( response ).show('slow');

    }
});

It works fine except for loading pages with javascript, the javascript disapears. So how to solve this problem?

chaplain
  • 9
  • 2
  • 1
    If your scripts are within the body tag, html() method clears all of your contents, consider appending the data to another element instead of body element. – Ram Sep 22 '12 at 22:23
  • `I have the following javascript` `$.ajax({ type: ... url: ... data: ... bla bla...`. How does that even execute? – Nope Sep 22 '12 at 22:27
  • what do you mean by 'javascript disappears'? does it get loaded with the page? – Apoorv Saxena Sep 22 '12 at 23:14
  • Similar question here: http://stackoverflow.com/questions/2162496/inline-jquery-script-not-working-within-ajax-call – endyourif Sep 23 '12 at 00:31

2 Answers2

1

You should use a container inside the body and not place the code directly in the body.

ie. Add on the div tag inside the body which will be the container

<div class="container"></div>

Then on the JS call

 $( '.container' ).html( response ).show('slow');

That way the content loads in the container and not directly in the body which would replace all the content of the page including the JS you have there.

Also when using Ajax calls I believe it makes for a cleaner code to pass the response to other functions to process. That way you will have smaller functions to debug and easier to understand code.

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {

      //Here you pass the response to the other function
      processSuccess(data);
  },
  fail: function(data) {

      //Here you pass the response to the other function
      processFail(data);
  }

});

function processSuccess(response) {
     //Print the response in the console (ie. Firebug console) 
     //if console is available
     if(console) {
        console.log(response);
     }
};

function processFail(response) {
     //Print the response in the console (ie. Firebug console) 
     //if console is available
     if(console) {
        console.log(response);
     }
};

Of course all that inside a namespace would make it even better.

Nicolini
  • 41
  • 1
  • 5
  • that's ok, but i need just a specific div from the response. and sometimes this div can contain javascript – chaplain Sep 23 '12 at 16:46
0

You Mean you are getting the javascript trough the Ajax request.

In that case you need to REALY make sure you have the proper code inside it. Because compability is a bitch with those kind of things. JQuery duos a eval function i think when he loads the result, so the js should load. But it could be that your code haas some aprse errors which are usually ignored on page, but when you use it with eval you will get error in some browsers.

Which broser ar you using?

Try to eval your code after you load it into the designated div.

Sangoku
  • 1,588
  • 2
  • 21
  • 50