PHP & Bootstrap - Modal Shown just before content updated - php

Question

In the database I have a table called articles. On one page of my website there is a list of titles of all articles - and each title is actually a link to edit the article. It looks like this:
<a onclick="launch_edit_modal(<?php echo $article->getId(); ?>)" data-toggle="modal" data-target="#edit_modal" href="#">Edit</a>
When you click on the link - function launch_edit_modal(id_of_article) is triggered:
<script type="text/javascript">
$('#edit_modal').modal({
show: false
});
function launch_edit_modal(id) {
$.ajax({
type: "POST",
url: "return_article_data.php",
data: {
id:id
},
dataType: "json",
success: function(data) {
$("#category").val(data.category_id);
$("#title").val(data.title);
$("#content").val(data.content);
$('#edit_modal').show();
}
});
}
</script>
This script is at the bottom.
So, using AJAX I find the other data (category, title, content) about that article and then I update the form which is modal's content:
<div class="modal fade" id="edit_modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h3 class="modal-title">Edit article</h3>
</div>
<div class="modal-body">
<div class="row">
<form id="edit_forma" class="form-horizontal" method="post" action="edit_article.php">
<fieldset>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Category:</label>
<div class="col-md-4">
<select id="category" name="category" class="form-control">
<?php foreach($categories as $c): ?>
<option value="<?php echo $c->getId(); ?>"><?php echo $c->getName(); ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="title">Title:</label>
<div class="col-md-4">
<input id="title" name="title" placeholder="" class="form-control input-md" type="text">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="content">Content:</label>
<div class="col-md-4">
<textarea class="form-control" id="content" name="content" rows="10"></textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<button type="submit" id="submit" name="submit" class="btn btn-success">Izmeni</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">
Close
</button>
</div>
</div>
</div>
</div>
All of this works - but there is a problem - when I click on edit link - Modal is shown, and then after 2 or 3 seconds the form is filled (updated) with data.
Is there a way to fix this - to show Modal after the form is filled (updated)?
Thanks in advance.

Answer 1

As Ghazanfar Mir wrote in the comments below my question, I need just to set:
async: false
for ajax call, and the problem is solved.
Thank you Ghazanfar Mir.