How to popup modal only when the Ajax function finish execution in bootstrap jquery? - ajax

Question

I have a Ajax function like this:
function generate_summary() {
var summary_input=document.getElementById('summary_input').value;
var email_notify=document.getElementById('email_notify').value;
var num_sent=document.getElementById('num_sent').value;
$.ajax({
type: "GET",
url: "/summary/",
data: {summary_input:summary_input, email_notify:email_notify, num_sent:num_sent},
success: function(data){
$('#modal-body').html(data)
}
});
}
I have href like this:
<a onclick="generate_summary()" href="#summaryModal" style="text-decoration:none;" id="summarize_btn" role="button" class="btn btn-success offset3" data-toggle="modal">Summarize</a>
Modal looks like this:
<!-- Summary output popup -->
<div id="summaryModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Summary</h3>
</div>
<div class="modal-body" id="modal-body">
<textarea disabled id="summary_output" name="summary_input" rows="15" class="span5"></textarea>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
Modal is a popup when summarize button is clicked.
The output from the server is placed on:
<div class="modal-body" id="modal-body">
<textarea disabled id="summary_output" name="summary_input" rows="15" class="span5">{{ summary }}</textarea>
</div>
Ajax function, modal everything is working fine. But the modal is load so quickly and the function only returns the value after 10-15 secs. I want to show the popup modal and the summary at the same time. How can I do that?

Answer 1

to use jquery dialog you will have to reference jquery.ui js and css files in your project.
first make the summaryModal a jquery dialog:
$("#summaryModal").dialog({ autoOpen: false, buttons:
{
"Save": function () {
if (!confirm("Do you want to save the changes?")) {
return;
}
//Add your logic to save.
$("#summaryModal").dialog('close');
},
"Cancel": function () {
$("#summaryModal").dialog('close');
}
}
});
After that when you click the summarize_btn make the ajax call and load the content in the dialog:
$("#summarize_btn").click(function () {
$.ajax({
type: "GET",
url: "/Home/About",
success: function (data) {
$("#summaryModal").dialog("option", "height", 500);
$("#summaryModal").dialog("option", "width", 500);
$("#summaryModal").dialog("option", "title", 'Modal Title');
$("#summaryModal").dialog("option", "modal", true);
$("#summaryModal").dialog('open');
$('#summaryModal').html(data);
}
});
});
the summaryModal div will look like:
<div id="summaryModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>