Bonjour à tous,
Par avance, désolé si ce post n'est pas à sa place... Etant donné que mon problème concerne trois langages, je ne savais pas où placer mon topic...
Je développe un système de news en PHP, très simple :
- Une page d'affichage des news
- Une page d'administration où l'on peut ajouter, supprimer et modifier les news.
J'aimerais utiliser AJAX de manière à pouvoir ajouter, supprimer, modifier mes news sans rafraîchissement de la page. Classique me direz vous
J'utilise javascript et le framework JQuery pour simplifier les requêtes AJAX, étant donné que je ne maîtrise pas du tout ce langage. Je suis également débutant en JQuery mais le PHP ne me pose pas de problème.
Bref, venons en au problème. J'ai un formulaire d'ajout de news, on ne peut plus classique, trois champs : Date, Titre, Contenu. J'essaie de les ajouter dynamiquement. Ce formulaire est dans la page news.php. Le formulaire a pour cible news_ajax.php. Le soucis, c'est que mon code jQuery n'est pas du tout pris en compte.
Si je précise dans mon formulaire : action="news_ajax.php" method="POST",
le formulaire s'envoie classiquement et le navigateur me redirige vers "news_ajax.php". La page d'envoi fonctionne puisque dans ce cas, il y a bien ajout dans la base de données.
Si je ne précise pas ces attributs, les champs sont passés dans l'URL (en GET) et je suis redirigé vers index.php...
Voici le code utilisé :
Dans news.php, dans <body> :
Toujours dans news.php, le code du formulaire :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 echo'<script type="text/javascript"> $(document).ready(function(){ $("#addform").submit(function(){ $.ajax({ type:"POST", data: $(this).serialize(), url:"news_ajax.php", success: function(data){ $("#post").html(data); }, error: function(){ $("#post").html(\'Une erreur est survenue.\'); } }); return false; }); }); </script> ';
(Comme vous pouvez le voir, j'utilise Bootstrap et le formulaire est placé dans une boite de dialogue type "modal" - mais le mettre en dehors du modal ne change rien au problème).
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 echo'<div class="modal hide fade" id="nouvelleactu" tabindex="-1" role="dialog" aria-labelledby="nouvelleactu-label" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button> <h3 id="nouvelleactu-label">Ajout d\'une actualité</h3> </div> <div class="modal-body"><p> <form id="addform"> <legend>Le 22/11/2012</legend> <fieldset> <label>Date :</label> <input type="text" style="width:500px;" placeholder="Date du jour" name="date"> <label>Titre :</label> <input type="text" style="width:500px;" placeholder="Titre de l\'actualité" name="titre"> <label>Contenu :</label> <textarea style="width:500px;" name="contenu">Ce texte sera remplacé par un éditeur WYSIWYG...</textarea> </fieldset> <div id="post"></div> <p></p></div> <div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove-sign"></i> Annuler</button> <button class="btn btn-primary" type="submit"><i class="icon-save"></i> Enregistrer l\'actualité</button></div></form> ';
Code de traitement du formulaire (news_ajax.php) :
Je suis un peu désespéré... Désolé pour le long post.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 <?php include ("../includes/functions.inc.php"); //Contient la connexion mySQL $date = $_POST['date']; $titre = $_POST['titre']; $contenu = $_POST['contenu']; $addnews = $bdd->prepare('INSERT INTO adm_news(date,titre,contenu) VALUES(:date,:titre,:contenu)'); $addnews->execute(array( 'date' => $date, 'titre' => $titre, 'contenu' => $contenu )); $addnews->closeCursor(); ?>
Merci d'avance pour votre aide !
GunMan.
Partager