类在使循环中的所有结果下进行图像加载

时间:2017-04-14 15:06:41

标签: javascript php jquery html ajax

当我点击while循环生成的任何提交按钮时,在while循环中的所有结果上都会显示提交按钮下方的加载图像。它实际上应该只显示在单击按钮下方。我知道它发生了,因为我在这里使用了CLASSES。我想我应该在这里使用唯一ID,以便结果只显示在特定的点击按钮下方。但我不知道如何做到这一点。或者我应该在这里使用任何其他方法?请看看。

$(document).ready(function() {
    $(".submit").click(function () {
        var dataString = {
            memid: $(this).parent().find(".memid").val(),
            memname: $(this).parent().find(".memname").val(),
            validity: $(this).parent().find(".validity").val()
        };
        $.confirm({
            title: 'Confirm!',
            content: 'Are you sure you want to upgrade your membership to ' + dataString.memname + '?',
            buttons: {
                confirm: function () {
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "upgrade-process.php",
                        data: dataString,
                        cache: true,
                        beforeSend: function () {
                            $("#submit").hide();
                            $(".loading-rent").show();
                            $(".message").hide();
                        },
                        success: function (json) {
                            setTimeout(function () {
                                $(".message").html(json.status).fadeIn();
                                $("#submit").show();
                                $(".loading-rent").hide();
                            }, 1000);
                        }
                    });
                },
                cancel: function () {
                    $.alert('<span style="font-size: 23px">Upgrade Cancelled!</span>');
                }
            }
        });
        return false;
    });
});

脚本

SELECT DISTINCT
    p.id
FROM
    products p
WHERE
    EXISTS ( SELECT 1 FROM products WHERE id = p.id AND value = 10 AND mode = 'INCLUDE' )
    OR 
    NOT EXISTS ( SELECT 1 FROM products WHERE id = p.id AND value = 10 AND mode = 'EXCLUDE') 

1 个答案:

答案 0 :(得分:1)

你需要找到你的装载机localy 看看

var $loader = $(this).parent().find('.loading-rent');

 $(document).ready(function() {
  $(".submit").click(function () {
    var dataString = {
        memid: $(this).parent().find(".memid").val(),
        memname: $(this).parent().find(".memname").val(),
        validity: $(this).parent().find(".validity").val()
    };

    var $loader = $(this).parent().find('.loading-rent');

    $.confirm({
        title: 'Confirm!',
        content: 'Are you sure you want to upgrade your membership to ' + dataString.memname + '?',
        buttons: {
            confirm: function () {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "upgrade-process.php",
                    data: dataString,
                    cache: true,
                    beforeSend: function () {
                        $("#submit").hide();
                        $loader.show();
                        $(".message").hide();
                    },
                    success: function (json) {
                        setTimeout(function () {
                            $(".message").html(json.status).fadeIn();
                            $("#submit").show();
                            $loader.hide();
                        }, 1000);
                    }
                });
            },
            cancel: function () {
                $.alert('<span style="font-size: 23px">Upgrade Cancelled!</span>');
            }
        }
    });
    return false;
});

});