Developer
Developer

Reputation: 183

Cancel call to controller through jQuery

I am trying to create a small login screen. I am not using any API. The way I have set up the login screen is as follow

  1. User enters login name and password in VIEW.
  2. User clicks login button.
  3. I validate user details through AJAX.
  4. At this stage, if details are correct, I transfer user to the next page.
  5. If details are incorrect I just put in error message.

Here is the JQuery code I got.

    $(document).ready(function () {
        var returnType;
        $("#loginButton").click(function () {
            var loginDetails = { 
                loginName: $("#username").val(),
                password: $("#password").val()
            };
            $.ajax({
                url: '@Url.Action("VerifyLoginDetails", "Home")',
                type: 'POST',
                contentType: 'application/json',
                dataType: 'json',
                data: JSON.stringify(loginDetails),
                success: function (data) {
                    if (data.success) {
                        if (data.loginAuthentication == 1) {
                            return true;
                        }

                        if (data.loginAuthentication == -2) {
                            $("#password").attr("style", "display:block;");
                            alert("incorrect password");
                            return false;
                        }

                        if (data.loginAuthentication == -1) {
                            $("#username").attr("style", "display:block;");
                            alert("incorrect un");
                            return false;
                        }

                    }
                }
            });
        });
    });

As far as my knowledge is concerned, if I return true, it should not send the call to the controller but, for some reason, it still does. Any suggestions on how can I stop the call to the controller through jQuery?

Upvotes: 0

Views: 765

Answers (3)

Mahesh Chitroda
Mahesh Chitroda

Reputation: 178

Please Try This Code

  $(document).ready(function () {
        var returnType=false;
        $("#loginButton").click(function () {
            var loginDetails = { 
                loginName: $("#username").val(),
                password: $("#password").val()
            };
            $.ajax({
                url: '@Url.Action("VerifyLoginDetails", "Home")',
                type: 'POST',
                contentType: 'application/json',
                dataType: 'json',
                data: JSON.stringify(loginDetails),
                success: function (data) {
                    if (data.success) {
                        if (data.loginAuthentication == 1) {
                            returnType=true;
                        }

                        if (data.loginAuthentication == -2) {
                            $("#password").attr("style", "display:block;");
                            alert("incorrect password");
                            returnType=false;
                        }

                        if (data.loginAuthentication == -1) {
                            $("#username").attr("style", "display:block;");
                            alert("incorrect un");
                            returnType=false;
                        }

                    }
                }
            });
            return returnType;
        });
    });

Upvotes: 0

Slappy
Slappy

Reputation: 4092

The return value of the success function does nothing as far as I can see. What you should be doing is placing your redirection code where you have "return true".

To do this use window.location.href.

window.location.href = "https://google.com";

Upvotes: 0

Martin Liversage
Martin Liversage

Reputation: 106836

Chances are that #loginButton is in a form that is submitted when the button is clicked. You can use preventDefault() to stop this behavior:

$("#loginButton").click(function (e) {
  e.preventDefault();
  ...

Upvotes: 3

Related Questions