Загрузить удаленную форму для редактирования в модале начальной загрузки с помощью ajax

Question

Загрузить удаленную форму для редактирования в модале начальной загрузки с помощью ajax

Вот что я пытаюсь:

Чтобы открыть модал:

<a href="" class="label label-important"data-toggle="modal" data-target="#editFee"data-id="'.$month['fid'].'" title="Edit '.$month['status'].' Fee">Edit</a>';

Это 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>

а это 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;?>

И наконец 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);
}
});

});

Я использую Bootstrap модальный V2.0.4. Приведенный выше код открывает диалоговое окно, но без удаленных данных из editfee.php. Пожалуйста, помогите мне.

1

ajax bootstrap-modal jquery php

Решение

Другие решения

$(".modal-body").val(data);

не будет работать, потому что modal-body — это просто div, а не элемент input. Поэтому мы должны дать

$(".modal-body").html(data);

вместо

$(".modal-body").val(data);

.val() атрибут только для элементов ввода. .html() предназначен для добавления содержимого HTML в div.

И получить атрибут id по

$(this).attr("id")

или же

$(this).prop("id")

0

Источник

Accepted Answer

В вашем примере этот код не может работать:

var id= $("#id").val();

Вы должны использовать что-то вроде этого:

var id = $(this).data('id');

И закончить:

$(".modal-body").html(data);

1