Question

I have a section in my ASP.NET MVC3 website where a user can click a button to add an entry to their ‘Saved Items’ section in their account. This is done via a JQuery Ajax request, which works well if they’re logged in. If they’re not logged in, I’d like them to be redirected to a login page, and then automatically have the entry added to their Saved Items section.

I have all the parts working seperately – i.e. when the button is clicked, if not logged in, the login box displays. The login popup also works successfully. The problem is trying to seamlessly do all things at once. Here is the code I have so far:

Click event for Save button – checks to see if user logged in along the way:

    var loggedIn = false;

    $(document).ready(function () {
        $('a#saveSearch').live('click', function (event) {
            $.get('@Url.Action("IsLoggedIn", "Account", null)', function (response) {
                if (response == "True")
                    loggedIn = true;
                else
                    loggedIn = false;
            });
            if (loggedIn){
                SaveSearch();
            }
            else{                        
                $('#dialog').dialog('open');
                SaveSearch(); //don't think this is correct because it hits this line before login is complete
            }
        });

Function to save to database:

        function SaveSearch(){                    
            var url = '@Url.Action("SaveSearch", "User")';
            $.ajax({
                url: url,
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({
                    json: "@Html.Raw(Session["MyFormString"].ToString())"
                }),
                success: function (data) {
                    $('a#saveSearch').attr('disabled', "disabled");
                    $('div#savedResponse').html('<p>Search saved to user account</p>');
                },
                error: function () {
                }
            });
        }
    });

JQuery UI dialog popup:

$(function () {
    $('#dialog').dialog({
        autoOpen: false,
        width: 400,
        resizable: false,
        title: 'Login',
        modal: true,
        open: function(event, ui) {
            $(this).load("@Url.Action("Logon", "Account", null)");
        },
        buttons: {
            "Close": function () {
                $(this).dialog("close");
            }
        }
    });

I think there is something fundamental that is wrong with my code, because this way, the login popup appears for just a second and then disappears straight away. It looks like I need to get it to stop advancing through the code until the login has been completed.

Any advice or help to get this going would be appreciated.

Answer 1

I would imagine your issue might be related to:

$.get('@Url.Action("IsLoggedIn", "Account", null)', function (response) {
  if (response == "True")
    loggedIn = true;
  else
    loggedIn = false;
});
if (loggedIn){
  SaveSearch();
}
else{                        
  $('#dialog').dialog('open');
  SaveSearch(); //don't think this is correct because it hits this line before login is complete
}

The $.get call is async, which means the latter code:

if (loggedIn){

Is being executed before the server has responded. You need to put that code within your response callback:

$.get('@Url.Action("IsLoggedIn", "Account", null)', function (response) {
  if (response == "True")
    loggedIn = true;
  else
    loggedIn = false;

  if (loggedIn){
    SaveSearch();
  }
  else{                        
    $('#dialog').dialog('open');
    SaveSearch(); //don't think this is correct because it hits this line before login is complete
  }
});