Comment rendre un formulaire AJAX existant compatible avec l'iPhone?

Question

J'ai récemment été informé que mon application de panier d'achat se casse dans Mobile Safari (iPhone, iPod Touch). Les formulaires "Ajouter au panier" utilisent l'approche "Amélioration progressive" pour prendre en charge les mises à jour AJAX à l'aide de jQuery. Quelques tests rapides ont montré que la fonctionnalité fonctionne en effet avec JavaScript désactivé. Tout ce que j'ai lu jusqu'ici indique que l'iPhone ne prend pas en charge l'événement "form.onsubmit", ce que je suis en train de faire avec jQuery pour initier la transaction AJAX. Puis-je effectuer des modifications pour ajouter la prise en charge de l'iPhone sans en effectuant une détection de navigateur ou en servant d'autres scripts?

La forme actuelle modèle:

<form method="post" action="" class="my-cart"> 
    <fieldset> 
     ... 
     <input type="submit" name="my-button" value="add to cart" /> 
    </fieldset> 
</form>

Et l'événement de script:

$('form.my-cart').submit(function(){ 
    ... 
});

J'ai eu beaucoup de succès avec ce en termes de soutien du navigateur (la plupart des navigateurs prennent en charge l'AJAX/JavaScript, mais tout d'autres - à l'exception de l'iPhone - vont revenir à la soumission régulière de formulaire, etc .. etc ..). Je voudrais soutenir la fonction AJAX dans l'iPhone, mais je vais me contenter de contourner le JavaScript. Tel quel, l'iPhone fait simplement rien en cliquant sur le bouton Soumettre.

Answer 1

Merci aux deux intervenants. Le problème s'est avéré être un conflit avec un autre code partiellement lié. Le formulaire lui-même fonctionnait, mais l'événement n'était pas appelé parce que le code susmentionné empêchait en quelque sorte le déclenchement de l'événement de soumission.

Answer 2

Je l'ai utilisé le plugin formes jquery (http://jquery.malsup.com/form/) sur l'iPhone en utilisant la fonction ajaxSubmit et il a très bien fonctionné:

$('form.my-cart').ajaxSubmit(function(){ 
    ... 
}); 

Answer 3

Justin,

Vous pouvez vérifier les derniers plugins de Malsup dans here. Vous pouvez voir l'exemple sur la façon de lier le formulaire à ce plugins. Il y a 2 façons de le faire, soit en utilisant ajaxSubmit(), ou le simple ajaxForm().

Si vous utilisez ajaxSubmit(), alors oui, vous devez le faire manuellement, gérer l'événement de clic sur le bouton Soumettre et appeler la méthode. Essayez d'utiliser ajaxForm(), les plugins font tout le nécessaire pour vous. Chaque fois que le formulaire est soumis, les plugins le gèrent automatiquement, vous n'avez donc pas besoin de gérer vous-même l'événement click click.

Si vous pensez que ce code plugins lourd, qu'est-ce que vous en pensez? Ces plugins peuvent gérer tout type de formulaire standard, voir le test here. Cela fonctionne mieux que d'autres plugins pour gérer différents types de champs de formulaire. Les plugins fournissent également diverses méthodes pour obtenir la valeur du champ, tels que: formSerialize()