【问题标题】:Bootbox modal is not showing up if I click on a link that contains an "href"如果我单击包含“href”的链接,则不会显示 Bootbox 模式
【发布时间】:2016-08-13 10:37:53
【问题描述】:

好的,所以我正在使用运行良好的引导箱,但是当我想在与 PHP 的链接中发送变量时,所有 javascript 都可以工作,但引导箱不行。

----这行得通----

<a href='#' class="alert_without_href">I dont have an href</a>
<script>
$(document).ready(function()
 {
    $('a.alert_without_href').on('click', function()
    {
        alert('This works');
        bootbox.alert("This ALSO works");
    });
});
</script>

----这不起作用----

<a href="?name=Jacob" class="alert_with_href">I have an href</a><br><br>
<script>
   $(document).ready(function()
   {
      $('a.alert_with_href').on('click', function()
      {
        alert('This works');
        bootbox.alert("This one DOESNT work"); <---- PROBLEM IS HERE
        alert('This also works');
      });
   });
</script>

----然后终于显示----

<?php
    if ($_SERVER['REQUEST_METHOD'] === 'GET')
    {
        echo 'Hello ' . $_GET["name"];
    }  
?>

我确实需要在链接中传递一个变量,它不能被取出。我该如何解决这个问题?

提前致谢

----编辑---- 我在下面添加了一张表格的图片,其中说明了具体要做的事情

Table of users

--仅在您看到图像时阅读-- 因此,表中“操作”下的每个链接都会创建一个包含用户唯一 ID 变量的链接。单击它时,我检查是否设置了 $_GET['remove_id'],然后运行 ​​MySQL 查询以删除具有该 ID 的那个人。

所以基本上Bootbox的想法是如果你想删除用户是一个确认消息,我不想使用普通的alert(''),因为它可以被禁用。

附言删除功能确实有效,我现在只想使用 bootbox 添加确认。

【问题讨论】:

  • 将链接从href中取出,然后在模态点击后进行位置更改。 (modal应该有回调方法)
  • 感谢您的回复。我认为这行不通,请查看我的最新编辑。
  • 你“只是”必须移动删除链接 模态 - 就像它的回调一样。因此,在显示时将 id 传递给模态框。
  • 有什么方法可以告诉我吗?很抱歉给您带来不便

标签: javascript php twitter-bootstrap bootbox


【解决方案1】:

Bootstrap(以及 Bootbox)模态不会生成阻塞事件,因此如果您希望在单击超链接时发生某些事情,则需要阻止默认行为(页面导航)。比如:

<a href="?name=Jacob" class="alert_with_href">I have an href</a><br><br>
<script>
   $(document).ready(function() {
      $('a.alert_with_href').on('click', function(e) // <-- add an event variable
      {
        e.preventDefault(); // <-- prevent the event
        bootbox.alert("I am an alert!");
      });
   });
</script>

既然您说要确认某事,请使用 bootbox.confirm 和一些 AJAX:

<a href="?name=Jacob" class="alert_with_href" data-name="Jacob">I have an href</a><br><br>
<script>
    $(document).ready(function() {
        $('a.alert_with_href').on('click', function(e) // <-- add an event variable
        {
            e.preventDefault(); // <-- prevent the event

            var data = { name = $(this).data('name') };
            bootbox.confirm("Really delete?", function(result){
                if(result){
                    $.post('your-url', data)
                        .done(function(response, status, jqxhr){
                            // do something when successful response
                        })
                        .fail(function(jqxhr, status, error){
                            // do something when failure response
                        });
                }// end if
            }); // end confirm
        });
    });
</script>

我还添加了一个数据属性,以便更轻松地获取发布的值(不要使用 GET 请求来执行删除操作)。我假设您会在成功删除时重新加载页面,或者您可以使用 .remove 删除包含您要删除的项目的“行”

【讨论】:

  • 非常感谢! “preventDefault”起作用了。也感谢删除提示,我一定会试一试的。
猜你喜欢
  • 1970-01-01
  • 2010-11-27
  • 2015-06-25
  • 2022-01-22
  • 2020-07-17
  • 2021-07-09
  • 1970-01-01
  • 1970-01-01
  • 2017-01-09
相关资源
最近更新 更多