将php变量传递给模态twitter bootstrap不起作用

时间:2014-05-05 08:03:14

标签: php jquery twitter-bootstrap

您好我将php变量传递给twitter boostrap模式。但是当我点击模态内的链接时,我无法获得正确的ID。请看下面的代码。 首先我创建了一个foreach函数,其中数据循环第二我创建了一个链接来显示模态第3个我有动作链接在模态中用户可以更新,删除数据。我已经实现的是,我可以将php的变量传递给模态操作,但是当我尝试其他行时,它仍然显示相同的ID。

  <table class="table table-condensed table-bordered table-striped volumes">
    <thead>
      <tr>
        <th>ID</th>
        <th>Director</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>


<?php

        foreach ($natcco_members as $nattco) {

        $id = $nattco['id'];
        echo "<tr>
              <td>".++$counter."</td>
              <td>".$nattco['director']."</td>
              <td><a href='#' class='b'>".$nattco['agent_name']."</a></td>
              <td>".$nattco['address']."</td>
             </td>";

?>

<!-- Modal HTML -->
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Choose your actions!</h4>
            </div>
            <div class="modal-body" align="center">
                                <a href='update_sub_agent.php?id=<?php echo urlencode(htmlspecialchars($id)) ?>' class='btn btn-success'><i class='icon-pencil'></i> Edit</a> 
                                <a href='owner.php?id=".urlencode(htmlspecialchars($id))."' class='btn btn-info'><i class='icon-user'></i> Owner</a> 
                                <a href='fla.php?id=".urlencode(htmlspecialchars($id))."' class='btn btn-warning'><i class='icon-list-alt'></i> FLA</a>  
                                <a href='delete.php?id=".urlencode(htmlspecialchars($id))."' class='btn btn-danger'><i class='icon-remove'></i> Delete</a> 
           </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>

          <?php "</tr>";

    }
}
?>

</tbody>
</table> 

1 个答案:

答案 0 :(得分:3)

我对你的代码进行了一些编辑,让我们先从你做的事情开始:

  1. <td>".$nattco['address']."</td> </td>";

    必须是</tr>而不是</td>

  2. 您只需要一个模态框。我们将通过jQuery传递id。因此,在表格的末尾只创建一个静态模态框。

  3. 现在你需要做的事情:

    1)将此$id = $nattco['id'];用作<tr id>,这样就可以了:

     $id = $nattco['id'];
     echo "<tr id='".urlencode(htmlspecialchars($id))."'> #...rest of your code
    

    2)在模态框中为您的按钮提供课程:

    <a href='update_sub_agent.php' class='btn btn-success edit'><i class='icon-pencil'></i> Edit</a>
                                                     <!-- ^edit class added -->
    <a href='owner.php' class='btn btn-info owner'><i class='icon-user'></i> Owner</a>
                                       <!-- ^owner class added -->
    <a href='fla.php' class='btn btn-warning fla'><i class='icon-list-alt'></i> FLA</a> 
                                        <!-- ^fla class added -->
    <a href='delete.php' class='btn btn-danger delete'><i class='icon-remove'></i> Delete</a>
                                          <!-- ^delete class added -->
    

    3)添加hrefclass to your`标签:

    `<td><a href='#myModal' class='b modal-box'>".$nattco['agent_name']."</a></td>`
    

    最后,jQuery位:

    $('a.modal-box').click(function(e){
       id=$(this).closest('tr').attr('id');
       $('.modal-body .edit').attr('href','update_sub_agent.php?id='+id+'');
       $('.modal-body .owner').attr('href','owner.php.php?id='+id+'');
       $('.modal-body .fla').attr('href','fla.php?id='+id+'');
       $('.modal-body .delete').attr('href','delete.php?id='+id+'');
    });
    

    这就是全部。这样可以最大限度地减少代码,以便在动态传递单击行的id时不会重复模态框。

    您可以在这里查看演示:

    DEMO