How to append only a div from ajax().done()

Question

I have a problem when using the following javascript. When pressing the #search_room_button, it will run and replace the #matched_rooms div with a copy of the whole website. However, I wish only to have the new #matched_rooms div returned and thereby replacing the old one. How can this be done?

<script type="text/javascript">
    $(function() {
        $("#search_room_button").on('click', function() {

            $("#matched_rooms").html("<p>LOADING</p>");

            $.ajax({
                url: 'book.php',
                type: 'GET',
                data: {
                    'rtid': 1,
                    'date': $("#date").val(),
                    'time': $(".ui_tpicker_time").text(),
                    'duration': 4
                }
            }).done(function(data) {
                $("#matched_rooms").html(data, "#matched_rooms");
            })
        })
    });


</script>

Answer 1

I think you're looking for

$("#matched_rooms").html($(data).find("#matched_rooms").html());

Btw, there's also a (limited) shortcut for this functionality: .load() :

$("#matched_rooms")
  .html("<p>LOADING</p>")
  .parent().load('book.php #matched_rooms', {
    'rtid': 1,
    'date': $("#date").val(),
    'time': $(".ui_tpicker_time").text(),
    'duration': 4
  });

Answer 2

You can use $.load instead of $.ajax .

$('#surrounding_element').load('book.php #matched_rooms', {
                'rtid': 1,
                'date': $("#date").val(),
                'time': $(".ui_tpicker_time").text(),
                'duration': 4
});

Where you should update Your html code with for example:

<span id="surrounding_element">
    <div id="matched_rooms"></div>
</span>

Answer 3

It looks to me like you should be using .load() instead of .get() - it has built-in functionality for replacing an existing node's contents with the partial contents of an AJAX request.

Just be careful with your DOM structure - jQuery expects to replace the entire contents of the original element with the specified element itself, not the specified element's contents.

You should wrap your #matched_rooms element in a #container element, and then use that:

<div id="container">
   <div id="matched_rooms"> ... </div>
</div>

with code:

$("#matched_rooms").html("<p>LOADING</p>");
$('#container').load('book.php #matched_rooms', { // NB: selector parameter!
    'rtid': 1,
    'date': $("#date").val(),
    'time': $(".ui_tpicker_time").text(),
    'duration': 4
});

There's no need for a success handler - the insertion back into the DOM is automatic.

Answer 4

试试： $("#matched_rooms").html(data.find('#matched_rooms').html());

Answer 5

I don't exactly know what you mean, but maybe something like this: $("#matched_rooms").html($(data).find("#matched_rooms"));

(I made the assumption the data returned by the ajax request returns the whole page)

Answer 6

Depending on the structure of your data html this should help:

var newHtml = $('#matched_rooms', data);
$("#matched_rooms").html(newHtml);

You /may/ need to use filter depending on your HTML structure

Answer 7

This is what could be done:

get.done(function(data) { 
                var message1 = $(data).find('#message1');
                var message2 = $(data).find('#message2');
                var NewList = $(data).find('div');
                $('#error').html(message1.html());
                $('#results').html(message2.html());

* This is an example not copy and paste code *