2011-02-08 17 views
5

He decidido saltar al marco jQuery Mobile para un tema móvil habilitado para WordPress.jQuery Mobile y envío de formulario

Ahora me encuentro con la cuestión de enviar formularios con la etiqueta hash en la url y tratando de hacer la validación y publicación de AJAX. Básicamente no funciona.

ejemplo: website.com/contact/ < - funciona website.com/#/contact/ < - no funciona

Soy consciente de la etiqueta rel = "externa" para href de que eliminan la # de la url. Pero tengo entradas de blog con un complemento personalizado que representa formularios de suscripción que no podré usar rel = "external" para. Creo que podría usarlo para todos los enlaces, pero eso eliminaría las transiciones suaves.

¿Cuáles son mis opciones para intentar que esto funcione? Estoy intentando vincular el .submit al formulario, hacer una validación y luego ajax publicarlo.

Update--

<form id="myform" action="myfile.php" method="post"> 
<input type="text" id="mytext" name="mytext" /> 
<input type="submit" id="myform_submit" value="Submit"> 
</form> 

y mi guión:

jQuery(document).ready(function() { 
jQuery("#contact_submit").submit(function(){ 
     alert('WTF'); 
     }); 
}); 

cambió eso a:

<form id="myform" action="myfile.php" method="post"> 
<input type="text" id="mytext" name="mytext" /> 
<input type="button" id="myform_submit" value="Submit"> 
</form> 

y mi guión:

jQuery(document).ready(function() { 
jQuery("#contact_submit").click(function(){ 
     alert('WTF'); 
     }); 
}); 

Ambos no funcionan con el # en la url.

También he añadido esto antes del archivo jquery.mobile.js:

<script type="text/javascript"> 
jQuery(document).bind(
    "mobileinit", function(){ 
    jQuery.extend(jQuery.mobile, { ajaxFormsEnabled: false }); 
    }); 
</script> 

sigue sin ir.

(FYI el jQuery en lugar de $ es debido a WordPress)

actualización --another.

Dado que estoy usando Wordpress algunas de las funciones están actuando de forma extraña. Como is_home() No importa en qué 'página' estoy, la función vuelve a ser verdadera. Creo que esto tiene que ver con las llamadas ajax para cada página.

Respuesta

2

Puede desactivar la envoltura AJAX. Lea aquí: http://jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html

también - he visto algo acerca de los problemas con las barras, pero ahora no puedo encontrarlo, así que asegúrese de usar la versión de a3 JQM

[editar]

Este fue mencionado algunas veces antes, en algunos otros hilos. Si va a una página y JQM la carga con AJAX, solo se toma body Y NO se apaga el documento. Ya está listo el dominio;) (Me estoy citando aquí)

+0

No estoy seguro si eso es todo. Cambié a y agregué un manejador de clic con solo una alerta. No ir con el # en la url. Sin eso es dinero. – jdruid

+0

No intentes jugar con el formulario. Deshabilitar AJAX debería funcionar. Puede intentar experimentar con las versiones: compare jqm alpha2 y alpha3 trabajando con eso (precaución: alpha2 tenía configuraciones diferentes) – naugtur

+0

Hmm. Quizás espere para usar jQuery hasta un lanzamiento más. Inhabilité el AJAX pero todavía no tuve suerte. Funciona bien sin el # en la url. Una vez que está ahí, no hay nada. Estoy asumiendo que esto es algo de seguridad integrado en el navegador web. :( – jdruid

7

No estoy del todo Asegúrese de llamar a la función jQuery.ready, pero la forma recomendada para registrar manejadores es vinculando al evento pagecreate para sus páginas específicas. Los eventos pagecreate deben manejarse por jQuery.ready en la primera página solamente.Hace poco construí un sitio usando jQuery mobile y encontré exactamente este problema. El siguiente código debe llegar a donde quiere estar:

jQuery(document).ready(function() { 
    $("#id_of_page").live('pagecreate', function() { 
     $("form").submit(function(event) { 
      event.stopPropagation(); 
      event.preventDefault(); 

      // Do stuff here (usually AJAX); 

      return false; 
     }); 
    }); 
}); 

Por desgracia, yo no experimentó suficiente para determinar si todo eso es necesario. Sé que esto funcionó para mí. Casi instintivamente agrego el return false a todos mis envíos de formularios manejados por AJAX. ¡Espero que esto ayude!

+1

FYI: probablemente desee 'pageinit' en lugar de' pagecreate' now (http://jquerymobile.com/demos/1.1.1/docs/api/events.html) –

Cuestiones relacionadas