Enviando formularios con jQuery Mobile

Haciendo submit con formularios Ajax

En jQuery Mobile , los submit de formularios son automáticamente manejados utilizando Ajax cuando sea posible, creando una transición suave entre el formulario y la página de resultado. Para asegurar que tus submits de formulario son enganchados bien, asegurate de especificar las propiedades action y method dentro de la tag form. Cuando no sean especificadas, el método por defecto lo hará con get, y el action será por defecto un path relativo a la página actual (el que sale de $.mobile.path.get())

Los formularios también aceptan atributos para transiciones por ejemplo de los anchors (tales como data-transition=’pop’ y el data-direction=’reverse’). Para hacer submit de un formulario sin Ajax, se puede deshabilitar el Ajax form handling globalmente, o a través del atributo data-ajax=”false”. El  atributo target (como por ejemplo target=”_blank”) tambien es tenido en cuenta en los formularios, y por defecto ira al target que maneje el navegador por defecto. Observese que , a diferencia de los anchors , el atributo rel no es permitido en los formularios.

Ejemplo por defecto de un formulario Ajax

Aqui demostraremos como funciona el ajax handling de submits de formularios. El form siguiente se configura para enviar una peticion get a un forms-sample-response.php. En el submit, jQuery Mobile se asegura que la url especificada es capaz de ser recuperada via Ajax , y la gestiona apropiadamente. Manten en mente que como las peticiones submit de HTTP normales, jQuery Mobile te permite bajarte  paginas de resultado para ser añadidas a la hash de Urls cuando la respuesta es devuelta satisfactoriamente. También permite hacer submits normales de formularios, hacer request tipo post que no contengan query parametros en el hash, asi que ellos no sean añadidos al bookmark de la url hash.

			<form action="forms-sample-response.php" method="get" class="ui-body ui-body-a ui-corner-all">
				<fieldset>
					<div data-role="fieldcontain">
						<label for="shipping" class="select">Shipping method:</label>
						<select name="shipping" id="shipping">
							<option value="Standard shipping">Standard: 7 day</option>
							<option value="Rush shipping">Rush: 3 days</option>
							<option value="Express shipping">Express: next day</option>
							<option value="Overnight shipping">Overnight</option>
						</select>
					</div>
					<button type="submit" data-theme="b" name="submit" value="submit-value">Submit</button>
				</fieldset>
			</form>
Ejemplos de formularios No-Ajax

Para prevenir que los submit de formularios sean automaticamente manejadas via Ajax, tan solo debemos añadir el data-ajax=”false” en el elemento form. También se puede hacer con la opción global ajaxEnabled.

El formulario siguiente es identico al de arriba excepto porque hemos añadido el atributo data-ajax=”false”. Cuando el botón de submit es presionado, el resultado es el refresco de la pagina completa.

			<form action="forms-sample-response.php" method="get" data-ajax="false">
				<fieldset>
					<div data-role="fieldcontain">
						<label for="shipping">Shipping method:</label>
						<select name="shipping" id="shipping">
							<option value="Standard shipping">Standard: 7 day</option>
							<option value="Rush shipping">Rush: 3 days</option>
							<option value="Express shipping">Express: next day</option>
							<option value="Overnight shipping">Overnight</option>
						</select>
					</div>
					<button type="submit" data-theme="b" name="submit" value="submit-value">Submit</button>
				</fieldset>
			</form>

Formularios auto submitting

Como si fueran HTML ordinario, puede también hacer submit de formularios a la misma URL que estas actualmente visualizando configurando para ello el atributo action del form a la URL, Esta página lo demuestra:

		<form action="forms-sample-selfsubmit.php" method="post">

			<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
			    <legend>Testing</legend>
			    <div>
			    				        <input type="radio" name="gender" value="m" id="gender-1"  /><label for="gender-1">Male</label>
			        <input type="radio" name="gender" value="f" id="gender-2"  /><label for="gender-2">Female</label>
			    </div>
			</fieldset>

			<button type="submit">Submit</submit>
	</form>

Cuando se hace una request post haciendo submit a una pagina que ya está en el DOM, la URL de respuesta será identica a la de la pagina existente, ya que los metodos post no deben llevar parametros query string en la URL. En esta situación, jQuery Mobile reemplazará la página desde donde sea hace el submit por la pagina resultado cogiendo el body de la respuesta y encasquetandosela al page que ya hay en el DOM.