1

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

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

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

工作解决方案 - 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>

删除位置.php

<?php

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

    ?>

您会看到表格的末尾有四个按钮,通过locationsaction.php脚本将用户导航到四个不同的屏幕,所有这些屏幕都通过值链接回主表格记录lid。该脚本如下所示。

我现在正在尝试为该Delete功能实现确认消息。可以在这里找到源代码。

这就是我变得有点不确定下一步该做什么的地方。我试图将按钮on click事件与Delete函数名称联系起来,但不是确认消息,而是将用户带到一个空白屏幕并删除记录。

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

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

非常感谢和亲切的问候

4

6 回答 6

1

观察1:

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

这真的是代码中行的顺序吗?jQuery 就绪钩子位于函数定义的内部?或者您是否错误地将它们以错误的顺序张贴在这里。

如果是前一种情况,那么请先解决这个问题。否则,请继续阅读:

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

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

  3. 为什么要声明性 onClick 删除按钮?摆脱它。

(此外,在这种情况下,您真的不需要表单,除非您想反序列化表单,鉴于您的标记,这似乎不是要求或意图)。

<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 事件添加错误返回。

于 2012-07-15T15:56:19.833 回答
1

防止重定向

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

$('#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 请求是防止跨站点请求伪造的一种简单方法。

重命名表列名称

我注意到你的列名locationidlocationname没有任何类型的分隔。我建议将这些重命名为location_idand 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()将自动从中获取位置 idinput[name=lid]并创建一个查询字符串,如lid=1.


编辑#1

如果可能,我想保留位置操作脚本。我的很多页面都依赖于 SESSION id,如果不重新编写大量代码,就无法使用 Get。

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

我可以将按钮类型更改为按钮而不是提交,保持 id 相同,以便 JS 代码选择它吗?

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

您能否也帮我确认一下您的 AJAX 是否只是替换了我的代码的顶部?

不,我只是更改了您设置lid. 你仍然需要包含所有包裹它的 JS,我只是不想粘贴整个代码块。

于 2012-07-17T22:31:12.037 回答
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" />
于 2012-07-20T06:22:01.533 回答
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>
于 2012-07-20T07:11:52.020 回答
1

问题与 JavaScript 无关

根本问题似乎是您的表单的操作是删除记录(无论您在 JavaScript 中编码了什么)。将表单的操作更改为“。” 和 onsubmit="return false" (阻止表单自行执行任何操作)。现在将您的 $.confirm 附加到相应的按钮应该可以工作。

退后一步——您根本不需要表单(或提交按钮)。这样您就不必与表单的默认行为作斗争。

于 2012-07-20T22:48:03.140 回答
0

尝试使用 e.stopPropagation();

$('#btn-delete').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
于 2012-07-19T18:50:47.433 回答