Question

我有多个信息框，其中包含来自数据库的简短信息。在每个框的底部是＆＃34;更多信息＆＃34;点击时触发一个模态。

问题：此时＆＃34;更多信息＆＃34;单击它会显示相同的信息，无论单击哪个信息框。

目标：点击更多信息后，我需要显示相应的信息。当＆＃34;更多信息＆＃34;时，需要如何显示引用行号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

真的很感激任何帮助。

Answer 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/

Answer 2

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

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

你可以 -

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

将其包装成一个函数并在document.ready

上调用它

使用php和jQuery的动态Bootstrap模式

2 个答案: