from - send submit form jquery

jQuery carga el contenido de relad en div a través del formulario submit in div

Question

Estoy trabajando en un sistema de mensajería. He terminado la bandeja de entrada y las partes de visualización de mensajes. Se cargan en un div en la página de la cuenta de usuario y todo funciona sin actualizar la página.

Basé el jquery para esto en este artículo .

Recibí ayuda aquí para obtener los enlaces del mensaje para abrir el mensaje dentro del div sin actualizar la página, y cómo agregar un filtro para permitir que los enlaces del perfil realmente se actualicen y vayan a la página del perfil real. Eso está bien.

Pasé al lado de envío de mensajes que usa un modal (twitter bootstrap) para cargar el formulario externo. Eso también funciona, pero ahora he pasado años tratando de encontrar la forma de hacer lo mismo que hice con los enlaces, con el formulario enviado, es decir, conseguir que se envíe sin actualizar toda la página. De nuevo, estoy usando prácticamente la misma jQuery que en la parte de la bandeja de entrada.

Aquí está el código de la bandeja de entrada:

<p id="waiting"><!-- ajax loading --></p>
<div class="messages"><!-- inbox --></div>

Javascript:

$.ajaxSetup({ cache: false});
$(document).ready(function(){
    // set up the click event
    $(''a.loader'').live(''click'', function() {
        var toLoad = ''<? echo base_url(); ?>user/messaging/'';
        $(''.messages'').fadeOut(100, loadContent);
        $(''#load'').remove();
        $(''#waiting'').append(''<div id="load" style="height: 700px; background:url(<? echo base_url(); ?>files/recordCovers/index.html?<? echo rand(5,1555); ?>); background-size: cover;"><div class="circle"></div><div class="circle1"></div></div>'');
        $(''#load'').fadeOut(1000);

        function loadContent() {
            $(''.messages'').load(toLoad, '''', function(response, status, xhr) {
                if (status == ''error'') {
                    var msg = "Sorry but there was an error: ";
                    $(".messages").html(msg + xhr.status + " " + xhr.statusText);
                }            
            }).fadeIn(4000, hideLoader());
        }
        function hideLoader() {
            $(''#load'').fadeOut(2000);
        }
        return false;
    });
});

<? // this makes the links open in the same div
// a:not(.profile) allows profile links to open in browser window
// we put class="profile" on profile links.?>
$(".messages").on("click", "a:not(.profile)", function (e) {
    $(".messages").load($(this).attr("href"));
    e.preventDefault();
});

Answer 1

Si desea mantener un formulario normal y simplemente capturar el evento de envío, puede hacer algo como esto:

http://jsfiddle.net/ufomammut66/uPvYx/2/

Básicamente, al enviar ese formulario vamos a ejecutar una función en lugar de enviarlo de inmediato. Enviamos una llamada ajax (enviando los datos de su formulario) y luego return false . Si devuelve falso impedirá que la página envíe el formulario (en este punto lo volvería a enviar ya que solo lo enviamos con ajax). Entonces puede hacer toda su lógica, su llamada ajax, cualquier verificación / procesamiento adicional y luego devolver falso para detener el envío.

Agregué un poco más allí en caso de que quiera tener algún error de recuperación o condiciones que rodeen el uso del envío de Ajax. Si devuelve true en lugar de falso, la página continuará con el envío del formulario y redirigirá a esa página. Entonces, si tienes un modo para deshabilitar la presentación de ajax, puedes usarlo aquí. Puse un cheque sin sentido allí como una prueba de concepto. Puedes jugar con ese control para ver si funciona.

Answer 2

Supongo que te ayudará:

function submit()
{
 $.ajax({
      type:''POST'',
      url: "your url to submit",
      data: ({param_1:somevar}),    
      dataType:"json",  
      beforeSend: function(){ //do something here }
          success: function(return){ //do something here }
 });
}

Y no coloque ningún botón de envío. Puede llamar a la función de envío con:

$(''#button'').click(function(){
        submit(somevalue);  
      });