Question

这就是我的尝试：

打开模态：

<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的远程数据。请帮帮我。

Answer 1

在您的示例中，此代码无法运行：

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

你必须使用这样的东西：

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

完成：

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

Answer 2

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

不起作用，因为modal-body只是一个div而不是一个输入元素。所以我们应该给出

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

而不是

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

.val()仅用于输入元素。 .html()用于将html内容附加到div中。

通过

获取id属性

$(this).attr("id")

或

$(this).prop("id")

使用ajax加载远程表单以在bootstrap模式中进行编辑

2 个答案: