Question

我目前正致力于一个新闻通讯项目并坚持这种情况。

在“列表”页面中，我显示了带有bootstrap数据表的所有邮件列表，每条记录都有一个“动作”图标（查看，编辑，删除）。当用户点击“视图”图标时，我想使用bootstrap模式弹出窗口，其中包含另一个数据表，以显示其记录的“电子邮件列表”。为了检索模态中的数据，我使用Ajax函数连接数据库，并在每个元素中使用“data-row”属性来获取行的id。

这是我的“列表”页面代码

<table id="datatable" class="table table-striped table-bordered">
<thead>
  <tr>
    <th style="width:5%;">No</th>
    <th>Nama Milis</th>
    <th style="width:20%;">Jumlah email</th>
    <th>Action</th>

  </tr>
</thead>


<tbody>

<?php 
$i=1;
foreach ($milis as $milis){
?>


  <tr>
    <td><?php echo $i;?></td>
    <td><?php echo $milis['nama'];?></td>
    <td><?php echo $this->m_mailinglist->get_mail_milis($milis['id'])->num_rows();?></td>
    <td>
    <button type="button" id="view-button" class="btn btn-success" data-row="<?php echo $milis['id'];?>" data-toggle="modal" data-target=".email-modal"><i class="fa fa-eye" ></i></button>
    <button type="button" class="btn btn-warning"><i class="fa fa-pencil"></i></button>
    <button type="button" class="btn btn-danger"><i class="fa fa-trash"></i></button>
    </td>

  </tr>
<?php
$i++;
}
?> 


</tbody>

正如您所看到的，有一个名为数据行的属性包含记录的ID，但我只在记录中使用相同名称“view-button”，这是问题吗？

<button type="button" id="view-button" class="btn btn-success" data-row="<?php echo $milis['id'];?>" data-toggle="modal" data-target=".email-modal"><i class="fa fa-eye" ></i></button>

这是我的ajax代码

$(document).ready(function(){
  $("#view-button").click(function(e){

      var id = e.target.getAttribute("data-row");
      alert(id);
      $('.loading').show();
      $.ajax({
        type:'POST',
        cache:false,
        url:'<?php echo base_url();?>Mailinglist/ajax_listemail',
        data:{id:id},
        success:function(data){
          $('.loading').hide();
          $('.modal-content').html(data);

        },
        async:false
      });


  });

});

我使用 get_Attribute 来检索我点击的每个元素的数据行属性

问题是点击功能只能在记录的第一个按钮中工作，其余记录不会显示“id”警报并且无法检索数据。还有这种或任何最简单的方法来解决这个问题吗？谢谢你:)）

Answer 1

$(document).on("click", '.requestmail', function(event) {


var valu   = $(this).attr('attrd');
  alert(valu);
var $modal = $('#myModal');


 $.ajax({
                                    
                                    method: "POST",
                                   
			url: '<?php echo base_url();?>Mailinglist/ajax_listemail',
			cache: false,
			data: {id:valu},
                              success: function(msg)
                              {
                              if(msg!='')
                              {
                              $modal.modal('show');
                             $(".modal-data2").html(msg);
                              
                               }
                        
                              }
                            

 });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button type="button" id="view-button" class="btn btn-success requestmail" attrd="1" ><i class="fa fa-eye" ></i></button>

<button type="button" id="view-button" class="btn btn-success requestmail" attrd="2" ><i class="fa fa-eye" ></i></button>

<div class="modal fade bs-example-modal-sm request-form" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
               <div class="modal-content modal-data2">
               </div>
            </div>
         </div>

使用不同元素和相同id的ajax引导模式弹出窗口

1 个答案: