Question

我的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以显示它。但它只是刷新，无法让它负载。所以谁知道该怎么办？我只需要在表单提交后加载 - ＆gt;刷新 - ＆gt;出现带有结果的对话框。非常感谢你们

Answer 1

使用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>

Answer 2

你需要这样的东西：

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

参考jQuery的$.ajax() documentation，你必须填补空白。

Jquery刷新并使用表加载页面

2 个答案: