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

Question

J'ai récemment été informé que mon application de panier d'achat ne fonctionne pas lorsqu'elle est affichée dans Mobile Safari (iPhone, iPod Touch). Les formulaires d'ajout au panier utilisent l'approche de l'"amélioration progressive" pour prendre en charge les mises à jour AJAX à l'aide de jQuery. Quelques tests rapides ont montré que la fonctionnalité fonctionne effectivement avec JavaScript désactivé. Tout ce que j'ai lu jusqu'à présent indique que l'iPhone ne prend pas en charge l'événement "form.onsubmit", auquel je me lie actuellement avec jQuery pour lancer la transaction AJAX.

Puis-je apporter des modifications pour ajouter le support iPhone sans faire de la détection de navigateur, ou servir des scripts alternatifs ?

Le modèle de formulaire actuel :

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

Et l'événement script :

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

J'ai eu beaucoup de succès avec cela en termes de support des navigateurs (la plupart des navigateurs supportent AJAX/JavaScript, mais tous les autres - à l'exception de l'iPhone - reviennent à la soumission de formulaire ordinaire, etc. etc.) J'aimerais supporter la fonction AJAX dans l'iPhone, mais je me contenterai de contourner le JavaScript. En l'état, l'iPhone fait simplement rien en cliquant sur le bouton d'envoi.

Answer 1

Justin,

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

Si vous utilisez ajaxSubmit() alors oui, vous devez le faire manuellement, en gérant l'événement de clic du bouton submit et en appelant la méthode. Essayez d'utiliser ajaxForm() les plugins font tout le travail nécessaire pour vous. Chaque fois que le formulaire est soumis, les plugins le gèrent automatiquement, de sorte que vous n'avez pas à gérer l'événement de clic du bouton submit par vous-même.

Si vous pensez que le code de ce plugin est lourd, qu'en pensez-vous ? Ce plugin peut gérer tout type de formulaire standard, voir le test. aquí . Il fonctionne mieux que les 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, telles que : formSerialize()

Answer 2

J'ai utilisé le plugin jquery forms ( http://jquery.malsup.com/form/ ) sur l'iphone en utilisant le ajaxSubmit et cela a bien fonctionné :

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

Answer 3

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 submit.