Question

我有一个用Bootstrap制作的表，其中每一行都应该通过点击它来打开一个模态并显示细节。

我已经在Ajax中编写了一个脚本来将JavaScript变量发送到PHP并且它有效，除了一件事：我第一次单击该行后，通过POST传递给模态的id不会改变。

我真的希望有人可以帮忙解决这个问题。我已经挣扎了4天没有任何结果。

JS / page.js

function dettagli_messaggio(id){
  var data = {"id" : id};
  jQuery.ajax({
    url : 'http://localhost/Prg_stage/index.php/pag_admin/prova',
    method : "post",
    data : data,
    success : function(data){
      $('body').append(data);
      $('#leggimex').modal('toggle');
    },
    error : function(){
      alert("Qualcosa è andato storto");
    }
  });
}

/views/prova.html（模态页面）

<?php
  if(isset($_POST['id']))
  {
    $id=$_POST['id'];
    $id=(int)$id;
    $mex=$this->funzioni_admin->apri_messaggio($id);
}

?>
 <div id="leggimex" class="modal fade" role="dialog" aria-labelledby="leggimex" aria-hidden="true">
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
       <h3>Messaggio da: <?php echo $mex[0]->OggettoMessaggio; ?> <?php echo $id; ?> </h3>
     </div>
     <div id="orderDetails" class="modal-body">
       <form class="form-horizontal" role="form" method="post" action="index.php">
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">Oggetto</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="name" name="name"value="">
        </div>
    </div>
    <div class="form-group">
        <label for="message" class="col-sm-2 control-label">Messaggio</label>
        <div class="col-sm-10">
            <textarea class="form-control" rows="4" name="message"></textarea>
        </div>
    </div>
    <div class="form-group">
        <!--<div class="col-sm-10 col-sm-offset-2">
            <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
        </div>-->
    </div>
    <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
        </div>
    </div>
 </form>
     </div>
     <div id="orderItems" class="modal-body"></div>
     <div class="modal-footer">
       <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
     </div>
   </div>
 </div>
 </div>

/views/adminpage.php

<tr data-toggle="modal" data-id="<?php echo $cont_mex[$n]->Id;?>" data-target="#leggimex" onclick="dettagli_messaggio(<?php echo $cont_mex[$n]->Id;?>);" style="cursor:pointer;">

Answer 1

由于你正确地获得了第一行，我相信你在我在表行中使用bootstrap模型时遇到了同样的问题。这是我如何解决我的问题，真的希望它也能解决你的问题。

您需要为引导程序模型的data-target属性中的每一行分配唯一的ID。

<tr data-toggle="modal" data-id="<?php echo $cont_mex[$n]->Id;?>" data-target="#<?php echo $cont_mex[$n]->Id;?>" onclick="dettagli_messaggio(<?php echo $cont_mex[$n]->Id;?>);" style="cursor:pointer;">

现在给你的模型提供相同的id

 <div id="<?php echo $cont_mex[$n]->Id;?>" class="modal fade" role="dialog" aria-labelledby="leggimex" aria-hidden="true">

因此，您需要做的唯一更改是为每个模型分配唯一ID，并在每行中分配相同的匹配ID，以便每行触发正确的模型。如果此方法不适合您，请在下面进行评论。

Answer 2

问题是，你的模态内容是迭代的而不是被覆盖的。我的意思是，每次单击按钮时，都会附加新的模态内容
- ＆gt; btn click1 - ＆gt; <div id="leggimex">
- ＆gt; btn click2 - ＆gt; <div id="leggimex"> <div id="leggimex">
- ＆gt; btn click3 - ＆gt; <div id="leggimex"> <div id="leggimex"> <div id="leggimex"> ....等等

在您的情况下，在<div id="modal_response"></div>标记内创建一个类似<body>的div并进行更改 $('body').append(data); 至 $('#modal_response').html(data);
示例：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="modal_response"></div>
</body>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript">
$.ajax({
    url : 'index1.php',
    success:function(res){
        $('#modal_response').html(res);
        $('#myModal').modal('toggle');
    }
});
</script>

</html>

我的index1.php

<?php 

$test = '<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>';


echo $test;
?>

脚本ajax无法正常工作CODEIGNITER

2 个答案: