我想知道是否有人可以帮助我。
首先，我很抱歉，因为我对此非常陌生，所以请原谅我有些看似非常基本的问题/错误。
以下代码的摘录，成功创建了与当前用户相关的记录表。
工作解决方案 - Baylor Rae'在过去的3-4天里不知疲倦地与我一起寻找解决方案。所有的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脚本将用户导航到四个不同的屏幕，所有屏幕都通过lid值链接回主表记录。该脚本如下所示。
我现在正在尝试为Delete函数实现确认消息。可以找到here的源代码。
这是我对下一步做什么不太了解的地方。我试图将按钮on click事件与Delete函数的名称相关联，但是不是确认消息，用户将进入空白屏幕并删除记录。
我已经运行了JavaScript控制台并且没有创建错误，所以我对如何继续保持不确定。
我只是想知道是否有人可以看看这个请让我知道我哪里出错了。
非常感谢和亲切的问候
答案 0 :(得分：1)
观察1：
function delete(){
$(document).ready(function(){
这真的是代码中行的顺序吗？ jQuery ready hook是你函数定义的 INSIDE 吗？或者你错误地将它们发布在这里错误的顺序。
如果是前一种情况，那么请先解决这个问题。否则，请继续阅读：
为什么$（'。item .delete'）？我没有看到类.item的任何标记？它在哪里？你确定这个选择器首先匹配一些元素吗？此外，您应该使用#delete通过其id属性引用元素，而不是.delete，因为它会查找具有类delete的元素。
您的ID：删除按钮，其他按钮是提交类型按钮，这意味着他们的点击处理程序根本不会阻止提交流程。您可以将所有按钮类型更改为按钮，而不是将它们作为提交。代码示例如下。
为什么声明性点击删除按钮？摆脱它。
（另外，在这种情况下，你真的不需要表单，除非你想反序列化表单，这似乎不是你的标记的要求或意图）。
<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事件中添加错误的回复。
答案 1 :(得分：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。
这也适用于您的文件名。您可以包含下划线或短划线以分隔文件名中的单词。我通常使用下划线，因为我觉得它读得更好，但这是你的选择。
因为您正在使用AJAX，所以您可以直接指定deletelocation.php网址。根据我上面提到的更改，没有理由保留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
如果可能，我想保留locationaction脚本。我的很多页面都依赖于SESSION id，如果没有重写大量代码，使用Get不是一个选项。
您使用locationsaction.php和会话的方式不是我的方式。但这是你的应用程序结构，你可以随意构建它。
我可以将按钮类型更改为按钮而不是提交，保持id相同，以便JS代码选择它吗？
您可以将类型更改为按钮，但是当禁用javascript时，它将不会提交表单。通常，您将页面编写为无需JS的工作，然后编写JS以修改浏览器的默认行为。
您是否也可以向我确认您的AJAX是否只是替换了代码的顶部？
不，我只改变了设置lid的方式。你仍然需要包含所有包裹它的JS，我只是不想粘贴整个代码块。
答案 2 :(得分：1)
实际上我没有在你的表单上找到任何id btn-delete的按钮。如果你在表单中使用了删除按钮，那么改变这个
<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" />
答案 3 :(得分：1)
您可以使用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>
答案 4 :(得分：1)
问题与JavaScript无关。
基本问题似乎是您的表单的操作是删除记录（无论您在JavaScript中编码了什么）。将表单的操作更改为“。”和onsubmit =“return false”（阻止表单自行执行任何操作）。现在将$ .confirm附加到相应的按钮应该可以。
退一步 - 你根本不需要表格（或提交按钮）。那么你就不必打击表单的默认行为。
答案 5 :(得分：0)
尝试使用e.stopPropagation（）;
$('#btn-delete').click(function(e) {
e.preventDefault();
e.stopPropagation();