Load remote form for editing in bootstrap modal using ajax - php

Question

This is what I am trying:
To open modal:
<a href="" class="label label-important"
data-toggle="modal" data-target="#editFee"
data-id="'.$month['fid'].'" title="Edit '.$month['status'].' Fee">Edit</a>';
This is the modal dialog:
<div class="modal fade" id="editFee" tabindex="-1" role="dialog"
style="width: 25%" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Pay Fee</h4>
</div>
<div class="modal-body">
<!--Load remode editfee.php--!>
</div>
</div>
</div>
</div>
and this is editfee.php
<?php
$id=$_GET['id'];
$fee = QueryFee('Feetable', $id);
foreach($fee as $feeForm):
?>
<form>
<input type="text" id="amount" value="<?php echo $feeForm['amount']; ?>">
<input type="text" id="dateFee" value="<?php echo $feeForm['dateFee']; ?>">
<input type="submit" id="submitFee" value="Save Fee">
</form>
<?php endforeach;?>
And finally the jquery ajax:
$(document).on("click", ".label", function(e){
e.preventDefault();
var id= $("#id").val();
dataEdit = 'id='+id;
$.ajax({
type:'GET',
data:dataEdit,
url:'editfee.php',
success:function(data) {
$(".modal-body").val(data);
}
});
});
I am using Bootstrap modal V2.0.4. The above code does open the dialog but without the remote data from editfee.php. Please help me.

Answer 1

In your example, this code can't work:
var id= $("#id").val();
Your must to use something like this:
var id = $(this).data('id');
And finish by:
$(".modal-body").html(data);

Answer 2

$(".modal-body").val(data);
will not work, Because modal-body is just a div not an input element. So we should give
$(".modal-body").html(data);
instead of
$(".modal-body").val(data);
.val() attribute only for input elements. .html() is for appending html contents into the div.
And get the id attribute by
$(this).attr("id")
or
$(this).prop("id")