循环中的Bootstrap模型未加载

时间:2017-10-16 14:22:07

标签: javascript php twitter-bootstrap

我的网页上有一堆模态作为弹出窗口。像魅力一样工作。

现在我想要一个模态来加载循环中的项目。但现在开始发布这个弹出窗口了。

我使用这个按钮来启动模态:

while($row_cnt = mysqli_fetch_array($res_cnt))
{   $i++;
        echo '<tr>
                    <td><a href="mailto:'.$row_cnt['email'].'"><span class="fa fa-envelope" aria-hidden="true" data-toggle="tooltip" title="Verstuur email"></a> '.$row_cnt['naam'].'</td>
                    <td>'.$row_cnt['tel'].'</td>
                    <td>'.$row_cnt['mob'].'</td>
                    <td><a href="#"><span class="glyphicon glyphicon-pencil pull-right" data-toggle="modal" data-target=".modal_cnt_edit'.$i.'" aria-hidden="true" data-toggle="tooltip" title="Bewerk"></span></a></td>
                </tr>';

    require('includes/modals/relatie_detail_cnt_edit.php');
 }

使用此Javascript:

<script type="text/javascript">
// cnt_edit
$(document).ready(function () {
    $(".edit_cnc").on('click', function() {
        formid=($(this).attr("alt"));
        subform_del(formid);
    });
});
function subform_del(formid)
{
        var postData = $("#cnt_edit"+formid).serializeArray();
       // var formURL = $("#cnt_edit"+formid).attr("action");
       var formURL='includes/werkplek_cnt_edit.php';
        $.ajax({
            url: formURL,
            type: "POST",
            data: postData,
            success: function(data, textStatus, jqXHR) {
                $('#modal_cnt_edit'+formid+' .modal-body').html(data);
                $("#submit_cnt_edit"+formid).remove();
            },
            error: function(jqXHR, status, error) {
                console.log(status + ": " + error);
            }
        });
        e.preventDefault();
}
</script>

文件relatie_detail_cnt_edit.php包含模式:

<?php
echo'
    <div class="modal edit_cnt modal_edit_cnt'.$i.'" id="modal_edit_cnt'.$i.'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="window.location.reload()">&times;</button>
              <h4 class="modal-title" id="myModalLabel">Bewerk contactpersoon.</h4>
            </button>
          </div>

          <form class="form-horizontal form-calculator" id="edit_cnt'.$i.'" action="includes/werkplek_edit.php" method="post">
          <div class="modal-body">

            <input type="hidden" class="form-control" id="id" name="id" value="'.$row['id'].'">

            <div class="form-group-options">

             <div class="panel-body">

             </div>

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

          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="window.location.reload()">Sluiten</button>
            <button type="button" id="submit_edit_cnt'.$i.'" alt="'.$i.'" class="btn btn-primary edit_cnc">Voeg toe</button>
          </div>
        </div>
      </div>
    </div>';
?>

模态未启动,没有显示错误,有任何建议吗?

1 个答案:

答案 0 :(得分:0)

也许这是错的:

在按钮代码中:

Contents.configure(scrollregion=Canvas.bbox("all"))

在您的模态代码中:

data-target=".modal_cnt_edit'.$i.'"

这不匹配,所以它不会打开模态,因为它无法找到id。