在引导模式中显示 ajax 调用结果答案

【问题标题】：Showing ajax call result in bootstrap modal在引导模式中显示 ajax 调用结果
【发布时间】：2014-08-08 23:40:40
【问题描述】：

我需要在 Bootstrap 模式中显示多个数据。为此，我所做的是：

js文件：

$('#seeProfile').on('show', function() {

  $('.see-user').on('click', function(e) {
  e.preventDefault();

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

  $.ajax({
     url:  'getUser',
     type: 'POST',
     data: {id: id},
     success: function(html){
       $('#seeProfile .modal-body .p').html('test');
     },
     error: function(){
       alert("error");
     }  
  });  
});
});

查看 sn-p（模态）：

<div id="seeProfile" class="modal hide fade" tabindex="-1" data-replace="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    <h3>Perfil de Usuario</h3>
</div>

<div class="modal-body">
    <p></p>
</div>
<div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn">Close</button>
</div>

这不起作用。模态没有出现，但在检查时没有出现错误。我做错了什么？

编辑

鉴于我已经意识到我错过了一个点的答案，所以成功功能应该是这样的：

$('#seeProfile .modal-body p').html("test");

现在该模态正在工作，我需要知道如何将数据“插入”到这个新的模态组织中：

<div id="seeProfile" class="modal hide fade" tabindex="-1" data-replace="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    <h3>Perfil de Usuario</h3>
</div>
<div class="modal-body">
    <div class="scroller" style="height:300px" data-always-visible="1" data-rail-visible="1">
        <div class="row-fluid">
            <div class="span6">
                <h5>Usuario</h5>
                <p><input type="text" class="span12 m-wrap" id="username" readonly></p>
                <h5>Nombre</h5>
                <p><input type="text" id="name" class="span12 m-wrap" value="" readonly></p>
            </div>
            <div class="span6">
                <h5>Email</h5>
                <p><input type="text" class="span12 m-wrap" readonly></p>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn">Close</button>
</div>

如您所见，modal-body 中有许多“”标签。我尝试在其中插入一个 id，以便它可以区分，但它对我不起作用。我该怎么做？

【问题讨论】：

标签： javascript jquery ajax twitter-bootstrap bootstrap-modal

【解决方案1】：

当模态显示时您正在绑定单击事件，并且您从不显示模态，因此单击处理程序永远不会被绑定。

你可以这样做：

$('.see-user').on('click', function(e) {
    e.preventDefault();
    var id = $(this).data('id');
    $.ajax({
        url:  'getUser',
        type: 'POST',
        data: {id: id},
        success: function(html){
            $('#seeProfile .modal-body p').html('test');
            $('#seeProfile').modal('show');
        },
        error: function(){
            alert("error");
        }  
    });  
});

如果您确实想在显示模式时添加点击处理程序，则需要使用适当的处理程序。 You can find them here（在事件下方）。

【讨论】：

【解决方案2】：

你应该替换

 $('#seeProfile .modal-body .p').html('test');

由

 $('#seeProfile .modal-body p').html('test');

因为如果您之前插入一个点，您正在寻找一个名为'p' 的类。对于 html 标记 <p></p>，您只需在选择器中写入 'p'。

并用“$('#seeProfile').modal('show');”完成以显示模态。

【讨论】：

【解决方案3】：

试试这个（为我工作）：

这将显示模态：

        $('Your button').on('click',function(e){
            e.preventDefault();
            $('your modal').modal('show');
        });

然后这将绑定模态显示事件：

( 你可以使用 show.bs.modal 或 shown.bs.modal 唯一的区别是活动启动的时间）

      $('your modal').on('show.bs.modal', function(e) {
          e.preventDefault();
          //ajax call here!!
      });

【讨论】：

【解决方案4】：

试试这个：

$('#seeProfile .modal-body p').html('test');

请注意，我删除了 . （点）你在 p 之前有过。

【讨论】：

【解决方案5】：

尝试使用类名。

$(document).on("click", ".getAndUploadButClass", function() {
    alert("Before laoding the image making ajax call to load the images ");
    $('#picturemyModal').modal('show');
});

【讨论】：