Refresh the Bootstrap Modal

Question

I have a bootstrap form in the bootstrap modal. I have 2 dependent fields. So 2nd field dropdown is based on the first field value.

What I want to do is when I select the value from the first field, ajax request triggers and select the related vales for second field.

It all works at the moment, but on the success of Ajax request, i have to refresh the page and re-open the modal.

How it is possible to refresh the content of modal.

As you can see below, in success, I have to refresh the page and re-trigger the modal.

Here is my jquery ajax.

$("#add-new-group").click(function(e) {
e.preventDefault();
//Create ajax request with the two paramaters
$.ajax({
    url: '/',
    type: 'POST',
    data: $("#new-group").serialize(),
    success: function(data, textStatus, jqXHR) {
        jQuery('#stock').load('/tasks/stock.php');
        $('#add-new-category-modal').modal('hide');
        jQuery('#stock').load('/tasks/stock.php',  function()  {
            $("#stock-settings").removeClass("collapse");
            $(".add-new-category").trigger("click");
        });
    },
    error: function(jqXHR, textStatus, errorThrown) {
        //Display error message to user
        alert("An error occured when saving the data");
      }
  }); // End ajax request
 }); // End on click event

You should not refresh the model. Instead populate the 2nd dropdown dynamically using jquery with the data received from the ajax request. — Nishad K Ahamed, Oct 10 '17 at 12:54
You can refer this link: https://stackoverflow.com/questions/5918144/how-can-i-use-json-data-to-populate-the-options-of-a-select-box — Nishad K Ahamed, Oct 10 '17 at 13:00

Refresh the Bootstrap Modal

0 Answers0