How to display a Bootstrap Dialog followed by calling $.get which updates the dialog code

Question

I have a Bootstrap dialog which has a list that needs to be updated after a transaction takes place. I've placed the dialog code in an MVC partial view. I've also defined an area where the partial view is to be rendered into the parent view as follows:

<div id="idCodeRefreshAreaForFindModal">
    @{Html.RenderPartial("_FindPurchaseOrderModal", Model); }
</div>

The modal dialog shows up fine with the following code:

Button to click to show the dialog:

<input type="button" name="PurchaseOrderButton" value="Test with JavaScript function"
       class="btn btn-primary" id="idFindBtnTest2" />

jQuery event handler triggered when the above button is clicked:

$("#idFindBtnTest2").click(function () {
    $('#id-FindModal').modal('show');
  });  
});

However, what I need is for the dialog code to be refreshed after it has been closed and a transaction takes place. This is where I am having a problem. If I update the above code so a $.get transaction takes place to return an updated partial view of the dialog will not show later by clicking the button again:

$("#idFindBtnTest2").click(function () {
    $('#id-FindModal').modal('show');

   var params = {};
   url = '@Url.Action("_FindPurchaseOrderModal", "PurchaseOrder")';
   $.get(url, $.param(params, false), function (data) {
       $('#idCodeRefreshAreaForFindModal').html(data); 
  });  
});

I think the dialog code is getting updated before it can be shown so this is breaking the dialog. If I remove the line that tries to show the dialog and run this test again the $.get operation updates the partial view for the modal successfully. If I remove the $.get part and only leave the show dialog part then the dialog shows up fine.

I tried putting a sleep(2000) statement after the statement to show the dialog but that does not work. How can I perform a $.get to update the dialog code with the partial view after the dialog closes?

Jerdine Sabio · Accepted Answer · 2020-03-15T04:30:04.043

How can I perform a $.get to update the dialog code with the partial view after the dialog closes?

This might be a better solution, instead of binding the event to the button that shows the modal, you could bind the event whenever the modal is closed.

Bind a function to Twitter Bootstrap Modal Close

$("#idFindBtnTest2").click(function () {
    $('#id-FindModal').modal('show');
});

$(document).on('hidden.bs.modal', '#id-FindModal', function (event) {
   var params = {};
   url = '@Url.Action("_FindPurchaseOrderModal", "PurchaseOrder")';
   $.get(url, $.param(params, false), function (data) {
       $('#idCodeRefreshAreaForFindModal').html(data); 
   }); 
});

How to display a Bootstrap Dialog followed by calling $.get which updates the dialog code

1 Answers1