删除记录确认消息

阻止重定向

由于表单仍在提交，您似乎正在获得重定向。您需要通过在单击事件的开头添加以下行来阻止表单提交。

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

调用e.preventDefault()将阻止浏览器的默认操作发生，在这种情况下提交表单。

更改按钮的处理方式

据我所知，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文件时。这是因为在修改数据库时永远不应该使用GET请求。

使用POST请求是防止跨站点请求伪造的一种简单方法。

重命名表列名

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

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

直接POST到删除页面

因为您使用的是AJAX，所以可以直接指定deletelocation.phpurl。根据我上面建议的更改，没有理由保留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

如果可能的话，我想保留定位脚本。我的许多页面都依赖于SESSION id，如果不重写大量代码，使用Get就不是一种选择。

你使用locationsaction.php和会话的方式不是我想要的。但这是你的应用程序结构，你可以随心所欲地构建它。

我可以把按钮类型改为按钮而不是提交吗？保持id不变，这样JS代码就会接受这一点？

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

你能不能也为我确认一下你的AJAX是否只是替换了我代码的顶部？

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

观察1:

function delete(){
$(document).ready(function(){

这真的是代码中的行顺序吗？jQuery就绪挂钩位于函数定义的内部？或者你是不是搞错了，把它们按错误的顺序贴在这里了。

如果是前一种情况，那么请先解决这个问题，然后再做其他事情。否则，继续阅读：

1. 为什么选择$（'.item.delete'）？我没有看到任何带有class.item的标记？它在哪里？你确定这个选择器首先匹配一些元素吗？此外，您应该使用#delete来通过元素的id属性引用元素，而不是.delete，因为这会查找具有类delete的元素。

2. 您的id:delete按钮和其他按钮都是提交类型的按钮，这意味着它们的点击处理程序不会阻塞提交流。您可以将所有按钮类型更改为按钮，而不是将它们作为提交。下面的代码示例。

3. 为什么是声明性的点击删除按钮？扔掉它。

（此外，在这种情况下，你真的不需要表单，除非你想反序列化表单，考虑到你的标记，这似乎不是一个要求或意图）。

<td><input type='button' name='type' id='details' value='Details'/></td>
<td><input type='button' name='type' id='images' value='Images'/></td>
<td><input type='button' name='type' id='addFinds' value='Add Finds'/></td>
<td><input type='button' name='type' id='viewFinds' value='View Finds'/></td>
<td><input type='button' name='type' id='delete' value='Delete' /></td>

和你的JS:

//please, be careful with the selector.
//it could be that it is not matched at all,
//hence jQuery will not bind to anything
//and nothing will ever fire!
//note the #delete for Id! .delete is for a class!!!!!!
$('.item #delete').click(function () {
    var elem = $(this).closest('.item');
    $.confirm({
        'title': 'Delete Confirmation',
        'message': 'Delete?',
        'buttons': {
            'Yes': {
                'class': 'blue',
                'action': function () {
                    //elem.slideUp();
                    $.ajax({
                        url: 'locationsaction.php',
                        type: 'post',
                        data: {
                            lid: "VALUE",
                            type: 'Delete' //you need to add the type here!
                        },
                        success: function () {
                            img.parent().fadeOut('slow');
                        }
                    });
                }
            },
            'No': {
                'class': 'gray',
                'action': function () {} // Nothing to do in this case. You can as well omit the action property.
            }
        }
    });

此外，您还可以冗余地向表单的onsubmit事件添加错误返回。

实际上，我在您的表单上找不到任何id btn删除按钮。如果您使用的删除按钮存在于表单中，则更改此

<input type="submit" value="Delete Record" />

到

<input type="button" id="btn-delete" value="Delete Record" />

或者你使用任何其他输入，然后确保它的类型不是提交，例如

<input type="submit" value="Your button" />

应该是

<input type="button" value="Your button" />

u可以使用jquery ui对话框进行确认：

   <script type="text/javascript">
    $('#btn-delete').click(function (e) {
        e.preventDefault();
        var elem = $(this).closest('.item'), formSerialize = $(this).parent().serialize(), objParent = $(this).parent();
        $('<div></div>').appendTo('body')
                    .html('<div><h6>Delete?</h6></div>')
                    .dialog({
                        modal: true, title: 'Delete Confirmation', zIndex: 10000, autoOpen: true,
                        width: 'auto', resizable: false,
                        buttons: {
                            Yes: function () {
                                $.ajax({
                                    url: 'deletelocation.php',
                                    type: 'post',
                                    data: formSerialize//,
                                    //success: function (data) {
                                    //    objParent.slideUp('slow').remove();
                                    //}
                                });

                                //Or
                                objParent.slideUp('slow').remove();

                                $(this).dialog("close");
                            },
                            No: function () {
                                $(this).dialog("close");
                            }
                        },
                        close: function (event, ui) {
                            $(this).remove();
                        }
                    });
    });
</script>

问题与JavaScript无关。

根本问题似乎是表单的操作是删除记录（不管您用JavaScript编码了什么）。将表单的操作更改为"."，onsubmit="return false"（这将阻止表单自行执行任何操作）。现在，将$.confirm附加到相应的按钮应该可以工作了。

退一步讲，您根本不需要表单（或提交按钮）。那么你就不必对抗表单的默认行为了。

尝试使用e.stopPropagation（）；

$('#btn-delete').click(function(e) {
    e.preventDefault();
    e.stopPropagation();