Bien le bonjour, j'ai crée un formulaire de recherche en AJAX avec Jquery, et je ne comprend pas pourquoi , mais depuis tout à l'heure, il ne fonctionne plus... Ce que je veux dire par la, c'est qu'il agit comme un formulaire en HTML normal et change donc de page alors qu'il ne devrait pas selon le code JS qui, avant ce matin, fonctionnait !
Que s'est il passé ?
Le formulaire :
<form action="" method="POST" id="search">
<fieldset>
<legend>Cherchez une voiture</legend>
<p><select name="depart" id="depart">
<option value="0">-- Vous habitez à --</option>
<option value="avirons">Les Avirons</option>
<option value="Bras-Panon">Bras-Panon</option>
<option value="Entre-deux">Entre-deux</option>
<option value="Le Port">Le Port</option>
<option value="La Possession">La Possession</option>
<option value="Plateau-Caillou">Plateau-Caillou</option>
<option value="Saint-André">Saint-André</option>
<option value="Saint-Benoit">Saint-Benoit</option>
<option value="Saint-Denis">Saint-Denis</option>
<option value="Sainte-Marie">Sainte-Marie</option>
<option value="Saint-Joseph">Saint-Joseph</option>
<option value="Saint-Leu">Saint-Leu</option>
<option value="Saint-Louis">Saint-Louis</option>
<option value="Saint-Paul">Saint-Paul</option>
<option value="Saint-Pierre">Saint-Pierre</option>
</select></p>
<p><select name="destination" id="destination">
<option value="0">-- Votre direction --</option>
<option value="ouest">Ouest</option>
<option value="nord">Nord</option>
<option value="sud">Sud</option>
</select></p>
<p><select name="participation" id="participation">
<option value="0">-- Participation proposée --</option>
<option value="2">2€</option>
<option value="3">3€</option>
<option value="4">4€</option>
<option value="5">5€</option>
<option value="6">6€</option>
<option value="7">7€</option>
<option value="8">8€</option>
<option value="9">9€</option>
<option value="10">10€</option>
</select></p>
<p><input type="text" id="datepicker" name="date" placeholder="Date du covoiturage"></p>
<hr>
<input type="submit" value="Chercher" class="success button expand" name="submit">
</fieldset>
</form>Le code JS :
$('#search').submit(function(event) {
$("#loader").show();
event.preventDefault();
$("#search").slideUp();
$.post("search_offres.php",{depart : $('#depart').val(), destination : $("#destination").val(), participation = $("#participation").val()}, function(data){
$("#loader").hide();
$("#result").html(data).slideDown();;
}); // POST
}); // Submit
6 réponses
Regarde ta console, elle te dis ou est le problème.
C'est simplement un = qui devrait etre un : dans ta fonction $.post():
participation = $("#participation").val()
// devrait etre:
participation : $("#participation").val()si tu mets le preventDefault() en tout premier dans ta fonction annonyme (après le show() ) ?
Non, toujours rien... Çà recharge la page :/
Pseudo : test
Mot de passe : test
Puis sur http://www.ralamoin.re/search
C'est normal, cherche en partant de Plateau-Caillou vers l'Ouest, tu verras :)
Je t'aiderais en revenant du boulot ce soir !
La question ne m'est pas adressée mais je vais quand meme te donner mon avis ^^
Ajax en soi, ce n'est pas compliqué a condition d'y aller avec un framework JS, jQuery par exemple.
Il y a 6 facon de faire un call avec jQuery, adaptés a différents cas de figure. Tu peux les voir ici:
http://code.tutsplus.com/tutorials/5-ways-to-make-ajax-calls-with-jquery--net-6289
Pour ta div, par exemple, une solution extra simple serait d'envoyer une requete ajax vers la meme page que la age courante (qui sera donc régénérée par le serveur), et de recharger le contenu de la div que tu veux modifier par le contenu de la meme div, mais la nouvelle version (chargée a l'instant depuis le serveur).
$("#divA").load("www.kiki.com/page.php #divA")Cette ligne de code dit simplement: load la div #divA depuis le serveur, et charge le contenu dans la div #divA de la page actuelle. Il suffit de mettre ca dans un setInterval() ou dans un click() pour le déclancher quand et comme tu veux.
La complexité peut ensuite venir de ta capacité a utiliser ce que l'ajax te retourne pour modifier ta page actuelle. L'exemple précédent est pas mal, mais seulement adapté au remplacement d'un élément du DOM par un autre, plus a jour (en fait ca pourrait etre n'importe quel element, meme une page entiere ... tu pourrais charger google.com dans une div, par exemple ...) ... rien de super excitant, donc.
Dans 99% des cas tu voudras récupérer de l'information pour modifier ton DOM, et pas simplement un autre morceau de DOM tout fait. Dans ce cas c'est souvent du json qu'il faudra générer depuis ton serveur (la fonction json_encode() de PHP sera utile), et coté client il faudra etre capable de parser ton json pour faire ce que tu veux, tout en JS ... Suivant ton niveau en JS, ce sera plus ou moins simple.
Par contre, et malgré le fait que je pense qu'il soit un peu trop extrémiste dans sa vision des choses ^^, Lartak te dirait qu'il ne faut pas en abuser ... et il a raison sur le fond (a mon avis, hein ? ... d'autres te diraient autre chose). Il y a ceux qui font un site tout ajax (fais un tour sur celui d'Alex-D, par exemple, qui est superbe de ce point de vu ...) et a moins de vraiment savoir ce que tu fais et de maîtriser a fond, je ne te le conseillerai pas.