如何在提交表单和位置重定向后打开特定模式

Posted

技术标签:

【中文标题】如何在提交表单和位置重定向后打开特定模式【英文标题】:How to open a specific modal after form submitted and location redirect 【发布时间】:2019-07-15 08:33:18 【问题描述】:

我在模态框内有一个表单,提交后我不希望它关闭。他们设置我的 SQL UPDATE 语句的方式是,如果数据库更新,它将重定向到同一页面,所以当试图保持模式打开时,这会搞砸很多东西。

if (isset($_POST['insert6']))

    $kval_antall = $_POST['kval_antall'];
    $id = $_POST['id'];

    $sql6 = ("UPDATE test3 SET kval_antall='$kval_antall' WHERE id='$id'");


    if (mysqli_query($conn, $sql6)) 
    header("Location: aktivbonus.php");
    exit;
 else 
    echo "Error: " . $sql6 . "<br>" . mysqli_error($conn);

因为如果我之前放了一些代码并保持模式打开,如果数据在数据库中成功更新,它将返回到同一页面并关闭模式。重定向后,我找不到打开模式的方法。

这是我尝试过的一些东西:(主教的回答) How to redirect back to index page and display modal pop up as per redirecting? PHP

在表单提交并重定向回来后,代码可以正常工作并完美显示消息,但是当我插入时没有任何反应:

<?php if (isset($_GET['thanks']) && 1 == $_GET['thanks'])  ?>
<script type='text/javascript'>
   $("#message539").modal("show");
</script>
<?php  ?>

我让我的网站正常工作的方式是在页面上显示一个带有data-target="#message539" 的按钮

与其尝试调用的模态相同(此处的 id 更改相同):

<div class="modal fade bd-example-modal-lg" id="message'. $row['id'] .'" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

在这个改变它的模态#message539,我正在尝试调用。如果有人有这样做的好方法,非常感谢帮助,因为我现在在尝试许多不同的事情时有点迷失了。

我尽我所能解释我想要什么,这可能很难理解,所以如果有什么不清楚的地方,请询问。谢谢。

模态

<?php
    while ($row = mysqli_fetch_assoc($result)) 
        $test55 = '<div class="card card-date"><div class="card-body card-body-date text-secondary"><h5>' . strftime('%e.%B',strtotime($row['date'])) . ' <div class="card-header-date"><i class="material-icons">arrow_downward</i></div></h5></div></div>';
        echo $test55 !== $prevDate ? $test55.'' : '';
        $prevDate = $test55;
        echo '
        <div class="card border-info card-margin">
            <h5 class="card-header text-secondary">
                '. $row['bookmaker']. ': '. $row['bettype']. ' '. $row['betvalue']. 'kr <div class="card-header-date">Dato lagt til: Kl.'. strftime('%H:%M, %e.%b',strtotime($row['date2'])) . '</div>
            </h5>
            <div class="card-body text-secondary">
                <h5 class="card-title">Status:</h5>
                <p class="card-text">' . $row ['status'] . '</p>
                </div>
            <div class="card-footer bg-transparent"><div class="text-right"><button type="button" class="btn btn-outline-info" data-toggle="modal" data-target="#message'.$row['id'].'">Endre</button></div></div>   <-- BUTTON THAT OPENS THE MODAL
            </div>
        </div>
        <div class="modal fade bd-example-modal-lg" id="message'. $row['id'] .'" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <--- MODAL
          <div class="modal-dialog modal-lg" role="document">
              <div class="modal-content">
                <div class="modal-header card-header">
                  <h5 class="modal-title text-secondary" id="exampleModalLabel">'.$row['bookmaker'].': '.$row['bettype'].' '.$row['betvalue'].'kr</h5><div class="text-secondary" style="font-size: 1.25rem;font-weight: 500;">Dato lagt til: '.strftime('%H:%M, %e.%b',strtotime($row['date2'])).'</div>
                </div>
                <div class="modal-body">

【问题讨论】:

请贴出您的模态代码以及打开方式。当您重定向到页面时,您需要重新打开模式。您可以使用标志调用页面,以重新打开模式。例如。您可以使用 header("Location: aktivbonus.php?reopenmodal=true"); 重定向到页面如果设置了此标志,则附加(javascript)代码以重新打开模式。 @MarvinKlar 将发布代码。我已经尝试过了,但它不起作用,我认为这是因为在按下按钮打开它之前它无法找到模态的 id。 (因为它在按下按钮时获取 id 并创建模态 id) 【参考方案1】:

进入重定向页面时是否需要打开modal,可以使用localStorage来跟踪:

调用更新函数时:

localStorage.setItem('openModal', '#message539'); // Use message'. $row['id'] to dinamically save it

加载页面时:

 var modalId = localStorage.getItem('openModal');
 if (modalId != null)
  $(modalId).modal("show");
  localStorage.removeItem('openModal');
 

【讨论】:

这可能行得通。我可以在我的 SQL UPDATE 语句中的脚本标记中回显 localstorage 吗? 你可以在提交表单到你的服务器之前执行一个JS函数。在那里,您将项目保存在 localStorage 中。 Check here 尝试从按钮中删除 data-toggle="modal"。 This question 可能会帮助您以编程方式打开模式 您可以做的是在具有不同ID的不同按钮的onclick函数中,将ID作为字符串传递给JS函数(添加一个新参数),该参数就是您保存的内容像这样的本地存储localStorage.setItem('openModal', modalId). 最后,让它工作以传递 id。谢谢大家的帮助。【参考方案2】:

使用 javascript 或 jQuery 来执行此操作: 在重定向时发送一个成功标志,并在重定向页面上检查该标志是否为真,而不是使用 jQuery 显示模式,

例如:(查看页面)

$flag = $flag?1:0;
<button id="btn-modal-open" style="display:none">clcik</button>

在jQuery函数中

$( document ).ready(function() 
var flag = "<?= $flag?>";
if(flag)
$('#btn-modal-open')[0].click(); //create one
//button and give id as btn-modal-open so that on 
//click of button modal should popup
  
);

需要更多解释而不是告诉我

【讨论】:

以上是关于如何在提交表单和位置重定向后打开特定模式的主要内容,如果未能解决你的问题,请参考以下文章

如何避免表单重复提交

Ajax表单提交后如何将用户重定向到另一个页面

Ajax 表单提交后如何将用户重定向到另一个页面?

提交表单后Node JS重定向

javascript 表单提交后,在新选项卡重定向URL中打开

javascript 表单提交后,在新选项卡重定向URL中打开