1

Jquery に問題があります。したがって、問題は、フォームを送信して結果のテーブルを取得するたびに発生することです。ページが更新され、Jquery ダイアログ ボックスに結果を読み込めません。これは私のコードです

<script>
    $(function () {
      $("#dialog").dialog({
        autoOpen: false,
        height: 600,
        width: 1000,
        show: "blind",
        hide: ""
      });

      $("#opener").click(function () {
        $("#dialog").dialog("open");
        return true;
      });
    });
</script>

私のhtmlの場合：

<form id="searchtable" >

              <label>Search by Username :</label><input type ="text" name="searchid" style="border: 1px solid black">

                <input  type ="submit" name ="search" id="opener">
                <br>
                <%-- search table --%>
                  Results:
                  <div id="dialog" title="Search Result">
                  <table border ="1" id="normal">
                  <tbody>
                          <tr>
                              <th>ID</th>
                              <th>Username</th>


                          </tr>
                  </tbody>

                  <g:each in = "${example}">
                          <tr>
                              <td>${it.ID}</td>
                              <td>${it.username}</td>

                         </tr>
                  </g:each>
                  </table>
                  </div>

              <%--List Table--%>
               <table border ="1" id="normal">
               <tbody>
                      <tr>
                          <th>ID</th>
                          <th>Username</th>

                      </tr>
                </tbody>
              <g:each in = "${result}">
                        <tr>

                          <td>${it.ID}</td>
                          <td>${it.username}</td>

                        </tr>
              </g:each>
            </table>
    </form>

したがって、値を送信した後、コントローラーで値を処理し、それを html に戻して表示する必要があります。しかし、それは更新されるだけで、ロードできません。それで、誰が何をすべきか知っていますか？フォームの送信後にロードする必要があるだけです->更新->ダイアログボックスが結果とともに表示されます。どうもありがとうございました

4

2 に答える 2

2

jQueryのload（）関数を使用すると、目的のコントローラーにリクエストを送信し、HTMLレスポンス（ダイアログのコンテンツ）をレンダリングすることができます。これは、レスポンスが成功すると#dialog要素に読み込まれます。

<script>
    $(function () {
      $("#dialog").dialog({
        autoOpen: false,
        height: 600,
        width: 1000,
        show: "blind",
        hide: ""
      });

      $('#searchtable').submit( function () {
        var searchId = $('input[name="searchid"]').val();
        $('#dialog').load('/url/to/controller', { "searchid": searchId }, function () {
          $(this).dialog('open');
        });
        return false;
      });
    });
</script>
于 2013-01-10T02:40:39.537 に答える
1

You need something like this :

$(function () {
    $("#dialog").dialog({
        autoOpen: false,
        height: 600,
        width: 1000,
        show: "blind",
        hide: ""
    });

    $("#searchtable").on('submit', function() {
        alert("submit handler has fired");
        $.ajax({
            url: ...,
            data: $(this).serialize(),
            type: ...,
            success: function(html){
                //do something with the `html` returned from the server here
                alert(html);
                $("#dialog").dialog("open");
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert('error: ' + textStatus + ': ' + errorThrown);
            }
        });
        return false;//suppress natural form submission
    });
});

With reference to the jQuery's $.ajax() documentation, you will have to fill in the gaps.

于 2013-01-10T02:42:49.493 に答える