Error del analizador cuando se usa jQuery-UJS para el enlace remoto a la aplicación Rails 3: ¿cómo puedo depurar esto?

Question

Estoy tratando de reemplazar el contenido de un div después de hacer clic en un enlace usando Rails 3, remote_link :remote => true y jQuery.

Hasta ahora, he podido hacer que el controlador muestre el parcial correcto mientras responde con un código HTTP 200. He puesto algunas devoluciones de llamada para encontrar el origen del problema:

jQuery(function($) { 
    $("#follow-link").bind("ajax:before", function() { 
     console.log("ajax:before"); 
    }); 

    $("#follow-link").bind("ajax:success", function(data, status, xhr) { 
     console.log("ajax:success"); 
    }); 

    $("#follow-link").bind("ajax:complete", function() { 
     console.log("ajax:complete"); 
    }); 

    $("#follow-link").bind("ajax:error", function(xhr, status, error) { 
     console.log("ajax:error"); 
     console.log(error); 
    }); 
}); 

Mientras before y complete se disparan, no es successerror y salidas "parsererror". El contenido que obtengo cuando inspecciono la respuesta en las herramientas de desarrollo de Safari es una cadena simple.

¿Por qué generaría un parsererror? ¿Cómo puedo obtener más información sobre qué está causando este error?

Answer 1

Voy a proponer una respuesta porque los comentarios no permiten ningún formato. Aquí está: algo está sucediendo en el lado del servidor y jQuery no está obteniendo lo que crees que es. He aquí un extracto de la documentación de jQuery:

error (jqXHR, textStatus, errorThrown) Función Una función ser llamados si la petición falla. La función recibe tres argumentos: El jqXHR (en jQuery 1.4.x, XMLHttpRequest) objeto, una cadena describe el tipo de error que se produjo y un objeto opcional excepción , si se dio. Los valores posibles para el segundo argumento (además de nulo) son "tiempo de espera", "error", "abortar" y "parsererror". Cuando se produce un error HTTP , errorThrown recibe la parte textual del estado HTTP , como "No encontrado" o "Error interno del servidor".

Eso implica que su controlador puede estar respondiendo con algo que no sea los datos esperados. En ese controlador, intente:

Rails.logger.debug render_to_string(:partial => "followings/follow") 

En cualquier caso, revisar sus registros para asegurarse de que lo que usted piensa que está sucediendo realmente está sucediendo. Además, escriba una prueba para comprobar esto:

# controller spec... modify if using Test::Unit 
it "sends cool javascript" do 
    xhr.post :unfollow, :id => 83, :data-method => "delete" 
    response.body should == "some known response" 
end 

Ok, es una especificación hacky, frágil, pero lo hará hasta que no sepa donde las cosas van mal.

Una vez que funcione, todo lo demás se ajustará perfectamente.

Answer 2

También conseguía extraña parsererror s aunque mis enlaces remotos estaban apuntando correctamente a las acciones con :format => :js y mis acciones del controlador fueron correctamente utilizando respond_to para servir objetos JSON como:

respond_to do |format| 
    format.js do 
    render :json => {:something => "OK"} 
    end 
end 

La solución terminó siendo simplemente dejar caer esta línea en mi application.js:

$.ajaxSettings.dataType = "json"; 

Por defecto, parecía que estaba tratando de jQuery para evaluar todas las respuestas como "script", que me adivinar significa que estaba tratando de ejecutarlo como código-? Dejar caer esta línea una vez solucionado el problema globalmente.

Answer 3

La solución para mí fue también reemplazar el formato de respuesta con '.html' en lugar de '.js' en el controlador.

Lo que hace es enviar el tipo de contenido de respuesta como "html/text" en lugar de "html/javascript", y esto, de alguna manera es aceptable para el analizador de respuestas.

Answer 4

en lugar de format.js uso format.json

establecer $.ajaxSettings.dataType = 'json'; es susceptible de causar problemas en otras partes de su código.

Answer 5

En lugar de utilizar la configuración global $.ajaxSettings.dataType = 'json';, una solución limpiadora es agregar un atributo data-type al elemento de formulario. Los controladores de eventos de forma remota pasarán a través de este como el tipo de datos a la llamada jQuery AJAX, por ejemplo:

form_for @subject, :remote => true, :html => {'data-type' => 'json'} 

Answer 6

Otra manera de resolver esto es agregar Js a la acción de la forma (si está usando un enlace rieles generador que puede agregar: format =>: json). Luego, asegúrese de estar respondiendo a json en su controlador.

He aquí un ejemplo de una señal en forma configurado de esa manera:

<%= form_for User.new, :url => session_path(:user, :format => :json), :html => {:id => "login-form", :class => "well"}, :remote => :true do |f| %> 
     <label>Email</label> 
     <%= f.text_field :email %> 
     <label>Password</label> 
     <%= f.password_field :password %> 
     <%= f.hidden_field :remember_me %> 
     <%= button_tag "Sign in", :class => "btn", :type => "submit" %><%= image_tag "ajax-loader.gif", :style => "display:none", :id => "login-spinner" %> 
    <% end %> 

En el controlador:

def create 
respond_to do |format| 
    format.html{ super } 
    format.json do 
    resource = warden.authenticate!(:scope => resource_name, :recall => :failure) 
    return sign_in_and_redirect(resource_name, resource) 
    end 
end 
end 

Answer 7

Si está intentando actualizar el contenido de un DIV utilizando una normal de jQuery AJAX llamada usando la salida HTML de una acción de controlador de rieles, necesita decirle a JQuery qué tipo de datos esperar de la respuesta, para que no analice la respuesta como javascript y le proporcione el error parserer que usted describe.

$.ajax({ url: "/blah", 
    contentType: "text/javascript", dataType: "html", 
    beforeSend: function(xhr) { 
    xhr.setRequestHeader('Accept', 'text/javascript');  
    }, 
    success: function(data) { 
    $('your-div').html(data); 
    } 
}); 

Esto entonces ser compatible con una acción de controlador que utiliza el bloque respond_to:

respond_to do |format| 
    format.html { 
    # This would be a normal render of your template. 
    } 
    format.js { 
    # This would be a render of your template, as HTML, but only for your AJAX requests. 
    # We might use this to avoid including the layout of our template. 
    render :layout => nil 
    } 
end