使用 php 和 jQuery 的动态引导模式答案

【问题标题】：Dynamic Bootstrap Modal with php and jQuery使用 php 和 jQuery 的动态引导模式
【发布时间】：2016-02-15 07:05:41
【问题描述】：

我有多个信息框，其中包含从数据库中回显的简短信息。在每个框的底部是“更多信息”，点击它会触发一个模式。

问题：在点击“更多信息”时，无论点击了哪个信息框，都会显示相同的信息。

目标：点击更多信息时，我需要显示相应的信息。当单击该信息框的“更多信息”时，需要显示引用该行号 X 的一些方法。

我试过了，还是不行：

jQuery(document).ready(function($) {
$('.moreinfo').click(function(event) {
    var a = $(this);

    // Get ID
    var currentID = parseInt(a.data('id'));

    $.ajax({
  type : 'post',
   url : 'ajax.php', // in here you should put your query 
   dataType: 'json',
  data: {'vac_id': currentID}, // here you pass your id via ajax .
             // in php you should use $_POST['post_id'] to get this value 
  success : function(json)
   {
      // Change the ID in modal
    var m = $('#moreinfo'), mBody = m.find('.panel-body');

       // Update new content
       $('#vac_id').text(json.vac_id);
       $('#vac_post_date').text(json.vac_post_date);
       $('#vac_job_title').text(json.vac_job_title);
       $('#vac_comp_name').text(json.vac_comp_name);
       $('#job_description').text(json.job_description);
       $('#vac_ess_one').text(json.vac_ess_one);
       $('#vac_ess_two').text(json.vac_ess_two);
       $('#vac_ess_three').text(json.vac_ess_three);
       $('#vac_ess_four').text(json.vac_ess_four);
       $('#vac_ess_five').text(json.vac_ess_five);
       $('#vac_ess_six').text(json.vac_ess_six);
       $('#vac_ess_seven').text(json.vac_ess_seven);
       $('#vac_ess_eight').text(json.vac_ess_eight);
       $('#vac_ess_nine').text(json.vac_ess_nine);
       $('#vac_ess_ten').text(json.vac_ess_ten);
       $('#vac_des_one').text(json.vac_des_one);
       $('#vac_des_two').text(json.vac_des_two);
       $('#vac_des_three').text(json.vac_des_three);
       $('#vac_des_four').text(json.vac_des_four);
       $('#vac_des_five').text(json.vac_des_five);
       $('#vac_des_six').text(json.vac_des_six);
       $('#vac_des_seven').text(json.vac_des_seven);
       $('#vac_des_eight').text(json.vac_des_eight);
       $('#vac_des_nine').text(json.vac_des_nine);
       $('#vac_des_ten').text(json.vac_des_ten);
       $('#vac_deadline').text(json.vac_deadline);
       $('#apply_link').text(json.apply_link);

      m.modal('show');
     }
   });

    event.preventDefault();
  });
});

这里可以看到模态和模态触发器：FIDDLE

真诚感谢任何帮助。

【问题讨论】：

标签： php jquery twitter-bootstrap bootstrap-modal

【解决方案1】：

这是我用来创建动态模式/对话框的方法：

var modal = $('#mymodal');
modal.find('.modal-title').text(newTitle); // Change modal title (optional)
modal.find('.modal-body').html(somethingNew); // Change modal content
modal.show();

例如：https://jsfiddle.net/3ey8tyz3/

【讨论】：

我试过这个，但也许我没有输入正确的名称、id 或类引用，我如何在这个例子中告诉它打开与 id 相关的信息？
@Kez #mymodal 是您在代码中使用的 ID：getbootstrap.com/javascript/#modals ".modal-title" 和 ".modal-body" 是 Bootstrap 模态的默认类。
抱歉，不是模态的 id，而是模态显示的数据的 id，因为它会根据单击的“更多信息”按钮显示完全不同的信息。
@Kez 查看我的动态模态示例（希望对您有所帮助）：jsfiddle.net/3ey8tyz3
太好了，我可以用它来获取数据ID吗？

【解决方案2】：

我想当您第一次加载模式时，它会被缓存并且每次都返回相同的内容。

您可能需要先清除模态框，然后根据您的 id 重新加载。

你可以做-

$('#myModal').on('loaded.bs.modal',function(e){
}).on('hidden.bs.modal',function(e){
   $(this).removeData('bs.modal');
});

将其包装成一个函数并在document.ready上调用它

【讨论】：