modal Pop Up window not waiting for Ajax Call - php

Question

i have tried all my possible best and searched every where but to no avail that is why i have decided to do this after about 4years of learning from this website.
i noticed that my modal pop up window is not waiting for my ajax that sends the value retrived from the anchor tag which is then sent to the PHP file here by casuing the php to give an index undefined error. but if i just use the alert() on success: function() i see the values been retrived from the anchor tag. now this is my code the html link <a href="#" class="btn btn-info btn-sm" id="editr" data-id="<?php echo $postID; ?>" data-owner="<?php echo $op; ?>" data-toggle="modal" data-target="#modal-form" >Edit Page</a>
$(function(){
$("#editr").click(function(e) {
e.preventDefault();
var id = $(this).attr("data-id");
var owner = $(this).attr("data-owner");
var dataString = 'id=' + id + '&user=' + owner;
$.ajax({
url: "../config/edit.php",
type: "POST",
data : dataString,
cache: false,
success: function(data){
alert(data);
}
});
});
});
this is the modal part
<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Form in moadl</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1"> Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Answer 1

You need to wait for the promise to return and then continue on with what you were trying to do.
$(function(){
$("#editr").click(function(e) {
e.preventDefault();
var id = $(this).attr("data-id");
var owner = $(this).attr("data-owner");
var dataString = 'id=' + id + '&user=' + owner;
var promise = $.ajax({
url: "../config/edit.php",
type: "POST",
data : dataString,
cache: false
});
promise.then(function(data){
//show modal with data (in place of alert)
alert(data);
});
});
});