0

我想从数据库中删除一条在while循环中显示的记录，但在删除之前我想显示一个确认框。我写的代码如下。它工作正常，但要删除记录我需要传递一个我的ID已在代码中描述

------index.php 开始

            <!DOCTYPE html><html><head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>A jQuery Confirm Dialog Replacement with CSS3 | Tutorialzine Demo</title>

        <link href='http://fonts.googleapis.com/css?family=Cuprum&amp;subset=latin' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        <link rel="stylesheet" type="text/css" href="jquery.confirm/jquery.confirm.css" />

        </head>
        <body>

        <div id="page">

            <?php 

          $sql = "SELECT * FROM tablename";
          $result = db_query($sql);

            while(db_fetch($result))
            {
                ?>
                //here we need to pass the fetched record id to script.js file,but i dont know how
                <div class="item">
                <div class="delete"></div>  //here i have applied css i.e it displays wrong icon, when we click on that icon ,it is showing confirmation box. Everything is perfect in this.. but i wnat to pass and id.. im new to jquery
                </div>
                <?php
            }

            ?>
        </div>



        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script src="jquery.confirm/jquery.confirm.js"></script>
        <script src="js/script.js"></script>

        </body>
        </html>
        <!DOCTYPE html>

        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>A jQuery Confirm Dialog Replacement with CSS3 | Tutorialzine Demo</title>

        <link href='http://fonts.googleapis.com/css?family=Cuprum&amp;subset=latin' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        <link rel="stylesheet" type="text/css" href="jquery.confirm/jquery.confirm.css" />

        </head>
        <body>

        <div id="page">

            <?php 

          $sql = "SELECT * FROM tablename";
          $result = db_query($sql);

            while(db_fetch($result))
            {
                ?>

                <div class="item">
                <div class="delete"></div>
                </div>
                <?php
            }

            ?>
        </div>



        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script src="jquery.confirm/jquery.confirm.js"></script>
        <script src="js/script.js"></script>

        </body>
        </html>

----index.php 结束
----jquery.confirm.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);

----jquery.confirm.js 文件结束
-----script.js 文件开始

$(document).ready(function(){

    $('.item .delete').click(function(){

        var elem = $(this).closest('.item');

        $.confirm({
            'title'     : 'Delete Confirmation',
            'message'   : 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
            'buttons'   : {
                'Yes'   : {
                    'class' : 'blue',
                    'action': function(){
                        elem.slideUp();
                                          //sql delete query will be written here... in where condition i need to pass the fetched record id from index.php file  in where condtion    
                    }
                },
                'No'    : {
                    'class' : 'gray',
                    'action': function(){}  // Nothing to do in this case. You can as well omit the action property.
                }
            }
        });

    });

});

-----script.js 结束

4

3 回答 3

3

您可以使用 html 数据属性并使用.data jQuery 方法检索它

在您的 HTML 中：

<div class="delete" data-id="{$id}"></div>

在你的 Javascript

$('.item .delete').click(function(){

  var elem = $(this).closest('.item');
  var id = elem.data('id'); /* this is your db id */
});
于 2013-02-14T11:01:31.027 回答
0

您确定要从 Javascript 发送查询吗？执行此操作的常用方法是将具有该特定 ID 的请求（通过 jQuery）发送到运行查询（服务器端）的脚本，并返回响应。

现在，既然您使用 a 添加项目 div，while为什么不向 div 添加一个 id 属性，其中包含来自数据库的 id，例如

<div id="item<?php echo $row['id'];?>" class="item">
    <div class="delete">
</div>

这样，$('.item .delete').click 处理程序可以通过解析目标的id属性来访问项目的 id，并且您不需要将其显式传递给 jQuery。

于 2013-02-14T11:02:27.720 回答
0

在这里，您可以使用隐藏字段来保存 id 的值，然后使用 jquery 从隐藏字段中检索它。

while(db_fetch($result))
        {
            ?>
            //here we need to pass the fetched record id to script.js file,but i dont know how
            <input type="hidden" id="hid_id" value="<?php echo 'fetched id';?>" />
            <div class="item">
            <div class="delete"></div>  //here i have applied css i.e it displays wrong icon, when we click on that icon ,it is showing confirmation box. Everything is perfect in this.. but i wnat to pass and id.. im new to jquery
            </div>
            <?php
        }
       ?>

然后在 jquery 中使用确认框时，您可以通过 id 获取值hid_id 。

于 2013-02-14T11:06:13.840 回答