1

使用以下 javascript 时出现问题。当按下#search_room_button 时，它将运行并将#matched_rooms div 替换为整个网站的副本。但是，我只希望返回新的#matched_rooms div，从而替换旧的。如何才能做到这一点？

<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>
4

7 回答 7

4

我想你正在寻找

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

顺便说一句，此功能还有一个（有限的）快捷方式.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
  });
于 2013-04-24T13:01:02.060 回答
4

您可以使用$.load而不是$.ajax.

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

您应该在哪里更新您的 html 代码，例如：

<span id="surrounding_element">
    <div id="matched_rooms"></div>
</span>
于 2013-04-24T13:01:25.050 回答
2

在我看来，您应该使用.load()而不是- 它具有用AJAX 请求的部分.get()内容替换现有节点内容的内置功能。

请注意您的 DOM 结构 - jQuery 希望将原始元素的全部内容替换为指定元素本身，而不是指定元素的内容。

您应该将#matched_rooms元素包装在一个#container元素中，然后使用它：

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

带代码：

$("#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
});

不需要成功处理程序 - 插入回 DOM 是自动的。

于 2013-04-24T13:01:00.670 回答
0

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

于 2013-04-24T13:00:19.117 回答
0

我不完全明白你的意思，但也许是这样的： $("#matched_rooms").html($(data).find("#matched_rooms"));

（我假设ajax请求返回的数据返回整个页面）

于 2013-04-24T13:00:24.183 回答
0

根据您的datahtml 的结构，这应该会有所帮助：

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

您/可能/需要filter根据您的 HTML 结构使用

于 2013-04-24T13:00:58.317 回答
0

这是可以做的：

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());

*这是一个示例，不能复制和粘贴代码 *

于 2013-04-24T13:03:01.223 回答