Bonjour,
J'essaye actuellement de développer un formulaire avec jQuery Mobile.
Le but de ce formulaire est d'ajouter un code à 4 chiffres (via un input texte), de soumettre ces chiffres à un petit script PHP et enfin de récupérer le résultat du PHP pour afficher une nouvelle ligne au sein de ma page. Le tout en Ajax. Exactement comme ici : demos.jquerymobile.com/1.2.0/docs/forms/forms-sample-selfsubmit.php
Pour l'exemple, voici ci-dessous le code simplifié.
Ma page avec le formulaire :
Le jQuery (dans <head>) :
Le php :
Mon problème est que lorsque je valide le formulaire, "jQuery Mobile" m'ajoute seulement une nouvelle "page". Une nouvelle DIV avec data-role="page" et data-url="ajout-produit.ajax.inc.php"...
Au lieu de m'ajouter le résultat du PHP...
Je patauge... J'ai fait pas mal d'essai. Le problème vient de ma compréhension du fonctionnement de jQuery Mobile.
J'espère avoir été clair.
Merci d'avance pour vos éclairages.
Fabien
Modifié par Fabito (08 Aug 2014 - 18:10)
J'essaye actuellement de développer un formulaire avec jQuery Mobile.
Le but de ce formulaire est d'ajouter un code à 4 chiffres (via un input texte), de soumettre ces chiffres à un petit script PHP et enfin de récupérer le résultat du PHP pour afficher une nouvelle ligne au sein de ma page. Le tout en Ajax. Exactement comme ici : demos.jquerymobile.com/1.2.0/docs/forms/forms-sample-selfsubmit.php
Pour l'exemple, voici ci-dessous le code simplifié.
Ma page avec le formulaire :
<div class="app" data-role="page" id="nouveau-caddie" data-url="nouveau-caddie" data-title="nouveau caddie" tabindex="0">
<div class="header" data-role="header">blablabla</div>
<div class="content" data-role="content">
<div class="englob-ajout-prod">
<form id="form-ajout-prod" action="ajout-produit.ajax.inc.php" method="post">
<input type="text" value="code" onblur="if(this.value == '') this.value = 'code'" onfocus="if(this.value == 'code') this.value = ''" name="code" id="code" maxlength="4"/>
<button class="submit-prod" name="submit" type="submit" value="ajouter">ajouter</button>
</form>
</div>
<div class="caddie-en-cours">
<h1>caddie du ...</h1>
<ul class="produits">
<!-- Ici les produits doivent s'ajouter après soumission et retour du formulaire -->
<li class="produit"><div class="nom">nom du produit</div><div class="action"> </div></li>
</ul>
</div>
</div>
<div class="footer" data-role="footer">blablabla</div>
</div>Le jQuery (dans <head>) :
<script>
$(document).ready(function() {
$('#form-ajout-prod').on('submit', function(e) {
e.preventDefault();
var $this = $(this);
var c = $('#code').val();
if(c === '') {
alert('blablabla');
} else {
$.ajax({
url: $this.attr('action'),
type: $this.attr('method'),
data: $this.serialize(),
success: function(html) {
$('.produits').append(html); //action en cas de succès : ajoute une ligne
}
});
}
});
});
</script>Le php :
$c = $_POST['code'];
if($c == '' && is_numeric($c)) echo '<li class="produit"><div class="nom">'.$c.'</div><div class="action"> </div></li>';
else echo 'blablabla';Mon problème est que lorsque je valide le formulaire, "jQuery Mobile" m'ajoute seulement une nouvelle "page". Une nouvelle DIV avec data-role="page" et data-url="ajout-produit.ajax.inc.php"...
Au lieu de m'ajouter le résultat du PHP...
Je patauge... J'ai fait pas mal d'essai. Le problème vient de ma compréhension du fonctionnement de jQuery Mobile.
J'espère avoir été clair.
Merci d'avance pour vos éclairages.
Fabien
Modifié par Fabito (08 Aug 2014 - 18:10)
