jQuery bind ajax: success no funciona en la aplicación rails 3 para elementos recién creados (ajax)

Question

** Edité esta publicación porque encontré que el problema está en la incapacidad de los rieles para enlazar a la función ajax: success.

*** El uso de rieles 3.2.3

, gracias por tomarse el tiempo para leer y tratar de ayudar.

añado un desvanecimiento sencilla a cabo la función en el Ajax: éxito de un artículo se va a eliminar, de la siguiente manera:

$(document).ready(jQuery(function($) { 
    $('.delete').bind('ajax:success', function() { 
     $(this).closest('div').fadeOut(); 
    }); 
})); 
#For some reason had to pass the $ into the function to get it to work, 
#not sure why this is necessary but doesn't work unless that is done. 

Después de esto, quería crear un objeto con discreta jQuery cuando el usuario añade algo , y tienen botones de eliminación de trabajo en esos también. Hice un archivo create.js.erb que se llama después de crear un nuevo elemento, y la creación funciona bien, pero el botón eliminar no puede acceder al evento ajax: success.

Elimina los datos de la base de datos cuando se hace clic, pero .fadeOut nunca está vinculado a ella, por lo que no desaparece. El create.js.erb es el siguiente:

#$("div").append(html) here, then call the function below to try and bind the ajax:success function 
$('.delete').bind('ajax:complete', function() { 
    $(this).closest('div').fadeOut(); 
}); 

Si cambio este se una a la función de clic, funciona, pero esto no da cuenta de una llamada ajax fallado:

#$("div").append(html) here, then call the function below to try and bind the ajax:success function 
    $('.delete').bind('click', function() { 
     $(this).closest('div').fadeOut(); 
    }); 

Así que algo debe estar vinculado con el ajax: éxito después de que se crea el elemento. ¿Ustedes tienen alguna idea de por qué esto podría estar pasando? ¿Debo hacer algo especial en los rieles para que el elemento recién renderizado reconozca los eventos de Ajax? ¡Cualquier dirección sería muy apreciada!

P.S. El controlador para el método de eliminación es a continuación en caso de que alguien podría ser capaz de detectar un problema allí:

def destroy 
    @user = User.find(params[:user_id]) 
    @item = @user.item.find(params[:id]) 
    @item.destroy 

    respond_to do |format| 
     format.html { redirect_to user_path(@user) } 
     format.json { head :no_content } 
     format.js { render :nothing => true } 
    end 
end 

Answer 1

El problema parece que el enlace está ocurriendo antes de generar el elemento. Pruebe esto:

$(document).on('ajax:success', '.delete', function(e) { 
    $(e.currentTarget).closest('div').fadeOut(); 
}); 

Answer 2

Tuve el mismo problema, porque mi método de controlador de formulario devolvió una cadena simple. Asegúrese de procesar algo que jQuery puede procesar:

def handle_form 
    ... 
    render :json => {:what => 'ever'} 
    # or 
    render :nothing => true 
end 

Answer 3

He hecho cosas similares recientemente con Rails 3.2.3. También uso

$('#dialog-form').bind('ajax:success', function() { 
}) 

y funciona bien ...

Answer 4

Comprobar si se obtiene un error de análisis (o similar) por la captura de ajax:completed. Compruebe el argumento status allí. En mi caso fue un parseerror debido a un error de tipo mimet.

También puede establecer un punto de interrupción en jquery_ujs.js.

Ver también esta pregunta jQuery ajax request not triggering JS response

Answer 5

A pesar de que esta es una cuestión de edad, tengo una respuesta actualizada por lo que resulta ser la misma cuestión.

A partir de la versión 1.9, jQuery ya no considerará una respuesta vacía (no renderizar nada: verdadero) como un éxito/hecho.Esto significa que en su controlador debe devolver un objeto JSON vacío en su lugar.

respond_to do |format| format.json { render: {}.to_json } end

Answer 6

Para mí es porque estamos usando delgado, y las plantillas son 'name.slim'. si los cambiamos a 'nombre.slim.html', el ajax: éxito se dispara correctamente.

La solución que estoy usando es agregar el formato a la declaración de procesamiento en el controlador.

así que tenemos algo como esto:

render :new, layout: false, formats: [:html] 

Answer 7

Incluso Es una vieja pregunta, ninguna de las respuestas realmente me ayudó, ya que tenía un cuadro de diálogo de confirmación personalizada y el Ajax: éxito fue provocando en total elemento diferente

el fin de encontrar qué elemento se trigered por el Ajax en tal caso, primero se puede utilizar código:

$(document).on('ajax:success', 'a', function(evt, data, status, xhr) { 
    $(".log").text("Triggered ajaxComplete handler."); 
    // Check what is the value of $(this), and you will see what button has triggered the ajax success action, and you can start from there 
});