Question

I want to replace the contents inside div with id = test with the modified AJAX response

javascript:

('.test').bind('ajax:success', function()
{
    $.ajax({
          success: function(html){
            $('.test').text($(html).find("#test"));  // returns [object Object]

          }
    });
});

But $(html).find("#test") returns an [object Object] and $(html).find("#test").html() returns null

How can I get the contents of div with id “test” in the ajax response?

Answer 1

Based on this blog link, the answer is in the second parameter:

jQuery(function($) {
  // create a convenient toggleLoading function
  var toggleLoading = function() { $("#loading").toggle() };

  $("#tool-form")
    .bind("ajax:loading",  toggleLoading)
    .bind("ajax:complete", toggleLoading)
    .bind("ajax:success", function(event, data, status, xhr) {
      $("#response").html(data);
    });
});

Then, your code would be:

$('.test').bind('ajax:success', function(event, data, status, xhr) {

   // this is $('.test')
   $(this).text($(data).find("#test"));

});