Databases
StackOverflow2013
Postsdbo
POHow to popup modal only when the Ajax function finish execution in bootstrap jquery?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to popup modal only when the Ajax function finish execution in bootstrap jquery?
    text
    copied!<p>I have a <code>Ajax</code> function like this:</p> <pre><code>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) } }); } </code></pre> <p>I have <code>href</code> like this:</p> <pre><code>&lt;a onclick="generate_summary()" href="#summaryModal" style="text-decoration:none;" id="summarize_btn" role="button" class="btn btn-success offset3" data-toggle="modal"&gt;Summarize&lt;/a&gt; </code></pre> <p>Modal looks like this:</p> <pre><code>&lt;!-- Summary output popup --&gt; &lt;div id="summaryModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt; &lt;div class="modal-header"&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt; &lt;h3 id="myModalLabel"&gt;Summary&lt;/h3&gt; &lt;/div&gt; &lt;div class="modal-body" id="modal-body"&gt; &lt;textarea disabled id="summary_output" name="summary_input" rows="15" class="span5"&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt; &lt;button class="btn btn-primary"&gt;Save changes&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Modal is a popup when summarize button is clicked. </p> <p>The output from the server is placed on:</p> <pre><code> &lt;div class="modal-body" id="modal-body"&gt; &lt;textarea disabled id="summary_output" name="summary_input" rows="15" class="span5"&gt;{{ summary }}&lt;/textarea&gt; &lt;/div&gt; </code></pre> <p><code>Ajax function, modal</code> everything is working fine. But the modal is load so quickly and the function only returns the value after <code>10-15 secs</code>. I want to show the popup modal and the summary at the same time. How can I do that?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload