javascript - 删除记录确认消息

Question

我想知道是否有人可以帮助我。

首先，我很抱歉，因为我对此真的很陌生，所以请原谅我一些看似非常基本的问题/错误。

以下代码的摘录成功创建了与当前用户相关的记录表。

可行的解决方案 - Baylor Rae 在过去的 3-4 天里不知疲倦地与我一起寻找解决方案。 All Baylor Rae' 无法提供完全成功的剧本，他们无疑在插入这一进程方面提供了很大帮助。然而，下面的完整工作脚本是 由 jazzman1 @ PHP Freaks 提供

主脚本

 <script type="text/javascript">
        $(document).ready(function(){
            $('form.delete').submit(function(e){
              console.log('submit'); return false;   
            })
        })
    </script>   

<script type="text/javascript">
    $(document).ready(function(){
        $('form.delete').submit(function(e){ 

            e.preventDefault();
            var elem = $(this).closest('.delete');
            var lid = $(this).serialize();
            $.confirm({
                 'title'    : 'Delete Confirmation',
            'message'   : 'You are about to delete this Location. <br />It cannot be restored at a later time! Do you wish to continue?',
                'buttons'   : {
                    'Yes'   : {
                'class' : 'blue',
                'action': function(){
                //elem.slideUp();
                              $.ajax({ 
                            url: 'deletelocation.php', 
                            type: 'POST', 
                            data: lid, 
                            success: function(response) { 
                            console.log('success', response); 
                            }, 
                            error: function() { 
                            console.log('error') 
                            } 
                            }); 
                    }
                },
                'No'    : {
                    'class' : 'gray',
                                        'action': function(){}  // Nothing to do in this case. You can as well omit the action property.

                }
            }
        });

    });

    })
</script>  

jqueryconfim.js

  (function($){

        $.confirm = function(params){

            if($('#confirmOverlay').length){
                // A confirm is already shown on the page:
                return false;
            }

            var buttonHTML = '';
            $.each(params.buttons,function(name,obj){

                // Generating the markup for the buttons:

                buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>';

                if(!obj.action){
                    obj.action = function(){};
                }
            });

            var markup = [
                '<div id="confirmOverlay">',
                '<div id="confirmBox">',
                '<h1>',params.title,'</h1>',
                '<p>',params.message,'</p>',
                '<div id="confirmButtons">',
                buttonHTML,
                '</div></div></div>'
            ].join('');

            $(markup).hide().appendTo('body').fadeIn();

            var buttons = $('#confirmBox .button'),
                i = 0;

            $.each(params.buttons,function(name,obj){
                buttons.eq(i++).click(function(){

                    // Calling the action attribute when a
                    // click occurs, and hiding the confirm.

                    obj.action();
                    $.confirm.hide();
                    return false;
                });
            });
        }

        $.confirm.hide = function(){
            $('#confirmOverlay').fadeOut(function(){
                $(this).remove();
            });
        }

    })(jQuery);

在主脚本中形成

<form name="delete" id="delete" class="delete">
<input type="hidden" name="lid" id="lid" value="<?php echo $theID ?>" />
<input type="submit" value="Delete Record"/>
</form>

deletelocation.php

<?php

    $lid = intval($_POST['lid']);
    $query = mysql_query("DELETE FROM table WHERE locationid='".$lid."'");

    ?>

您会看到表格的末尾有四个按钮，它们通过 locationsaction.php 脚本将用户导航到四个不同的屏幕，所有屏幕都通过 盖子值。该脚本如下所示。

我现在正在尝试为 Delete 函数实现一条确认消息。可以找到源代码 here .

这是我有点不确定下一步该做什么的地方。我尝试将按钮 on click 事件与 Delete 函数的名称相关联，但没有显示确认消息，而是将用户带到空白屏幕，然后记录被删除。

我已经运行了 JavaScript 控制台并且没有产生任何错误，所以我有点不确定如何继续。

我只是想知道是否有人可以看看这个请让我知道我要去哪里错了。

非常感谢和亲切的问候

Answer 1

防止重定向

看起来您正在获得重定向，因为表单仍在提交。您需要通过在点击事件的开头添加以下行来阻止提交表单。

$('#btn-delete').click(function(e) {
    e.preventDefault();
    var elem = $(this).closest('.item');
    

调用 e.preventDefault() 将 prevent the browser's default action from occuring ，在本例中是提交表单。

改变按钮的处理方式

据我所知，locationsaction.php 根据按钮的值重定向到一个页面。

更好的方法是创建一个指向每个页面的链接，并将 lid 作为参数传递。这是链接页面同时为下一页提供一些上下文的标准方式。

注意:您需要更改每个页面以使用 $_GET['lid'] 而不是 $_SESSION['lid'].

注意 2: 在页面中间“关闭”和“打开”PHP 标记是完全有效的。在下面提供的代码中，我关闭了 PHP，以便可以编写 HTML，并在完成后重新打开了 PHP。

<?php // this line is for syntax highlighting
/* display row for each user */
$theID = $row['locationid'];
?>
  <tr>
    <td style="text-align: center"><?php echo $row['locationname'] ?></td>
    <td><a href="addimages.php?lid=<?php echo $theID ?>">Images</a></td>
    <td><a href="addfinds.php?lid=<?php echo $theID ?>">Add Finds</a></td>
    <td><a href="locationfinds.php?lid<?php echo $theID ?>">View Finds</a></td>
    <td>
      <form method="post" action="deletelocation.php" class="delete-record">
        <input type="hidden" name="lid" value="<?php echo $theID ?>" />
        <input type="submit" value="Delete Record" />
      </form>
    </td>
  </tr>
<?php

我唯一一次没有使用链接是当我链接到 deletelocation.php 文件时。这是因为 you should never use a GET request when modifying a database .

使用 POST 请求是防止 Cross-site Request Forgery 的简单方法.

重命名您的表列名称

我注意到您的 locationid 和 locationname 列名称没有任何类型的分隔。我建议将它们重命名为 location_id 和 location_name。

这也适用于您的文件名。您可以包含下划线或破折号来分隔文件名中的单词。我通常使用下划线，因为我认为它读起来更好，但这是你的选择。

直接POST到删除页面

因为您使用的是 AJAX，所以您可以直接指定 deletelocation.php url。根据我上面建议的更改，没有理由保留 locationsaction.php。

$.ajax({
    url: 'deletelocation.php',
    type: 'post',
    data: $(this).parent().serialize(),
    success: function () {
        img.parent().fadeOut('slow');
    }
});

我还更改了数据的传递方式。 .serialize()将自动从 input[name=lid] 获取位置 ID 并创建一个查询字符串，如 lid=1。

---

编辑#1

If possible, I'd like to keep the locationsaction script. A lot of my pages further down the line rely on a SESSION id, and using a Get isn't an option without re-writing a lot of code.

您使用 locationsaction.php 和 session 的方式与我不同。但这是您的应用程序结构，您可以随心所欲地构建它。

Could I change the button type to button rather than submit, keeping the id the same so the JS code will pick this up?

您可以将类型更改为按钮，但是当禁用 javascript 时，它不会提交表单。通常，您编写的页面无需 JS 即可工作，然后编写 JS 来修改浏览器的默认行为。

Could you also confirm for me whether your AJAX just replaces the top section of my code?

不，我只是改变了你设置lid的方式。您仍然需要包括所有围绕它的 JS，我只是不想粘贴整个代码块。