2011-11-04 8 views
6

Sto tentando di inviare un semplice modulo di accesso tramite ajax su un sito jQuery Mobile ma ho problemi.Invio modulo AJAX in jQuery Mobile

Sembra che quando invio il modulo (tramite POST), i parametri del modulo vengano aggiunti all'URL. Non solo, cancellano la pagina ancorata che ero prima dell'invio della forma.

Per esempio, io sono a pagina localhost:8080/myapp/#sign_up

Poi mi inviate il formulario che causa l'url di diventare: localhost:8080/myapp/[email protected]&pass=pass

Quindi, se ho colpito gli errori di convalida e fare clic su un pulsante 'Indietro', I don' t tornare alla pagina #sign_up.

Qualche idea?

risposta

15

Se si gestisce modulo di presentazione con un gestore di eventi personalizzato submit è possibile gestire la convalida sulla stessa pagina:

//bind an event handler to the submit event for your login form 
$(document).on('submit', '#form_id', function (e) { 

    //cache the form element for use in this function 
    var $this = $(this); 

    //prevent the default submission of the form 
    e.preventDefault(); 

    //run an AJAX post request to your server-side script, $this.serialize() is the data from your form being added to the request 
    $.post($this.attr('action'), $this.serialize(), function (responseData) { 

     //in here you can analyze the output from your server-side script (responseData) and validate the user's login without leaving the page 
    }); 
}); 

Per interrompere jQuery Mobile di correre la propria AJAX sumbission del modulo messo sul vostro tag form :

<form data-ajax="false" action="..."> 
+2

Qualsiasi commento sul voto negativo sarebbe apprezzato. Mi piacerebbe sapere cosa sto facendo male :) – Jasper

+0

così vorrei ;-) l'unica cosa forse è che "live" ora è deprecato e dovresti usare "on". forse anche "on/off" in sequenza per prevenire eventi duplicati: http://stackoverflow.com/questions/9067259/ –

0

Se si vuole inviare un modulo e non utilizzare Ajax (che è di default) è necessario aggiungere 'data-ajax = "false"' alla stringa di forma:

<form data-ajax="false" action="test.php" method="POST"> 
+0

Questa è una parte della risposta sopra, se ti chiedo perché lo hai ri-postato? – Jasper

3

La soluzione di Jaspers sopra ha funzionato per me! L'unica cosa che dovevo aggiustare era la sostituzione di .live con .submit (.live ora è deprecato). Così ora è così:

$('#form_id').submit(function (e) { 

    //cache the form element for use in this function 
    var $this = $(this); 

    //prevent the default submission of the form 
    e.preventDefault(); 

    //run an AJAX post request to your server-side script, $this.serialize() is the data from your form being added to the request 
    $.post($this.attr('action'), $this.serialize(), function (responseData) { 

     //in here you can analyze the output from your server-side script (responseData) and validate the user's login without leaving the page 
    }); 
}); 
+0

Una nota su questo, se il modulo viene inserito nel DOM come una pagina esterna, questo deve essere eseguito dopo che si è verificato. Ecco perché suggerirei di utilizzare un gestore di eventi delegato, in modo che il gestore di eventi catturi l'evento anche se il modulo viene aggiunto al DOM dopo il caricamento iniziale della pagina. – Jasper