Jquery刷新并使用表加载页面

I'm having some problem with my Jquery. So, the problem is that whenever i submit the form and get the tables of result. My page refreshes and is unable to load the result in the Jquery dialog box. This is my codes

我的Jquery遇到了一些问题。所以，问题是每当我提交表单并获得结果表。我的页面刷新，无法在Jquery对话框中加载结果。这是我的代码

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

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

For my html:

对于我的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>

So after submitting the values, i need to process the values in the controller and pass it back to the html to display it out. But it just refreshes and can't get it load. So anyone knows what to do? I just need it to load after the form submit -> refreshes -> dialog box appear with results. Thank you guys so much

因此，在提交值之后，我需要处理控制器中的值并将其传递回html以显示它。但它只是刷新，无法让它负载。所以谁知道该怎么办？我只需要在表单提交后加载 - >刷新 - >对话框出现结果。非常感谢你们

2 个解决方案

#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.

参考jQuery的$ .ajax（）文档，您将不得不填补空白。

#2

Using jQuery's load() function, you can send a request to the intended controller and have it render an HTML response (the contents of the dialog), which will be loaded into the #dialog element upon a successful response.

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

#1