Discussion :

[Warno]

Bonjour à tous !

Je viens vers vous car malgré des recherches sur le net, je ne trouve pas de solution au problème que j'ai.
Ce que je voudrais faire : un formulaire d'inscription, affiché via FancyBox ( petit module dont toute la doc se trouve là ) qui puisse envoyer une requête AJAX pour vérifier la disponibilité d'un pseudo et la validité d'un mail, et ensuite afficher le résultat de cette requête dans ce formulaire.

Ce que j'ai réussi à faire :
- Afficher le formulaire via FancyBox, sans AJAX qui marche
- Effectuer la requête AJAX et l'affichage du message de retour quand le formulaire est présent sur la page au départ (donc sans affichage FancyBox)

Par contre, je bloque sur la façon dont je pourrais faire les deux à la fois.
J'ai essayé d'appeler mon formulaire via FancyBox de différentes façon ( par AJAX ou par simple affichage d'une DIV ), mais rien n'y fait : le code Jquery ne semble pas actif dans le formulaire lorsque celui-ci est affiché via FancyBox...

Merci de votre aide,

Arnaud.

P.S : à priori, les deux choses devraient être compatible, puisque FancyBox est basé sur Jquery

[danielhagnoul]

Bonjour.

Je n'ai pas le temps d'explorer le problème dans le détail, mais je pense qu'il s'agit de fragment de code (FancyBox) créé lors de l'ouverture de la page. Dans ce cas il faut passer par live pour arriver à interagir, voir : http://docs.jquery.com/Events/live#typefn

[Warno]

Merci beaucoup pour ce lien !

J'ai progressé pas mal, dans le sens où j'arrive maintenant à déclencher ma requête AJAX lorsque le formulaire est affiché avec FancyBox.
Par contre, je n'arrive pas à modifier le contenu de mon formulaire en fonction du résulat de la requête AJAX.

Voici un bout de code qui marche :

Code jQuery :

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
 
$(document).ready(function(){ 
 
 $("#inscriptionSubmit").live("click",function()
{        
        $.post("traitementInscription.php",{ login:$('#nom').val(),prenom:$('#prenom').val(),password:$('#password').val(),mail:$('#mail').val(),portable:$('#portable').val() } ,function(data)
        {
 
          alert(data);
 
       });
 
       return false;
});
 
});

Par contre, si je veux modifier le contenu d'un paragraphe de mon formulaire, ça ne marche plus :

Code jQuery :

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
 
$(document).ready(function(){ 
 
 $("#inscriptionSubmit").live("click",function()
{        
        $.post("traitementInscription.php",{ login:$('#nom').val(),prenom:$('#prenom').val(),password:$('#password').val(),mail:$('#mail').val(),portable:$('#portable').val() } ,function(data)
        {
 
          $("inscriptionMessage").text(data);
 
       });
 
       return false;
});
 
});

Merci encore de votre aide,

Arnaud.

[danielhagnoul]

Bonsoir.

Pour le $. post (), je ne sais pas si cela pourra vous aider, mais jeter un œil sur : http://www.developpez.net/forums/d77...y/#post4481433

[Warno]

Bonsoir,

A priori, je ne pense pas que le problème vienne du $.post, puisque lorsque je fais un simple alert(data), les valeurs affichées me conviennent.
Le problème que j'ai est l'affichage dans le formulaire d'un message en fonction de la donnée retournée par $.post.

Je m'explique :
Par exemple, l'utilisateur entre un mail invalide, qui est détecté via la requête AJAX lors de l'envoi du formulaire.
La méthode $.post() me retourne le message ("Mail invalide").
Ce que je voudrais, c'est afficher ce message en tête de formulaire (sachant que le formulaire est affiché via FancyBox.)

Des idées ?
(j'ai cherché du côté de la méthode live...mais je n'ai pas réussi à aboutir pour l'instant)

Merci de vos réponses,

Arnaud.

[danielhagnoul]

Bonsoir.

Je ne sais pas si je pourrais vous aider, mais sans le code ou un lien vers votre page c'est difficile.

[Warno]

Bonjour,

Voici donc quelques bouts de codes :

Ma page HTML initiale est on ne peut plus simple :

Code XHTML :

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Feuille de style-->
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
<!--Feuille de style spécifique à FancyBox-->
<link rel="stylesheet" href="fancybox.css" type="text/css" media="screen" />
<!--Intégration de Jquery-->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<!--Module FancyBox-->
<script type="text/javascript" src="fancybox.js"></script>
<!--Sripts perso-->
<script type="text/javascript" src="script.js"></script>
 
<title>Ma page</title>
 
</head>
 
<body>
 
<div>
<p>
<a href="inscription.php" id="lienInscription" class="fancy">Inscription</a>
</p>
</div>
 
</body>
 
</html>

Ensuite, le fichier inscription.php :

Code XHTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
<form action="traitementInscription.php" id="inscriptionForm" method="post">
    <p id="messageInscription">
    </p>
    <p>
        <label for="nom">Nom : </label><input type="text" name="nom" id="nom" /><br/>
        <label for="prenom">Prenom : </label><input type="text" name="prenom" id="prenom" /><br/>
        <label for="password">Mot de passe : </label><input type="password" name="password" id="password" /><br/>
        <label for="mail">Email : </label><input type="text" name="mail" id="mail" /><br/>
        <label for="portable">Téléphone portable : </label><input type="text" name="portable" id="portable" /><br/>
        <input type="submit" class="submit" id="inscriptionSubmit" value="Inscription" />
    </p>
</form>

Le fichier inscriptionTraitement.php (auquel on envoie le formulaire) retourne une chaîne de caractère à afficher dans la section "messageInscription".
("Votre adresse mail ne semble pas valide", "Veuillez entrer tous les champs",...)

Pour finir, le script jQuery (extrait de script.js) qui correspond (et qui ne marche pas pour l'instant)

Code jQuery :

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
 
 
 
$(document).ready(function(){ 
 
$("a#lienInscription").fancybox({ 'hideOnContentClick': true }); 
 
});
 
$(document).ready(function(){ 
 
 $("#inscriptionSubmit").live("click",function()
{        
        $.post("traitementInscription.php",{ login:$('#nom').val(),prenom:$('#prenom').val(),password:$('#password').val(),mail:$('#mail').val(),portable:$('#portable').val() } ,function(data)
        {
 
          $("inscriptionMessage").text(data);
 
       });
 
       return false;
});
 
});

Merci de votre aide,

Arnaud.

[danielhagnoul]

Bonjour.

Dans le code jQuery : $("inscriptionMessage").text(data);

Dans le form : <p id="messageInscription"></p>

[Thewil]

Bonjour.

Dans le code jQuery : $("inscriptionMessage").text(data);

Dans le form : <p id="messageInscription"></p>

Je dirais même $("#inscriptionMessage").text(data);

Non ?

[danielhagnoul]

Bonjour Thewil.

Bien vu !

[Thewil]

Bonjour Thewil.

Bien vu !

Bonjour Daniel,

Je dirais même encore mieux :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
Dans le code jQuery : $("#inscriptionMessage").text(data);

Dans le form : <p id="inscriptionMessage"></p>

Fatigué Daniel

[danielhagnoul]

Bonjour Thewil.

Mal compris !
Je montrais l'erreur !

Fatigué : oui !

Motif : je suis occuper à étudier le php, l'exercice en cours (le 8e) me fait : un cou OK un coup KO !

[Thewil]

Ok autant pour moi

Bon apprentissage du php !

[Warno]

Merci beaucoup à vous deux, ça fonctionne !

C'était vraiment une erreur bête en fin de compte (erreur de sélecteur jQuery)....

[factis]

Bonjour,

Désolé de déterrer un topic assez vieux, mais j'ai un problème assez similaire.
J'ai hésité à demander de l'aide, mais ça va faire 2 semaines que je bute sur ce problème, et j'ai déjà écumé pas mal de topic.

Je souhaite créer un système de post avec fancy box.
Voilà l'organisation:

La partie affichage des postes fonctionne parfaitement.
La partie mise à jour du fichier HTML qui contient les postes marche également. Par contre le scripte PHP m’affiche une page de résultat. J’aurais aimé qu’il se lance à la fermeture du formulaire, de façon transparente, et que la page principale restée en arrière plan redevient disponible.

Code Index.html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="./fancybox2/jquery.mousewheel-3.0.2.pack.js"></script>
	<script type="text/javascript" src="./fancybox2/jquery.fancybox-1.3.1.js">       </script>
	<link rel="stylesheet" type="text/css" href="./fancybox2/jquery.fancybox-1.3.1.css" media="screen" />
  <script type="text/javascript">
	$(document).ready(function() {	
    $("#write").fancybox({
    'scrolling'		: 'no',
    'titleShow'		: false,
    });
    });
	</script>
</head>
<body>
  <a id="write" title="Login" href="post_form.html">Ecrire un post</a>
</body>
</html>

Code Post_form.html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<html>
     <head>
        <title>Ma page d ecriture</title>
     </head>
     <body>
         <form action = "Scr8_low.php" method="post">
             Votre nom : <input type = "text" name = "nom"><br />
             Votre commentaire : <TEXTAREA rows="3" name="commentaire"></TEXTAREA>
             <br />
             <input type = "submit" value = "Envoyer">
        </form>
    </body>
</html>

Code Scr8_low.php :

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
 
<html>
     <head>
     </head>
     <body>
    <?php
         //recuperation et mise en forme des données
         if (isset($_POST['nom']) && isset($_POST['commentaire']))
         {
            if (empty($_POST['nom']) || empty($_POST['commentaire']))
                {$new_com='';}
            else
                {$new_com= CHR(13).'<h2>'.ucfirst($_POST['nom']).'&nbsp&nbsp'. CHR(13).'    <font size=-3>'.date('d/m/y G:i').' <div style="display:none;">'.$_SERVER["REMOTE_ADDR"].'</div></font></h2>'. CHR(13).'    <p>'.str_replace (chr(10), '<br/>', ucfirst($_POST['commentaire'])).'</p></br>';}
         }
         else
            {$new_com= '';}            
         //sauvegarde
         if (!(file_exists('com.txt')))
            {
            $monfichier = fopen('comr.txt', 'w+');
            fputs($monfichier, '<div style="width:350px;height:250px;overflow:auto">'. CHR(13).'</div>');
            fclose($monfichier);
            }
         $monfichier = fopen('com.txt', 'r+');
         $text = fgets($monfichier);         
         if (!empty($new_com))
            {$text=substr($text,0,strlen($text)-7).$new_com.substr($text,strlen($text)-7);}
         fseek($monfichier, 0);
         fputs($monfichier, $text);
         fclose($monfichier);
         echo $text;
         ?>
    </div >
</html>

J’ai bien essayé d’intégrer le code du formulaire et du PHP dans la page principale, mais là ça ne marche plus (plus de mise à jour du fichier).
J’ai essayé de découper autrement (page principale + PHP…) mais ça ne marche pas non plus.
Voilà, le problème peut paraître simple, mais je suis novice.

Merci pour votre aide

[danielhagnoul]

Bonsoir.

Je vois que vous avez édité votre message, mais je n'ai plus le temps de relire votre question. Désolé s'il y a des changements que n'ai pas pris en compte.

Exceptionnellement, comme je fais mes premiers pas en PHP et que je suis de bonne composition aujourd'hui, j'ai regardé ce problème. Mais, je le répète, c'est exceptionnel ! jQuery est une bibliothèque JavaScript et en JavaScript on ne traite pas les langages serveur. Les problèmes PHP sont du ressort du forum PHP.

Il y avait beaucoup de petits problèmes un peu partout.

J'ai réussi à faire fonctionner l'ensemble, mais il y a encore beaucoup de travail.

Voici le code HTML de ce que j'ai réussi à afficher :

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
<div style="width:350px;height:250px;overflow:auto">
<h2>Daniel&nbsp&nbsp
    <font size=-3>15/04/10 19:35 <div style="display:none;">127.0.0.1</div></font></h2>
    <p>Un message pour test.</p></br>
<h2>Hagnoul&nbsp&nbsp
    <font size=-3>15/04/10 19:35 <div style="display:none;">127.0.0.1</div></font></h2>
    <p>Un mot pour remplir</p></br>
 
<h2>Daniel&nbsp&nbsp
    <font size=-3>15/04/10 20:00 <div style="display:none;">127.0.0.1</div></font></h2>
    <p>Un mot pour remplir</p></br>
<h2>Dvjh&nbsp&nbsp
    <font size=-3>15/04/10 20:00 <div style="display:none;">127.0.0.1</div></font></h2>
    <p>C'est bizarre ce truc</p></br>
 
</div>

Voici les fichiers corrigés :

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
<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <style>
		@import url("fancybox/jquery.fancybox-1.3.1.css");
    </style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script charset="utf-8" src="../lib/jquery-easing-1.3.js"></script>
	<script charset="utf-8" src="fancybox/jquery.fancybox-1.3.1.pack.js"></script>
    <script type="text/javascript">
        $(function() {	
            $("#write").fancybox({
                scrolling: 'no',
                titleShow: false,
		modal: true
            });
        });
	</script>
</head>
<body>
    <a id="write" href="Post_form.html" title="Login">Ecrire un post</a>
</body>
</html>

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
<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Ma page d'ecriture</title>
</head>
<body>
    <form action = "Scr8_low.php" method="post">
        Votre nom : <input type = "text" name = "nom"><br />
        Votre commentaire : <textarea rows="3" name="commentaire"></textarea>>
        <br />
        <input type = "submit" value = "Envoyer">
   </form>
</body>
</html>

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
    header('Content-Type: text/html; charset=utf-8');
 
    $new_com='';
    $text = '';
    $filename = "/com.txt";
    $handle = null;
 
    //recuperation et mise en forme des données
    if (isset($_POST['nom']) && isset($_POST['commentaire']) && !empty($_POST['nom']) && !empty($_POST['commentaire'])){
        $new_com = CHR(13).'<h2>'.ucfirst($_POST['nom']).'&nbsp&nbsp'. CHR(13).'    <font size=-3>'.date('d/m/y G:i').' <div style="display:none;">'.$_SERVER["REMOTE_ADDR"].'</div></font></h2>'. CHR(13).'    <p>'.str_replace (chr(10), '<br/>', ucfirst($_POST['commentaire'])).'</p></br>';
    }
 
    //sauvegarde
    if (!file_exists($filename)){
        $handle = fopen($filename, 'w+');
        fwrite($handle, '<div style="width:350px;height:250px;overflow:auto">'. CHR(13).'</div>');
        fclose($handle);
    }
 
    $handle = fopen($filename, 'r+');
    $text = fread($handle, filesize($filename));
 
    if (!empty($new_com)){
        $text = substr($text, 0, strlen($text) - 7).$new_com.substr($text, strlen($text) - 7);
    }
 
    fseek($handle, 0);
    fwrite($handle, $text);
    fclose($handle);
 
    echo $text;
?>

[factis]

Merci, je vais essayer ça demain quand je serais un peu plus frais.

Désolé d'avoir édité aussi vite, j'avais oublié d'inclure une illustration. (Et j'en ai profité pour supprimer un apostrophe pour la coloration du automatique code)

[factis]

J'ai toujours problème: lorsque le formulaire est validé, il exécute et affiche le php. Si je n'appelle pas le php (<form action = "" method="post">), il y a pas de MaJ du fichier de post (ce qui est logique), et le navigateur revient sur la page Index. C'est ce comportement que je souhaiterais au niveau utilisateur.



Dans ma logique ça serait de lancer le php dans la box et de la fermer une fois le scripte exécuter. (Ce que j'ai essayer en déplaçant les bout de code, en ajoutant des d'autre bouts d'internet, mais rien a faire .... c'est un sac a nœud ).

[factis]

Bon après une journée supplémentaire sur ce problème, j'ai trouvé une solution qui marche (mais très pourrit): le bouton de validation du formulaire lance un java script sur la même page qui lance le php avant de submiter le formulaire (et de tout fermer).
Le truc c'est que ce systeme de post va etre utilise a plusieurs endroits, et comme j'ai pas trop envi de faire un *.php + *.html pour chaque lieu de post (ça serait vraiment trop carde). Il faudrait passer au formulaire, qui le passerait a sont tour au PHP le nom du fichier qui contient les post. Le problème c'est que je ne peux pas utiliser la barre d'adresse pour passer les variable entre la page principale et le formulaire (avec le ?var=value et ?#value ).

Appel de la page principale:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<li><a id="chat_comw" href="post_form.php?#chat"  >Ajouter un post</a></li>

Récupération par le formulaire dans la partie JS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var url=document.location.href;

La récupération renvoie la page principale(file/index2.html) et pas "file/post_form.php?#chat" ... la faute a jquery?