使用 Bootstrap 的确认弹窗( Confirmation Box)的时候,用 JavaScript 去处理确认和取消按钮。如果这个需要设置弹窗的这个按钮在一个 While Loop 里面的话怎么办呢?

2015-03-30 05:03:49 +08:00
 SharkIng

根据这个Post做的
http://stackoverflow.com/a/8983053/4196468

演示文档: http://plnkr.co/edit/NePR0BQf3VmKtuMmhVR7?p=preview

在演示里面完全没有问题,但是我实际使用的时候却根本没办法处理URL

讲一下我的情况,一个系统从数据库读取数据后通过While Loop 放到一个表格中,每行一个数据,每个数据有不同的信息,然后每个数据(每行)有一个可以删除的按钮来删除数据

每个删除是提交到另外一个PHP页面中解决的,PHP 页面通过GET(或者POST)来确认数据的ID然后删除这个数据

现在为了避免用户无意删除东西,需要加一个确认的步骤,按照上面那个StackOverflow处理了之后却发现根本没办法用,没有办法去Pass PHP页面地址

下面贴上Code大家帮忙看看哪里出问题了

<script type="text/javascript">
$('#cyclist-show button').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));

$('.debug-url').html('Delete URL: <strong>' + $(this).find('#cyclist-show button').attr('href') + '</strong>');
});

</script>

$result = search_id($dbc, $id);

    if ($result != false && $result -> num_rows != 0) {
        echo "<div class = 'table-responsive'>";
        echo "<table class='table-responsive' id='cyclist-show' align='center'>";
            echo "<tr>

.... 省略

</tr>";
        while($row = mysqli_fetch_assoc($result)){

... 省略

echo "<td id='cyclist-button-td'>";
                                echo "<div class='hidden-xs'>";
                                ?>
                                <button class="btn btn-default" data-href="./delete-bicycle.php?id="<?php echo $row['ID'] ?>" data-toggle="modal" data-target="#confirm-delete">
                                Delete
                                </button>
                                <?php
                                echo "</div>";
                                echo "</td>";

....... // 省略
}
echo "</table>";
echo "</div>";
} else {
echo "</br>You do not have any bicycle that registered with system";
}
?>
</div>
</section>

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Delete Confirmation</h4>
            </div>

            <div class="modal-body">
                <p>You are about to delete this, this procedure is irreversible.</p>
                <p>Do you want to proceed?</p>
                <p class="debug-url"></p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a class="btn btn-danger btn-ok">Delete</a>
            </div>
        </div>
    </div>
</div>
9164 次点击
所在节点    JavaScript
8 条回复
orzfly
2015-03-30 05:34:54 +08:00
其实这就是把异步变成同步啦,也就是 C# 中 async/await 解决的问题:用顺序的代码写异步的操作……
然后,我也挺想知道这些 alert/confirm/prompt replacement 是怎么解决这个问题的……
关注一下 ><
SharkIng
2015-03-30 05:42:01 +08:00
@orzfly 说的有点高深没太懂,所以按照我的这个问题怎么解决呢?
emric
2015-03-30 05:47:10 +08:00
你看看页面出了什么错误? 代码应该没问题的.
就是触发了事件, 就把确认的按钮的 href 替换成 data-href.
emric
2015-03-30 05:54:12 +08:00
别改别人的代码就可以了... 把 `#cyclist-show button` 改回成 `#confirm-delete`.
`$(this).find('.btn-ok')` 出现问题了.
SharkIng
2015-03-30 07:36:49 +08:00
@emric
首先非常感谢您~

刚开始的时候用的就是#confirm-delete但是不好用所以才改成 #cyclist-show button的

页面上没有提示任何错误所以有点不知所措了~
elvis_w
2015-03-30 09:12:27 +08:00
@SharkIng 我也依照这个Post在我写的一个Flask应用里测试,但是也不行,而且找不到原因,最后我用了bootbox.js
http://bootboxjs.com/
oott123
2015-03-30 11:19:36 +08:00
@orzfly 无非就是回调或者根本不解决…
unknownservice
2015-03-30 18:42:36 +08:00
没有效果也没有错误,基本上只可能是事件没绑上,检查一下执行顺序吧。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/180221

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX