V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
SharkIng
V2EX  ›  JavaScript

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

  •  
  •   SharkIng · 2015-03-30 05:03:49 +08:00 · 9277 次点击
    这是一个创建于 3527 天前的主题,其中的信息可能已经有所发展或是发生改变。

    根据这个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>
    
    第 1 条附言  ·  2015-03-30 05:42:58 +08:00
    说明下,确认的对话框可以弹出,但是点OK/确认 后没有反应,应该是URL没有被输入到JavaScript中
    8 条回复    2015-03-30 18:42:36 +08:00
    orzfly
        1
    orzfly  
       2015-03-30 05:34:54 +08:00
    其实这就是把异步变成同步啦,也就是 C# 中 async/await 解决的问题:用顺序的代码写异步的操作……
    然后,我也挺想知道这些 alert/confirm/prompt replacement 是怎么解决这个问题的……
    关注一下 ><
    SharkIng
        2
    SharkIng  
    OP
       2015-03-30 05:42:01 +08:00
    @orzfly 说的有点高深没太懂,所以按照我的这个问题怎么解决呢?
    emric
        3
    emric  
       2015-03-30 05:47:10 +08:00
    你看看页面出了什么错误? 代码应该没问题的.
    就是触发了事件, 就把确认的按钮的 href 替换成 data-href.
    emric
        4
    emric  
       2015-03-30 05:54:12 +08:00   ❤️ 1
    别改别人的代码就可以了... 把 `#cyclist-show button` 改回成 `#confirm-delete`.
    `$(this).find('.btn-ok')` 出现问题了.
    SharkIng
        5
    SharkIng  
    OP
       2015-03-30 07:36:49 +08:00
    @emric
    首先非常感谢您~

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

    页面上没有提示任何错误所以有点不知所措了~
    elvis_w
        6
    elvis_w  
       2015-03-30 09:12:27 +08:00   ❤️ 1
    @SharkIng 我也依照这个Post在我写的一个Flask应用里测试,但是也不行,而且找不到原因,最后我用了bootbox.js
    http://bootboxjs.com/
    oott123
        7
    oott123  
       2015-03-30 11:19:36 +08:00 via Android
    @orzfly 无非就是回调或者根本不解决…
    unknownservice
        8
    unknownservice  
       2015-03-30 18:42:36 +08:00   ❤️ 1
    没有效果也没有错误,基本上只可能是事件没绑上,检查一下执行顺序吧。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2620 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 04:35 · PVG 12:35 · LAX 20:35 · JFK 23:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.