Hay alguna forma de enviar el formulario al servidor para una respuesta de AJAX sin necesidad de recargar la página. Yo soy capaz de hacer esto con botón de enviar. Pero, ¿cómo puedo hacer que al hacer clic en un enlace.

Vine a saber acerca de un método javascript para hacer esto,

var form = document.getElementById('myForm');
form.submit();

Pero el código anterior se vuelve a cargar la página. Llegué a saber que podemos hacer esto con jquery pero, ¿cómo?

Por favor, tenga en cuenta que estoy desarrollando mi aplicación en Ruby on Rails 3.0.4 y estoy usando rails AJAX como este.

<%= form_for @search, :remote => true, :url => request_path, :html => {:method => :get, :id => :my_form} do |f| %>

Cualquier ayuda se agradece.

  • Tal vez debería poner el event.preventDefault(); instrucción en el controlador de envío para impedir por defecto la página de actualización.

5 Comentarios

  1. 10

    Puede utilizar el preventDefault() método de event objeto :

    $('#myForm').submit(function(event){
       event.preventDefault(); 
       $.ajax({
         ...
       });
    })

    Si se llama a este método, la acción predeterminada del evento no se activa.

  2. 3

    Puede utilizar .post() a hacer un ajax post.

    Tomado de la documentación:

    $.ajax({
      type: 'POST',
      url: url,
      data: data,
      success: success,
      dataType: dataType
    });

    Usted podría también utilizar .submit()

    Tomado de la documentación:

    $('#target').submit(function() {
      alert('Handler for .submit() called.');
      return false;
    });

    Ahora cuando el formulario es enviado, el mensaje es alertado. Esto sucede
    antes de la presentación de reales, por lo que podemos cancelar la acción de enviar por
    llamamiento .preventDefault() en el objeto de evento o devolviendo false
    desde nuestro controlador.

    Se pueden combinar los 2, como se muestra por Raminson:

    $('#target').submit(function() {
        .preventDefault()
        $.ajax({
            type: 'POST',
            url: url,
            data: data,
            success: success,
            dataType: dataType
        });
    });
    • Su segunda opción es perfecta para mí. Me acaba de escribir una parte de su siempre la solución, es decir, '$('#target').submit(); no sé cómo, pero sólo funcionaba para mí de la manera que quería. No es necesario llamar .preventDefault().
  3. 2

    Sé que soy un poco tarde a la fiesta, como una alternativa a las anteriores respuestas, se podría utilizar el jQuery en Forma de plugin para fácil ajax formulario de actualización.

    Si usted utiliza, la versión más simple de su código JS tendría este aspecto.

    $('#myform').ajaxForm(function() { 
      success: alert('success');
    });

    Hay muchas más opciones que puede utilizar para configurar cómo te gusta.
    La url a la que enviar el formulario es el mismo que el action atributo de su forma.

    Esto también puede ser cambiado.

    De mi exprecience no necesita preventDefault() la presenta, lo hace para usted.

    De todos modos, esta es otra alternativa a tu problema, si le resulta conveniente.

  4. 1

    Si el problema es su recarga de página con el formulario.submit() try:

    var form = document.getElementById('myForm');
    form.submit(function(e){
    
        e.preventDefault();
    
        //an ajax post as in François Wahl answer
    
    });
  5. -1

    Yo tengo trabajo por sólo usando este código. No hay necesidad de definir una función dentro de presentar.

    $('#myform').submit();
    • La respuesta correcta es la de François Wahl, esto es simplemente incorrecto y la verificación verde es engañosa. Se puede mover a la casilla verde?

Dejar respuesta

Please enter your comment!
Please enter your name here