javascript - 如何跟踪 jQuery 对话框调用的操作？

Question

我有点进退两难:)

我有一个链接供用户对项目进行投票。单击一个链接会生成一个 jQuery AJAX 调用，检查此人是否已登录。如果没有，该对话框将显示一个用于登录的表单。

但问题是用于登录的 jQuery 调用和弹出框的整个位置在不同的地方。

我需要做的是检查用户是否成功登录，并更新投票数。

我正在这个网站上做:http://www.problemio.com

到目前为止，这是我的 jQuery 代码:

<script type="text/javascript">
$(document).ready(function() 
{
     var $dialog = $('#loginpopup')
       .dialog({
         autoOpen: false,
         title: 'Login Dialog'
       }); 

        $("#newprofile").click(function () {
          $("#login_div").hide();
          $("#newprofileform").show();
        });


    $('.vote_up').click(function() 
    {        
        problem_id = $(this).attr("data-problem_id");

        var dataString = 'problem_id='+ problem_id + '&vote=+';

        $.ajax({
                type: "POST",
                url: "/problems/vote.php",
                dataType: "json",
                data: dataString,
                success: function(data)
                {           
                    // ? :)
                    alert (data);   
                },
                error : function(data) 
                {
                    errorMessage = data.responseText;

                    if ( errorMessage == "not_logged_in" )
                    {
                        // Try to create the popup that asks user to log in.
                        $dialog.dialog('open');

                        // prevent the default action, e.g., following a link
                        return false;
                    }
                    else
                    {
                        alert ("not");
                    }

                    //alert(JSON.stringify(data));
                }
            });


        //Return false to prevent page navigation
        return false;
    });

    $('.vote_down').click(function() 
    {
        alert("down");

        problem_id = $(this).attr("data-problem_id");

        var dataString = 'problem_id='+ problem_id + '&vote=-';        

        //Return false to prevent page navigation
        return false;
    });    
});
</script>

一切正常，除了 $dialog.dialog('open'); 行之后 - 我不知道该怎么做

1. 获取成功或失败的信号，但不知 Prop 体怎么做
2. 更新被投票的项目，因为它只是页面中可以投票的众多项目之一。

我该如何做这两件事？

Answer 1

试试这个方法:

1. 在登录对话框的 div 中有一个隐藏的输入。
2. 在执行 .dialog('open')
之前用 problem_id 设置它
3. 在点击 Login 按钮的成功回调中，从隐藏的输入中检索 problem_id 并执行投票赞成或反对。

希望对你有帮助

编辑:(尝试在 OP 的第二条评论后编写一个可行的示例)

<script type="text/javascript">
    $(document).ready(function() {
        var $dialog = $('#loginpopup')
                .dialog({
                    autoOpen: false,
                    title: 'Login Dialog'
                });

        var $problemId = $('#theProblemId', '#loginpopup');

        $("#newprofile").click(function () {
            $("#login_div").hide();
            $("#newprofileform").show();
        });


        $('.vote_up').click(function() {
            var problem_id = $(this).attr("data-problem_id");
            voteUp(problem_id);
            //Return false to prevent page navigation
            return false;
        });

        var voteUp = function(problem_id) {
            var dataString = 'problem_id=' + problem_id + '&vote=+';

            $.ajax({
                type: "POST",
                url: "/problems/vote.php",
                dataType: "json",
                data: dataString,
                success: function(data) {
                    // ? :)
                    alert(data);
                },
                error : function(data) {
                    errorMessage = data.responseText;
                    if (errorMessage == "not_logged_in") {
                        //set the current problem id to the one within the dialog
                        $problemId.val(problem_id);

                        // Try to create the popup that asks user to log in.
                        $dialog.dialog('open');

                        // prevent the default action, e.g., following a link
                        return false;
                    }
                    else {
                        alert("not");
                    }

                    //alert(JSON.stringify(data));
                }
            });
        };

        $('.vote_down').click(function() {
            alert("down");

            problem_id = $(this).attr("data-problem_id");

            var dataString = 'problem_id=' + problem_id + '&vote=-';

            //Return false to prevent page navigation
            return false;
        });

        $('#loginButton', '#loginpopup').click(function() {
            $.ajax({
                url:'url to do the login',
                success:function() {
                    //now call cote up 
                    voteUp($problemId.val());
                }
            });
        });
    });
</script>