jQuery's ajax está causando una actualización de página completa en FireFox

Question

Estoy haciendo una llamada ajax con jQuery. La llamada ajax funciona bien en IE 7, pero FireFox 3 siempre realiza una actualización de página completa al hacer esta llamada. La llamada ajax es POSTing a un método de página ASP.NET.

¿Hay algún problema en jQuery o simplemente me falta alguna configuración?

$.ajax({ 
async: false, 
type: "POST", 
url: "Default.aspx/DoSomething", 
data: "{" + parms + "}", 
contentType: "application/json; charset=utf-8", 
dataType: "json", 
cache: false, 
success: function(data) { succesfulPost(data); }, 
error: function(XMLHttpRequest, textStatus, errorThrown) { errorPost(textStatus, errorThrown); } 

});

La llamada se realiza desde un evento html button onclick. Intenté el 'retorno falso'; en el método que está haciendo esta llamada ajax, pero la actualización completa en FireFox continúa.

He intentado configurar async = true, pero parece que no funciona. FireFox simplemente continúa y no espera a que el servidor devuelva una respuesta. FireFox (en js) en realidad está generando un error en la llamada ajax. Como puede ver arriba, la función de error está definida y esto se activa cuando establezco async = true.

Answer 1

return false es lo que necesita, sin embargo, si ocurre un error de javascript antes de presionar esa línea, el navegador continuará realizando un clic de enlace o haga clic en el evento feliz.

puede tratar de rodear posibles áreas problemáticas con try/catch blocks.

Alternativamente, usted puede intentar esto:

e.preventDefault como la primera instrucción en el controlador. Se supone que esto impide que ocurra el evento predeterminado, y creo que puedes llamarlo por adelantado ... Simplemente no lo he intentado.

Editar: También me gustaría añadir que el error ajax: el manejador solo atrapa los errores que provienen del servidor ... como un 403 o 500. Todavía debe ajustar la llamada ajax en un try/catch.

Answer 2

¿Esta llamada está dentro de un evento de clic? Si es así, asegúrese de que el final del evento click tenga un "return false". Solo un pensamiento. Sé que es bastante viejo, pero, pensé que lo mencionaría de todos modos.

De lo contrario, su llamada se ve bien por lo que puedo decir.

Answer 3

¿Cómo invoca el método AJAX? Podría ser tan simple como cancelar el evento que inicia la solicitud AJAX si también va a causar un envío en el formulario.

<input type="submit" onclick="doAjaxSubmit();return false;" value="Update" /> 

Agregando el "return false;" hará que se cancele la acción de envío típica. Si proviene de un cuadro de texto, querrá agregar e.preventDefault al controlador del controlador de pulsación de tecla (o lo que sea) configurado para hacer AJAX.

Answer 4

Además, si su entrada es type = "submit" ... puede cambiarla a type = "button". Entonces no está intentando enviar un formulario ... solo haciendo su evento de "clic".

Answer 5

Tuve un problema similar con Firefox usando Ajax. Tenía varios elementos de entrada dentro de una etiqueta de formulario. Sin embargo, la etiqueta del formulario estaba causando que la página se actualizara, incluso cuando reemplacé mi etiqueta con una etiqueta de botón. Reemplacé la etiqueta del formulario con un div y el problema desapareció.

También probé e.preventDefault(), como se mencionó anteriormente. Eso también resolvió el problema, al tiempo que me permitía seguir usando la etiqueta de formulario.