¿Cómo obtener datos de un request post desde JqueryMobile?

Seguro que a más de uno le ha pasado el problema de enviar datos tipo POST a una página esperando que retorne la data ya ejecutada después del post. A mí me pasó y no encontraba una solución posible y sencilla, así que me leí casi la documentación completa de JqueryMobile y encontrarme con algo como esto (Resumo un poco): http://jquerymobile.com/demos/1.1.0/docs/pages/page-dynamic.html Internally, when the user clicks on one of these links, the application intercepts the internal$.mobile.changePage() call that is invoked by the frameworks’ default link hijacking behavior. It then analyzes the URL for the page about to be loaded, and then decides whether or not it should handle the loading itself, or to let the normal changePage() code handle things. The application was able to insert itself into the changePage() flow by binding to the pagebeforechange event at the document level:

// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {
// We only want to handle changePage() calls where the caller is
 // asking us to load a page by URL.
 if ( typeof data.toPage === "string" ) {
// We are being asked to load a page by URL, but we only
 // want to handle URLs that request the data for a specific
 // category.
 var u = $.mobile.path.parseUrl( data.toPage ),
 re = /^#category-item/;
if ( u.hash.search(re) !== -1 ) {
// We're being asked to display the items for a specific category.
 // Call our internal method that builds the content for the category
 // on the fly based on our in-memory category data structure.
 showCategory( u, data.options );
// Make sure to tell changePage() we've handled this call so it doesn't
 // have to do anything.
 e.preventDefault();
 }
 }
});

Pues vayamos a lo que nos concierne y nos ayudará, gracias a eso claro.

Este será el código javascript:

// Listen for any attempts to call changePage(). 
$(document).bind("pagebeforechange", function(e, data) { 
	// We only want to handle changePage() calls where the caller is asking to load a page by URL. 
	if (typeof data.toPage === "string") { 
		// We only want to handle #partypoint url. 
		var u = $.mobile.path.parseUrl(data.toPage); 
		var partypoint = /^#partypoint/; 
		if (u.hash.search(partypoint) !== -1) { 
			// Display PAGE for the selected URL. 
			showPage(u, data.options); 
			e.preventDefault(); 
		} 
	} 
}); 

// Generate markup for the page, and then make that page the current active page. 
function showPage(urlObj, options) { 
	// Get the url parameter 
	var qrUrl = decodeURIComponent(urlObj.hash.replace(/.*url=/, ""));   
	// The div(role-page) we use to display section is already in the DOM. 
	// The id of the page we are going to write the content into is specified in the hash before the '?'. 
	var pageSelector = urlObj.hash.replace(/\?.*$/, ""); 
	if (qrUrl) { 
		// Get the page we are going to write content into. 
		var $page = $(pageSelector); 
		// Get the header for the page. 
		var $header = $page.children(":jqmData(role=header)"); 
		var markup = ''; 
		//Select the data send to the post page (if you have it)
		var Datasend=$("#formulario").serialize(); 
		$.ajax({ 
			url : qrUrl, 
			data : Datasend, 
			type : 'POST', 
			dataType : 'json', 
			success : function (data) { 
// Find the h1 element in the header and inject the hostname from the url. 
				$header.find("h1").html(data.Title); 
				// Get the content area element for the page. 
				var $content = $page.children(":jqmData(role=content)"); 
				markup = data.Data; 
				// Inject the data markup into the content element. 
				$content.html(markup); 
				// Make sure(if you want) the url displayed in the the browser's location field includes parameters 
				options.dataUrl = urlObj.href; 
				// Now call changePage() and tell it to switch to the page we just modified. 
				$.mobile.changePage($page, options); 
			}, 
			error : function (jqXHR, textStatus, errorThrown) { 
				/*Make your error message*/ 
			} 
		}); //Close Ajax 
	} // Close qrUrl 
}//Close Function

Creamos la pantalla principal(index.html, por ejemplo):

Vamos a poner, como principal, un formulario, más abajo se explica, además tendremos que poner la sección donde se cargará el resultado:

