Question

I am trying to do this:

Have the user click some action. The action checks whether the user is logged in or not. If not, open a login dialog box, and if the user logs in correctly, update the original page.

I got almost all this working except the part of after successful login. The problem is that the code seems to not have access to the item_id which I was trying to update. Instead, when I try to set the item id (problem_id in this case) in the login form of the popup box, the id is the number of the id that is the last one on the page, and not the one that was clicked.

Here is what I am trying to do in the jQuery:

<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();
        });

    // Called right away after someone clicks on the vote up link
    $('.vote_up').click(function() 
    {        
        var problem_id = $(this).attr("data-problem_id");

        //alert ("In vote up click, problem_id: " + problem_id );
        voteUp(problem_id);

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

    var voteUp = function(problem_id) 
    {
        alert ("In vote up function, problem_id: " + problem_id );

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

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

                },
                error : function(data) 
                {
                    alert ("vote error");
                    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');

                        alert ("after dialog was open");

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

                    //alert(JSON.stringify(data));
                } // Closing error case
            }); // Closing AJAX call.
    };

    $('.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() 
    {
    alert("in login button fnction");
            $.ajax({
                url:'url to do the login',
                success:function() {
                    //now call cote up 
                    voteUp($problemId.val());
                }
            });
        });    
});
</script>

and here is the login form:

         <div id="login_div">
         <form id="login_form" method="post" action="">
         <p>
             <label for="name"><span>Your Email:</span></label> <input type="text" name="email" id="email" />
         </p>
         <p>
             <label for="name"><span>Your Password:</span></label> <input type="password" name="user_pass" id="user_pass">
         </p>

         <input type="hidden" id="problem_id" name="problem_id" value="<?php echo $problem_id; ?>" />

<span class="no_such_user" style="color: red; display:none">The login and password does not match our records.</span>
<span class="password_error" style="color: red; display:none">The password much be 5 characters or more.</span>
<span class="login_success" style="color: green; display:none">You successfully logged in.</span>
         <p>
            <input type="submit" value="Log In"  />
         </p>
         </form>

         </div>

But the problem_id which is being set in this form isn’t the one being clicked on, even though I am trying to save it in my jQuery.

Also, here is the code that gets executed for login:

$(function()
{
    $("#login_div input[type=submit]").click(function()
    {
        var email = $("#email").val();
        var password = $("#user_pass").val();

        //alert("Email: " + email);
        //alert("password: " + password);

        var dataString = 'email='+ email + '&password=' + password;

        if( !email )
        {   
            alert ("1");
            $('.login_success_email_empty').fadeOut(200).hide();
            $('.login_error_email_empty').fadeOut(200).show();
        }       
        else        
        if( !password || password.length < 5)
        {alert ("2");
            $('.password_success').fadeOut(200).hide();
            $('.password_error').fadeOut(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "../auth/login_ajax.php",
                dataType: "json",
                data: dataString,
                success: function(json)
                {
                    $('.password_error').fadeOut(200).hide();
                    $('.no_such_user').fadeOut(200).hide(); 
                    $('.login_success_email_empty').fadeOut(200).hide();
                    $('.login_success').fadeIn(200).show();                                 

                    // Closing the dialog bosx
                    $('#loginpopup').dialog('close');

                    // Swapping out the header div
                    $('#header_logged_out').hide();
                    $('#header_logged_in').show();  

                    // Now also need to retrieve the problem_id                 
                    problem_id = $("#problem_id").val();
                    //$problemId = $('#theProblemId', '#loginpopup').val();         


                    var $problemId = $('#theProblemId', '#loginpopup');
                    alert ("After login, problem_id: " + problem_id + " and problemId was: " + $problemId);
                },
                error : function(json)
                {
                    alert ("error");

                    // Output the result.
                    errorMessage = json.responseText;

                    alert ("ErrorMessage: " + errorMessage );

                    if ( errorMessage == 'no_such_user' )
                    {
                        $('.no_such_user').fadeOut(200).hide();
                        $('.no_such_user').fadeOut(200).show();                 
                    }
                }
            });
        }

        return false;
    });
});

and I am just not sure how to get that problem_id which was set in the original jQuery code to be recognized in the jQuery code that executes after login.

Because what I really need to do is update that particular problem depending on whether the user was logged in.

And how do I know in the original code that processes the votes, whether the login in the dialog box was successful or not?

By the way, I am working on this page: http://www.problemio.com

Answer 1

It seems that you might be better served using the jquery forms /ajax submit plugin:
http://be.twixt.us/jquery/formSubmission.php

$('loginDiv > form').submit(function() {
    var options = {
        url = "../auth/login_ajax.php",
        [...]
       };
    $(this).ajaxSubmit(options);
    return false;  //this line is required to make sure that the page doesn't get redirection to /auth/login_ajax.php
});

This way it won’t reload any of the javascript, preserving any variables that have already been set. You can therefore set the problem ID before the login, and then do stuff with it afterward.