CODEWITHSUNDEEP
javascriptjqueryajaxdom
Shpigford
Shpigford

Reputation: 25328

Accessing DOM object after AJAX call?

I have a typical AJAX call that appends some HTML to the current page. I want to be able to access the newly inserted HTML with typical jQuery selectors.

Here's what I'd like to be able to do...

$.ajax({
   url: url,
   success: function(data) {
      $('body').append(data);
   }
});

$('#new_div').show();

#new_div would be some HTML element from the data I retrieved. I don't necessarily want to attach events to the new elements (like click), so using something like .load() or .on() doesn't work here (as far as I know).

I tried setting the $.ajax() call to a variable: var new_div = $.ajax(...) but that didn't get me anywhere.

Upvotes: 8

Views: 32156

Answers (7)

spoonhete
spoonhete

Reputation: 1

I have the same issue and find a method that was great.

If you have the jQuery functions in a file for example library_jquery.js, just load that file again in the success.

$.ajax({
   url: url,
   success: function(data) {
      $('body').append(data);
      //LOAD THE SCRIPT FILE AGAIN
      var path_script_file="libray_jquery.js";
      $.getScript(path_script_file);
   }
});

Upvotes: 0

Dennis Shen
Dennis Shen

Reputation: 61

I think it's ajax async cause the problem you mention.

In jQuery ajax funciton API says: Perform an asynchronous HTTP (Ajax) request.

If you want to access the data from ajax right after request

you should put you code in the ajax.success function like:

$.ajax({
   url: url,
   success: function(data) {
      $('body').append(data);
      $('#new_div').show();
   }
});

Or turn the async setting into false

$.ajax({
   url: url,
   async:false,
   success: function(data) {
      $('body').append(data);
   }
});
$('#new_div').show();

that will make sure the $('#new_div') selector gets the object

Upvotes: 1

doctororange
doctororange

Reputation: 11810

If you would like to manipulate the new content immediately after (or even before) inserting it to the DOM, you can put that in the AJAX success callback too:

$.ajax({
   url: url,
   success: function(data) {
      $('body').append(data);
      $('#new_div').show();
   }
});

On the other hand, if you want to bind handlers to content that will be added to the page via ajax, jQuery does that like this:

$(document).on('click', '#new_div', function(){
  alert("This function is bound to all #new_div's click events, even if they are added to the DOM via ajax later!")
});

Upvotes: 14

ttsushko
ttsushko

Reputation: 21

Actually this sort of things can be solved by following way: (I know it is similar to others, but a little bit more clear)

$.ajax({
   url: url,
   success: function(data) {
      $('body').append(data);
      afterHtmlAppendCallback();
   }
});
function afterHtmlAppendCallback()
{
    $('#new_div').show();
}

Upvotes: 1

johnnynotsolucky
johnnynotsolucky

Reputation: 540

Assuming the data being returned is something like <div id='new_div' /> then try something such as

var newDiv = null;

$.ajax({
    url: url,
    success: function(data) {
        newDiv = $(data).appendTo($('body'));
    }
});

This will add the <div /> to the body of your page, and assign the jQuery element to the variable newDiv which can then be accessed again at a later stage.

However, if you access newDiv before success has been returned, it will be null or the previous value, if it was assigned previously.

Upvotes: 1

moonwave99
moonwave99

Reputation: 22817

If you want to decouple your code from the callback:

functionWithALotOfStuffToDo = function(data){
  // do stuff here
}

$.ajax({
   url: url,
   success: functionWithALotOfStuffToDo
});

Upvotes: 3

roullie
roullie

Reputation: 2820

how about:

$.ajax({
   url: url,
   success: function(data) {
      $('body').append(data).find('#new_div').show();
   }
});

Upvotes: 2

Related Questions