IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Ajax, éditer le contenu d'une division


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Invité
    Invité(e)
    Par défaut Ajax, éditer le contenu d'une division
    Bonjour,

    Je réalise actuellement un système où les membres peuvent s'inscrire à une newsletter. J'ai pour cela 3 pages. Le système fonctionne avec jQuery et Ajax.

    Voila mes 3 pages :

    index.php, où le membre s'inscrit à la newsletter etc... :

    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
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    	<title>Sacre et damnation</title>
    	<link rel="stylesheet" type="text/css" href="style.css" />
    	<script type="text/javascript" src="js/jquery.js"></script>
    	<script type="text/javascript" src="js/tabs.js"></script>
    	<script type="text/javascript" src="js/newsletter.js"></script>
    </head>
     
    <body>
    <div id="contenu">
    	<div id="coming-soon">
    		<div id="tab-1">
    			<div id="logo" style="padding-top: 10px;"><img src="images/logo.png" alt="Jeu en ligne gratuit" /></div>
    			<div id="texte-bloc">
    				<p>
    					Sacre et Damnation vous intéresse et vous souhaitez être tenu au courant des dernières avancées et de la sortie de la version jouable de celui-ci ? N'hésitez pas à vous inscrire à la newsletter !
    				</p>				
    				<div id="newsletterForm">
    					<form method="post" action="#">		
    						<table>
    						<tr>
    							<td>
    								<label for="pseudo">Pseudo :</label> <input type="text" name="pseudo" id="pseudo" />
    								<br />
    								<label for="mail">Mail :</label> <input type="text" name="mail" id="mail" />
    								<input type="hidden" name="ip" id="ip" value="<?php echo $_SERVER["REMOTE_ADDR"]; ?>" />
    								<br />
    							</td>
    							<td>
    								<input type="submit" value="Inscription" />
    							</td>
    						</tr>
    						</table>
    					</form>
    				</div>
    				<div id="messageNewsletter" style="height: 20px;">
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    </body>
    </html>
    Le script js/newsletter.js qui appelle dynamiquement la page d'insertion dans la base de donnée :

    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
     
    var url="newsletter.php";
     
    $(function(){
        $("#newsletterForm form").submit(function(){
            var pseudo = $("#pseudo").val();
            var mail = $("#mail").val();
            var ip = $("#ip").val();
     
            $.post(url,{action:"enregistrer",pseudo:pseudo,mail:mail,ip:ip},function(enregistrer){
    			$("#messageNewsletter").empty().append(enregistrer.message);
    		});
     
            return false;
        })
    });
    Et newsletter.php qui ajoute les champs dans la base de donnée et génère les messages de succès ou d'erreur :

    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
    27
    28
    29
    30
    31
    32
    33
    <?php
    function newsletter($pseudo, $mail, $ip) {
    	$bdd = new PDO('mysql:host=localhost;dbname=sd_coming', 'root', '');
     
    	$bdd->exec("set names 'utf8'");
    	$bdd ->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
     
    	if(filter_var($mail, FILTER_VALIDATE_EMAIL) == TRUE) {
    		$retour = $bdd->prepare('SELECT COUNT(*) AS nb FROM newsletter WHERE mail_mail = :mail');
    		$retour->execute(array('mail' => $mail));
    		$donnees = $retour->fetch();
     
    		if($donnees['nb'] != 0) { // Le mail existe déjà
    			$reponse['message'] = '<span style="color: red;">Le mail existe déjà dans notre base de donnée.</span>';
    		}
    		else {
    			$enregistrer = $bdd->prepare('INSERT INTO newsletter VALUES("", :mail, :ip)');
    			$enregistrer->execute(array("mail" => $mail, "ip" => $ip));
     
    			$reponse['message'] = '<span style="color: green;">Le mail a été ajouté à base de donnée.</span>';
    		}
    	}
    	else {
    		$reponse['message'] = '<span style="color: red;">Vous devez entrer un mail valide.</span>';
    	}
     
    	return $reponse;
    }
     
    if($_POST['action'] == "enregistrer") {
    	$enregistrer = newsletter($_POST['pseudo'], $_POST['mail'], $_POST['ip']);
    }
    ?>
    L'insertion des emails dans la base de donnée marche sans problème, mais je n'arrive pas à afficher les messages d'erreur ou de succès dans le div "messageNewsletter" sur la page index.php :/

    Je fais donc appel à vous en espérant obtenir une solution

    Merci d'avance.

    PS : Notez que j'sais pas trop ce que j'fais avec la page newsletter.js, j'm'y connais que peu en JavaScript et c'est la 1ere fois que j'utilise Ajax :p

  2. #2
    Membre émérite
    Avatar de gwinyam
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2006
    Messages
    1 162
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Mai 2006
    Messages : 1 162
    Par défaut
    Essaie de tracer ce que tu récupères déjà avec ton appel Ajax (au passage Ajax, c'est une méthode propre à Javascript, pas un langage séparé ). En utilisant, par exemple Firebug pour Firefox, Webkit Inspector pour Chrome et Safari ou encore la debugBar pour IE.

    Ensuite, pour le cas où, je te mets la doc de $.post() : http://api.jquery.com/jQuery.post/

    A partir de là, je ne comprends pas pourquoi tu fais un return à la fin de ta fonction newsletter. A ta place, je mettrais un echo plutôt. Et surtout, je n'afficherai pas un tableau direct, mais je renverrai un contenu JSON (ne pas oublier de modifier les headers de la réponse).

    Puis après quand tu veux utiliser la partie "message" de ton paramètre "enregistrer", vu que c'est un tableau, fais plutôt l'appel enregistrer['message'], plutôt que enregistrer.message

    Ensuite, tiens nous au courant de la situation

Discussions similaires

  1. Animation des images contenues dans une division
    Par psychozx dans le forum jQuery
    Réponses: 4
    Dernier message: 31/05/2011, 23h05
  2. Fixation en hauteur du contenu d'une division
    Par Vivinonon dans le forum Mise en page CSS
    Réponses: 0
    Dernier message: 08/12/2010, 13h21
  3. Éditer le contenu d'une page html
    Par cilies38 dans le forum Général Conception Web
    Réponses: 5
    Dernier message: 10/05/2010, 15h54
  4. [MooTools] AJAX : récupérer le contenu d'une page web
    Par Galdon dans le forum Bibliothèques & Frameworks
    Réponses: 1
    Dernier message: 08/03/2010, 12h26
  5. Réponses: 3
    Dernier message: 02/02/2010, 23h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo