Why is my jQuery code not working in Firefox and Chrome?

Question

EDITED

Hi, I am using masterpage. And I use formauthentication in my project. I retrieve data from SQL Server 2005. Then in login.aspx I call my pagemethod from jQuery. In the end, I run my project in IE9.0, Chrome and Firefox. The project is correct. But this jQuery code only works with IE9.0.

My pagemethod called LoginService returns “0” or returnURL as “user / Default.aspx”, then I control this tah, if the LoginService return is not “0” successful, the following will be executed:

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

but if there is an error, this will start:

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

It is very interesting that

if I run this project in IE9, the message is shown as "there is not error: user / Default.aspx"

but

if I run this project in Chrome or Firefox, the message is shown as "there is an 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> 

Answer 1

Make sure you return false from the click handler to cancel sending by default:

 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 clear your AJAX call to properly encode the parameters, for example:

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

Answer 2

Just a quick observation:

JQuery ('login_form_spinner')

you need # or . before login_form_spinner .

Update:

You can look here for an example. Note that the success and erro functions are different from your example.

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

Answer 3

as justin said that you, which lacks or has a point, are also crazy changes in 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 your return json header or something like that

Answer 4

Check the documentation for jQuery ajax carefully and you will 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 get the error message, you can find out what causes the error.

Answer 5

In this line

 jQuery('login_form_spinner').show(); 

Is it a typo in the message or in the source code? I assume that you do not have a "#" for your selector. Because IE handles such an error different from FF and Chrome. You have different behaviors in browsers.