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()代わりに使用する必要があるように思えます.get()-既存のノードのコンテンツをAJAXリクエストの部分的なコンテンツに置き換える機能が組み込まれています。

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

dataHTMLの構造によっては、これが役立つはずです：

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

filterHTML 構造に応じて、使用する必要がある/かもしれない/

于 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 に答える