<div data-role="page" class=".ui-page">
    <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Party Point</h1>
    </div>

    <div data-role="content" class="wrapper">
        <div class="ui-corner-top ui-header ui-bar-b">
            <h1 class="ui-title" role="heading" aria-level="1">Login</h1>
        </div>
        <div class="ui-corner-bottom ui-content ui-body-c">
            <fieldset class="container_12">
                    <form action="#partypoint?url=inc%2Flogin.php" method="post" id="formulario" name="formulario">
                        <input type="hidden" id="Accion" name="Accion" value="Login">
                        <div data-role="fieldcontain">
                            <label for="Username">Usuario:</label>
                            <input type="text" name="Username" id="Username" value=""  data-mini="true" />
                        </div>
                        <div data-role="fieldcontain">
                            <label for="ClaveUser">Clave:</label>
                            <input type="password" name="ClaveUser" id="ClaveUser" value=""  data-mini="true" />
                        </div>
                        <div class="ui-block-a">
                            <button type="submit" data-theme="b" data-mini="true" class="ui-btn-hidden" aria-disabled="false">Enviar</button>
                        </div>
                        <div class="ui-block-b">
                            <a href="#partypoint?url=inc%2Fregistrar.inc" data-role="button" data-rel="dialog" data-transition="pop" data-theme="b"  data-mini="true">Registrarse</a>
                        </div>
                    </form>
            </fieldset>
        </div>
    </div>
</div>

Aquí vemos que el formulario enviará el dato a esta url:

#partypoint?url=inc%2Flogin.php
Tenemos varios datos que tomar en cuenta:

1. #partypoint -> El Id de la sección donde irá la data que enviamos por ajax
2. url= -> Indica lo que vamos a cargar
3. inc%2FLogin.php -> Este es el archivo a cargar (inc/Login.php), se pone %2F para que lo interprete el script de arriba.

<div data-role="page" id="partypoint">
    <div data-role="header" data-theme="b" data-position="fixed">
        <a href="#home" data-icon="home" data-iconpos="notext" data-theme="f">Home</a>
        <h1>Home</h1>
        <a href="#home" data-icon="arrow-l" data-rel="back">Back</a>
    </div>
    <div data-role="content">
    </div>
    <div data-role="footer" class="ui-bar" data-theme="a" data-position="fixed" data-id="footer">
        <a href="#about" data-icon="info">About</a>
    </div>
</div>

Aquí vemos lo siguiente:

1. id=”partypoint” -> El Id de la sección a editar a través del ajax.
2. <h1>= -> Donde cargaremos el Título del ajax obtenido
3. data-role=”content”-> Aquí cargaremos el contenido obtenido.

Veamos lo que hace ahora la ejecución del formulario, presionamos Submit(Enviar):

1. El Script verificará si la data enviada tiene a #partypoint en su URL.
   •  #partypoint?url=inc%2Flogin.php
2. Como lo contiene pues pasará por la función showPage().
3. La función buscará el url.
   • inc%2Flogin.php
4. Buscamos el ID de la sección (data-role=”page”  id=”¿?”)
   • pageSelector=partypoint
5. Convertimos a objeto el pageSelector y obtenemos el objeto header
   • var $page = $(pageSelector);
   • var $header = $page.children(“:jqmData(role=header)”);
6. Serializamos la data del formulario
   • var Datasend=$(“#formulario”).serialize();
7. Envíamos la data y recibimos el json
8. Modificamos el título
   • $header.find(“h1″).html(data.Title);
9. Buscamos la sección content y agregamos la data recibida
   • var $content = $page.children(“:jqmData(role=content)”);
   • $content.html(markup);
10. Hacemos el cambio de página, como si hicieramos click pero lo hacemos por javascript:
    • $.mobile.changePage($page, options);

Yo recomendaría agregar esta línea de código justo después del cambio de página:

$page.page(“destroy”).page();

Esto destruirá todo el diseño de la sección y lo volverá a crear. Esto lo hacemos porqué a veces si le das para atrás y ejecutas nuevamente una llamada ajax para rellenar la data pues esa “page” ya estará creada y no se recargará y la data que venga dentro no estará formateada visualmente, si destruyes la página y la vuelves a crear todo el diseño se recreará.

Se puede usar también $page.trigger(‘create’) ; Pero he visto que a veces no me funciona, o quizás lo esté haciendo mal, pero mejor ir a la lo seguro y que funciona perfectamente.

Aquí está el ejemplo, pero no está la página de Login.php, por si acaso:

http://jsfiddle.net/juanmboehme/bcvrc/