Question

I have a bit of a dillema 🙂

I have a link for users to vote on an item. A click on a link generated a jQuery AJAX call checking if the person is logged in. If not, the dialog box displays a form to login.

But the problem is that the jQuery call to log in and the whole bit with the popup box is in a different place.

What I need to do is check if user got logged in successfully, and update the vote count.

I am doing it on this site: http://www.problemio.com

Here is my jQuery code so far:

<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>

It all works except right after the line $dialog.dialog('open'); – I don’t know how to

1. Get a signal back for success of fail, and don’t know exactly how to
2. Update the very item that was voted on since it is just one of many items that can be voted on in the page.

How can I do these two things?

Answer 1

Try this approach:

1. Have a hidden input within the div that is your login dialog.
2. Set that with the problem_id before you do the .dialog('open')
3. On the success callback of the Login button click, retrieve problem_id from the hidden input and perform vote-up or vote-down.

Hope that helps

EDIT: (Trying to code a workable example after OP’s second comment)

<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>