Question

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

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

<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

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