How to show this Success message on popup

Question

I have this code in my view.

After my database adding the message is showing perfectly but my Grid is not showing the updated result. If I keep

return true;

when I click Submit button I am getting popup window immediately and then adding to the database? This showing my updated result in the grid.

Answer 1

The AJAX request is asynchronous, so it finishes the form submit routine before the callback finishes, which might explain the result you are getting. I think there may be an async setting you can turn off so that the operation/callback must complete first.

Answer 2

Basing on your code and as far as i'm aware of, you have no way on loading the new data.

The reason why when you return true; the new data is being loaded is because the submit event successfully perform it's default operation which is submitting to the server and refreshing the page.

On the other hand, return false; prevents this operation (including the refresh page) and instead just run the XHR.

What you could do is:

Return the new data as a result of the XHR and parse it accordingly.

Answer 3

If you have return true at the end of your submit function, then the browser will go to the url in the action attribute of the form. I think you should always return false if you have taken care of the form data in the ajax call. You need to get the updated grid as part of the ajax success method.

You can't have the ajax popup and still let the form submit the normal way.

$(function () {
          $('#form4').submit(function () {
              ...    
              $.ajax({
                 ...
                  success: function (result) {
                      ...
                      // update grid
                      grid_container = $("#grid").html('');
                      $("<table>").appendTo(grid_container);
                      for (ii = 0; ii < result.grid.length; ++ii) {
                         tr = $("<tr>").appendTo(table);
                         for (jj=0; jj < result.grid[ii].length; ++ii) {
                             td = $("<td>").text(result.grid[ii][jj]).appendTo(tr);
                         }
                      }

                      // show success message
                      alert('Saved NewServiceTypeCategory Successfully. Thank you!');
                  }
              });
              return false;
          });
      });

Now all you have to do is make your server side post handler return the XML with the grid data.