Why doesn't my jQuery code work in Firefox and Chrome?

EDITED

Hi, I use masterpage. And I use formsauthentication in my project. I pull my data from SQL Server 2005. then in login.aspx, I call my pagemethod from jQuery. After all, I run my project in IE9.0, Chrome and Firefox. The project is correct. But this jQuery code开发者_如何学JAVA is working only IE9.0.

My pagemethod, which is named LoginService, returns "0" or returnURL like "user/Default.aspx", then I control this tah if return of LoginService isn't "0" success will run the following:

alert("there isnt error: " + msg.d);

but, if there is an error, this will run:

alert("there is error: " + msg.d);

It is very interesting that

if I run this project in IE9, message shown like "there isnt error: user/Default.aspx"

but,

if I run this project in Chrome or Firefox, message shown like "there is error: undefined"

how can I run this project in all browsers?

<script type="text/javascript">
  jQuery(document).ready(function () {
    jQuery("#myContent_login").focus();
    jQuery("#myContent_submit_image").click(function () {
      jQuery("#login_form_spinner").show();
      jQuery.ajax({
        type: "POST",
        url: "Logon.aspx/LoginService",
        data: "{'username': '" + jQuery("#myContent_login").val() + "', 'password': '" + jQuery("#myContent_password").val() + "','isRemember': '" + jQuery("#myContent_remember_me").is(':checked') + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
          if (msg.d != 0) {
            alert("there isnt error: " + msg.d);
          }
        },
        error: function (msg) {
          alert("have error: " + msg.d);
        }
      });
    });
  });
</script>

---

Just a quick observation:

jQuery('login_form_spinner')

you need a # or a . in front of login_form_spinner.

Update:

you can look here for an example. Note that the success and erro functions are different than you're example.

I can help more but would need to know the specific error.

---

Make sure you return false from your click handler to cancel the default submit:

jQuery("#myContent_submit_image").click(function () {

    jQuery('#login_form_spinner').show();
    jQuery.ajax({
        type: "POST",
        url: "Logon.aspx/LoginService",
        data: "{'username': '" + jQuery("#myContent_login").val() + "', 'password': '" + jQuery("#myContent_password").val() + "','isRemember': '" + jQuery("#myContent_remember_me").is(':checked') + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            if (msg.d != 0) {
                window.location.replace(msg.d);
            }
        },
        error: function (msg) {
            alert(msg.d);
        }
    });

    return false; // THIS IS VERY IMPORTANT
});

Also cleanup your AJAX call in order to properly encode parameters, like this:

jQuery("#myContent_submit_image").click(function () {
    jQuery('#login_form_spinner').show();
    jQuery.ajax({
        type: "POST",
        url: "Logon.aspx/LoginService",
        data: JSON.stringify({
            username: jQuery("#myContent_login").val(), 
            password: jQuery("#myContent_password").val(),
            isRemember: jQuery("#myContent_remember_me").is(':checked')
        }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            if (msg.d != 0) {
                window.location.replace(msg.d);
            }
        },
        error: function (msg) {
            alert(msg.d);
        }
    });

    return false; // THIS IS VERY IMPORTANT
});

---

like justin said you where missing the has or dot also mad changes to your data object

<script type="text/javascript">
jQuery(document).ready(function ($) {
    $("#myContent_login").focus();
    $("#myContent_submit_image").click(function () {
        $('#login_form_spinner').show();
        $.ajax({
            type: "POST",
            url: "Logon.aspx/LoginService",
            data: {
                "username":$("#myContent_login").val(),
                "password":$("#myContent_password").val(),
                "isRemember":$("#myContent_remember_me").is(':checked')
            },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                if (msg.d != 0) {
                alert("there isnt error: " + msg.d);
                }
            },
            error: function (msg) {
                alert("have error: " + msg.d);
            }
        });
    });
});
</script>

but I suspect that your not returning json header or something like that

---

Check the documentation for jQuery.ajax carefully, and you'll see that success and error use different arguments:

success(data, textStatus, jqXHR)
error(jqXHR, textStatus, errorThrown)

So your error handler should look like this:

error: function (jqXHR, status, error) {
    alert("have error: " + status);
}

Once you're successfully getting the error message, you can figure out what's causing the error.

---

In this line

jQuery('login_form_spinner').show();

Is it a typo in the post or in your original code? I am assuming your are missing a "#" for your selector. Since IE handles this kind of error differently from FF and Chrome. You get different behavior across browsers.