[AJAX] probleme de fonction imbriqué
Résolu
leod
Messages postés
98
Date d'inscription
Statut
Membre
Dernière intervention
-
leod Messages postés 98 Date d'inscription Statut Membre Dernière intervention -
leod Messages postés 98 Date d'inscription Statut Membre Dernière intervention -
bonjour à tous , je vais tenter de m'expliquer clairement car je rencontre un problème difficile à décrire :
pour visualiser le problème :
lien 1 : http://dealfrance.free.fr/config/rewrite.php
lien 2 : http://dealfrance.free.fr/config/rewrite.php
si vous suivez le lien 1 vous tombé sur le site que je suis en train de mettre en place (pas de commentaire sur l'utilité du site , il est à titre démonstratif)
vous pouvez cliquer sur le lien inscription en haut a droite et vous verrez en cliquant sur les autres lien se que je souhaite faire en ajax :
faire apparaitre les page dans un div pour que seul un morceau de la page se recharge.
pour cela j'ai utilisé la fonction suivante sur mon index :
[CODE]
<script type="text/javascript">
function envoieRequete(url,id)
{
var xhr_object = null;
var position = id;
if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
else
if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
// On ouvre la requete vers la page désirée
xhr_object.open("GET", url, true);
xhr_object.onreadystatechange = function(){
if ( xhr_object.readyState == 4 )
{
// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
document.getElementById(position).innerHTML = xhr_object.responseText;
}
}
// dans le cas du get
xhr_object.send(null);
}
</script>
/CODE
cette fonction affiche la page inscription.php dans la div page
[CODE]
<DIV id="page"></div>
/CODE
lors du clic sur le lien codé de la facon suivante :
[CODE]
<a href="#" onclick="envoieRequete('inscription.php','page');">inscription</a>
/CODE
ceci fonctionne comme vous pouvez le voir sur le lien 1
passons au lien numéro 2 : vous pouvez voir les vérification d'un champ de formulaire de facon quasi instantanée , encore une fois fait en ajax
ca fonctionne aussi
[B][U]mon probleme est maintenant que si je combine les 2 ça ne fonctionne plus , je voudrai savoir comment faire pour que ça fonctionne (vous pouvez vérifier que ça ne fonctionne pas en cliquant sur inscription dans le lien numéro 1
les vérifications ne se font pas ou ne s'affiche pas)/U/B
je poste aussi le code de la vérification des champs que j'utilise :
[CODE]
<html>
<head>
<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script>
$(document).ready(function()
{
$("input").focus(function()
{
var info_form=$(this).next(".info");
info_form.empty();
});
$("input").blur(function()
{
var name=($(this).attr("name"));
var value=($(this).attr("value"));
var info_form=$(this).next(".info");
if(value==undefined)
{
info_form.append("<span class='rouge'>Obligatoire</span>");
}
else if(name=="pseudo")
{
$.ajax({
type: "GET",
url: "./verification.php?pseudo="+value,
success:function(data)
{
if(data==1)
{
info_form.append("<span class='rouge'>Un compte avec le même pseudo existe déja</span>");
}
else
{
info_form.append("<span class='vert'>Valide</span>");
}
}
});
}
});
});
</script>
<style type="text/css">
.rouge
{
color:#FF0000;
}
.vert
{
color:#00bb00;
}
</style>
</head>
<body>
<form action="" method="post">
<label> Pseudo : </label><input type="text" name="pseudo"></input><span class="info"></span>
<br/>
<label> </label><input type="submit" name="inscription"></input></span class="info"></span>
</form>
</body>
</html>
/CODE
voila en gros , je me tiens a votre disposition si vous avez des questions et je remercie d'avance ceux qui auront la gentillesse de m'aider
pour visualiser le problème :
lien 1 : http://dealfrance.free.fr/config/rewrite.php
lien 2 : http://dealfrance.free.fr/config/rewrite.php
si vous suivez le lien 1 vous tombé sur le site que je suis en train de mettre en place (pas de commentaire sur l'utilité du site , il est à titre démonstratif)
vous pouvez cliquer sur le lien inscription en haut a droite et vous verrez en cliquant sur les autres lien se que je souhaite faire en ajax :
faire apparaitre les page dans un div pour que seul un morceau de la page se recharge.
pour cela j'ai utilisé la fonction suivante sur mon index :
[CODE]
<script type="text/javascript">
function envoieRequete(url,id)
{
var xhr_object = null;
var position = id;
if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
else
if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
// On ouvre la requete vers la page désirée
xhr_object.open("GET", url, true);
xhr_object.onreadystatechange = function(){
if ( xhr_object.readyState == 4 )
{
// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
document.getElementById(position).innerHTML = xhr_object.responseText;
}
}
// dans le cas du get
xhr_object.send(null);
}
</script>
/CODE
cette fonction affiche la page inscription.php dans la div page
[CODE]
<DIV id="page"></div>
/CODE
lors du clic sur le lien codé de la facon suivante :
[CODE]
<a href="#" onclick="envoieRequete('inscription.php','page');">inscription</a>
/CODE
ceci fonctionne comme vous pouvez le voir sur le lien 1
passons au lien numéro 2 : vous pouvez voir les vérification d'un champ de formulaire de facon quasi instantanée , encore une fois fait en ajax
ca fonctionne aussi
[B][U]mon probleme est maintenant que si je combine les 2 ça ne fonctionne plus , je voudrai savoir comment faire pour que ça fonctionne (vous pouvez vérifier que ça ne fonctionne pas en cliquant sur inscription dans le lien numéro 1
les vérifications ne se font pas ou ne s'affiche pas)/U/B
je poste aussi le code de la vérification des champs que j'utilise :
[CODE]
<html>
<head>
<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script>
$(document).ready(function()
{
$("input").focus(function()
{
var info_form=$(this).next(".info");
info_form.empty();
});
$("input").blur(function()
{
var name=($(this).attr("name"));
var value=($(this).attr("value"));
var info_form=$(this).next(".info");
if(value==undefined)
{
info_form.append("<span class='rouge'>Obligatoire</span>");
}
else if(name=="pseudo")
{
$.ajax({
type: "GET",
url: "./verification.php?pseudo="+value,
success:function(data)
{
if(data==1)
{
info_form.append("<span class='rouge'>Un compte avec le même pseudo existe déja</span>");
}
else
{
info_form.append("<span class='vert'>Valide</span>");
}
}
});
}
});
});
</script>
<style type="text/css">
.rouge
{
color:#FF0000;
}
.vert
{
color:#00bb00;
}
</style>
</head>
<body>
<form action="" method="post">
<label> Pseudo : </label><input type="text" name="pseudo"></input><span class="info"></span>
<br/>
<label> </label><input type="submit" name="inscription"></input></span class="info"></span>
</form>
</body>
</html>
/CODE
voila en gros , je me tiens a votre disposition si vous avez des questions et je remercie d'avance ceux qui auront la gentillesse de m'aider
A voir également:
- [AJAX] probleme de fonction imbriqué
- Fonction si et - Guide
- Fonction miroir - Guide
- Fonction moyenne excel - Guide
- Fonction remplacer sur word - Guide
- Fonction somme excel - Guide
18 réponses
(Re-édite ton message et remplace tes balise [ code ] par des balise < code > (sans les espaces), ça sera plus lisible :-) )
Si j'ai bien compris ton problèmes, c'est que quand tu charge un morceau de page HTML dans ta page HTML, le Javascript n'est pas pris en compte. C'est malheureusement un problème qui arrive souvent, et sur lequel on doit toujours bidouiller pour y remédier.
Heureusement, les framework Javascript on des méthode pour nous aidez. Je sais que sous PrototypeJS, il y a une fonction pour récupérer et exécuter le code Javascript que l'on récupère.
Je ne connais pas assez JQuery pour te dire avec exactitude les fonctions à utiliser. Mais tu pourrais essayer de voir avec la fonction Ajax.getScript(), combiner avec Ajax.get() (a condition de séparer ta page HTMl et ton script).
Si j'ai bien compris ton problèmes, c'est que quand tu charge un morceau de page HTML dans ta page HTML, le Javascript n'est pas pris en compte. C'est malheureusement un problème qui arrive souvent, et sur lequel on doit toujours bidouiller pour y remédier.
Heureusement, les framework Javascript on des méthode pour nous aidez. Je sais que sous PrototypeJS, il y a une fonction pour récupérer et exécuter le code Javascript que l'on récupère.
Je ne connais pas assez JQuery pour te dire avec exactitude les fonctions à utiliser. Mais tu pourrais essayer de voir avec la fonction Ajax.getScript(), combiner avec Ajax.get() (a condition de séparer ta page HTMl et ton script).
d'acoord , je veu bien essayer meme avec un autre framework que jquery
pourrai tu me detailler la marche a suivre plus précisement , je suis vraiment trop novice en la matiere
je vais regarder quand meme si je comprend ce qu'il faut faire mais ce n'est pas gagné
ps : je ne peu pas editer le premier message ???
pourrai tu me detailler la marche a suivre plus précisement , je suis vraiment trop novice en la matiere
je vais regarder quand meme si je comprend ce qu'il faut faire mais ce n'est pas gagné
ps : je ne peu pas editer le premier message ???
pourquoi dans ta partie formualire inscription, tu n'appeles pas la même fonction Ajax envoieRequette() par le bouton que tu mets en type="button" et onClick=appel fct ajax , en lui passant d'autres parametres bien sur l'url du script de verification du pseudo, etc.. et l'id ou tu veux avoir le retour.
il y a bien la fonction getscript :
Liste des différentes variantes:
* $.getScript(url,callback)
$.getScript(url,callback)
Charge et éxécute un fichier Javascript utilisant la méthode GET.
Attation: Safari <= 2.0.x n'est pas capable d'évaluer les scripts dans un contexte synchrone. Si vous chagez des fonctions via getScript, faites en sorte de les appeler les après un delai.
Paramètres:
* url (String): URL de la page à charger
* callback (Fonction): (optionnel) fonction à éxécuter quand les données seront complètement chargées.
Valeur de retour: XMLHttpRequest
Exemple:
$.getScript("test.js");
Exemple:
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
comment doit je faire pour séparer le html de mon script ou plutot comment adapter le code du premier message
je ne sais pas comment faire
je suis plus php / mysql que javascript (j'en ai jamais fait en faite ^^ )
Liste des différentes variantes:
* $.getScript(url,callback)
$.getScript(url,callback)
Charge et éxécute un fichier Javascript utilisant la méthode GET.
Attation: Safari <= 2.0.x n'est pas capable d'évaluer les scripts dans un contexte synchrone. Si vous chagez des fonctions via getScript, faites en sorte de les appeler les après un delai.
Paramètres:
* url (String): URL de la page à charger
* callback (Fonction): (optionnel) fonction à éxécuter quand les données seront complètement chargées.
Valeur de retour: XMLHttpRequest
Exemple:
$.getScript("test.js");
Exemple:
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
comment doit je faire pour séparer le html de mon script ou plutot comment adapter le code du premier message
je ne sais pas comment faire
je suis plus php / mysql que javascript (j'en ai jamais fait en faite ^^ )
je voulais faire ca alain mais je ne sais pas comment l'ecrire
je viens juste de voir ton message en relisant ^^
pourrait tu me dire plus précisement comment faire ? avec mon code
je viens juste de voir ton message en relisant ^^
pourrait tu me dire plus précisement comment faire ? avec mon code
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question<form action="" method="post"> <label> Pseudo : </label><input type="text" name="pseudo" id="pseudo"/><span class="info"></span> <br/> <label> </label><input type="button" name="inscription" value="envoyer" onClick="envoieRequete_2(url,id_lire,id_ecrire);"/></span class="info"></span> </form>
url= adresse de ton script php de verif du login (par ex: 'test.php')
id_ecrire= id du div ou tu veux avoir la réponse ('page' je suppose)
id_lire=id de l'input du pseudo, pour lire la valeur
Dans ta page, tu fais une deuxième fonction Ajax envoieRequette_2:
function envoieRequete_2(url,id_lire,id_ecrire)
{
var xhr_object = null;
var position = id_ecrire;
if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
else
if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
// On ouvre la requete vers la page désirée
xhr_object.open("GET", url, true);
xhr_object.onreadystatechange = function(){
if ( xhr_object.readyState == 4 )
{
// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
document.getElementById(position).innerHTML = xhr_object.responseText;
}
}
var obj=document.getElementById(id_lire);
data="pseudo="+obj.value;
// dans le cas du get
xhr_object.send(data);
}
dans ton script php de verif appelé par Ajax, tu récupéres le pseudo envoyé par
$pseudo=$_GET['pseudo'];
et tu traites
et par un echo tu retournes une réponse qui sera affichée dans le div id_ecrire
d'accord merci de ta réponse , je vois parfaitement ce que tu veu dire la
mais dans ce est ce que je ne perd pas tout l'intérêt de l'ajax ???
si je fais cela , il ne vérifiera les champs que lorsque j'aurais cliqué sur valider ??? non ?
dans ce cas ca ne change rien d'une vérification pur php !
si tu regarde le lien numéro 2 , lorsque tu tape un pseudo il affiche instantanément si celui ci est valide (en fait quand tu quite le champ) ce qui evite de valider pour faire apparaitre chaque erreur de saisie etc ...
il n'y a qu'un champ ici pour l'exemple , mais il va y avoir un formulaire d'inscription complet
ou alors j'ai mal compris ton code ...mais je ne crois pas
mais dans ce est ce que je ne perd pas tout l'intérêt de l'ajax ???
si je fais cela , il ne vérifiera les champs que lorsque j'aurais cliqué sur valider ??? non ?
dans ce cas ca ne change rien d'une vérification pur php !
si tu regarde le lien numéro 2 , lorsque tu tape un pseudo il affiche instantanément si celui ci est valide (en fait quand tu quite le champ) ce qui evite de valider pour faire apparaitre chaque erreur de saisie etc ...
il n'y a qu'un champ ici pour l'exemple , mais il va y avoir un formulaire d'inscription complet
ou alors j'ai mal compris ton code ...mais je ne crois pas
Dans ta première page, en utilisant JQuery, je pensais à faire quelque-chose dans le genre :
Apres, tu modifie ton fichier HTMl en enlevant tous ce qui dans les balises "script". Le contenu de ces balises script sont copié dans le fichier js "inscription.php.js".
/* Fonction sur la première page. */
function envoieRequete(url, id){
/* Chargement du fichier "url" dans l'objet "id" */
$("#" + id).load(url);
/* Chargement et exécution du script associé. On dit que le fichier se nomme
* comme l'autre, mais avec l'extension js en plus.
* Ex : monFichier.html et monFichier.html.js
* (C'est pas ce qu'il y a de mieux, mais ca doit marcher) */
$.getScript(url + ".js")
}
Apres, tu modifie ton fichier HTMl en enlevant tous ce qui dans les balises "script". Le contenu de ces balises script sont copié dans le fichier js "inscription.php.js".
bon malheureusement cela ne fonctionne pas (j'ai peut être fait une erreur je détail donc)
dans mon fichier index.php
dans mon fichier inscription.php
et enfin dans mon fichier inscription.php.js
manque t'il quelques choses ?
la fonction d'appel de page de l'index marche toujours sans probleme
en revanche si je vais sur le fichier inscription directement il ne vérifie plus tout seul et rien a faire ne marche pas dircetement dans l'index
il manque peut etre qqs choses ?
dans mon fichier index.php
<script type="text/javascript" src="jquery-1.2.3.js">
function envoieRequete(url, id){
$("#" + id).load(url);
$.getScript(url + ".js")
}
</script>
dans mon fichier inscription.php
<html>
<head>
<style type="text/css">
.rouge
{
color:#FF0000;
}
.vert
{
color:#00bb00;
}
</style>
</head>
<body>
<form action="" method="post">
<label> Pseudo : </label><input type="text" name="pseudo"></input><span class="info"></span>
<br/>
<label> </label><input type="submit" name="inscription"></input></span class="info"></span>
</form>
</body>
</html>
et enfin dans mon fichier inscription.php.js
$(document).ready(function()
{
$("input").focus(function()
{
var info_form=$(this).next(".info");
info_form.empty();
});
$("input").blur(function()
{
var name=($(this).attr("name"));
var value=($(this).attr("value"));
var info_form=$(this).next(".info");
if(value==undefined)
{
info_form.append("<span class='rouge'>Obligatoire</span>");
}
else if(name=="pseudo")
{
$.ajax({
type: "GET",
url: "./verification.php?pseudo="+value,
success:function(data)
{
if(data==1)
{
info_form.append("<span class='rouge'>Un compte avec le même pseudo existe déja</span>");
}
else
{
info_form.append("<span class='vert'>Valide</span>");
}
}
});
}
});
});
manque t'il quelques choses ?
la fonction d'appel de page de l'index marche toujours sans probleme
en revanche si je vais sur le fichier inscription directement il ne vérifie plus tout seul et rien a faire ne marche pas dircetement dans l'index
il manque peut etre qqs choses ?
A première vue, pour moi ça ma l'air bon.
C'est normal que tu ne puisse plus tester directement ton fichier d'inscription, car il n'y a plus de jointure direct entre le fichier et le script. Normalement, c'est la fonction de chargement qui les mets (plus ou moins) ensemble.
Si ton formulaire d'inscription, s'affiche bien sur ta page d'index, c'est que le problème doit venir du chargement du script. Il faut donc que l'on test si le chargement est bien effectué : on ajoute donc tout simplement un alert dans le script.
Avec un alert au début, et un à la fin on peut ce rendre compte des erreurs qu'il peut y avoir :
- aucun alert : le chargement à foiré
- seulement le premier alert : une erreur c'est produit pendant l'exécution du script
- les deux alert : tout marche correctement (enfin normalement)
- seulement le dernier alert : alors là je dit bravo
EDIT : au fait tu as bien penser à mettre
C'est normal que tu ne puisse plus tester directement ton fichier d'inscription, car il n'y a plus de jointure direct entre le fichier et le script. Normalement, c'est la fonction de chargement qui les mets (plus ou moins) ensemble.
Si ton formulaire d'inscription, s'affiche bien sur ta page d'index, c'est que le problème doit venir du chargement du script. Il faut donc que l'on test si le chargement est bien effectué : on ajoute donc tout simplement un alert dans le script.
/* A ajouter au début du fichier inscription.php.js */
alert('Chargement effectué, exécution en cours');
/* A ajouter à la fin du fichier inscription.php.js */
alert('Exécution terminé');
Avec un alert au début, et un à la fin on peut ce rendre compte des erreurs qu'il peut y avoir :
- aucun alert : le chargement à foiré
- seulement le premier alert : une erreur c'est produit pendant l'exécution du script
- les deux alert : tout marche correctement (enfin normalement)
- seulement le dernier alert : alors là je dit bravo
EDIT : au fait tu as bien penser à mettre
<script type="text/javascript" src="jquery-1.2.3.js"></script>dans ton fichier index.php ?
ok je vais tester
oui je t'ai marqué ce que j'ai mis dans l'index.php
<script type="text/javascript" src="jquery-1.2.3.js">
le script
</script>
aussi essayé ceci :
<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script>
le script
</script>
bon je test avec les alertes et je te dit ce que ca engendre
oui je t'ai marqué ce que j'ai mis dans l'index.php
<script type="text/javascript" src="jquery-1.2.3.js">
le script
</script>
aussi essayé ceci :
<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script>
le script
</script>
bon je test avec les alertes et je te dit ce que ca engendre
le résultat est le suivant :
les 2 alertes apparaissent l'une après l'autre
puis une fois cliqué sur les 2 ok la page inscription.php s'affiche
veu tu que je t'envoie mes fichiers sources ?
les 2 alertes apparaissent l'une après l'autre
puis une fois cliqué sur les 2 ok la page inscription.php s'affiche
veu tu que je t'envoie mes fichiers sources ?
Je vais t''envoyer mon Email en message personnel, comme ça tu pourra m'envoyer tes sources.
Par contre, c'est pas normal que la page inscription.php s'affiche après le chargement du script. Ça peut être une explication : si le script s'exécute avant que les "input" ne soit chargé, il ne peut leurs appliquer les fonctions.
Par contre, c'est pas normal que la page inscription.php s'affiche après le chargement du script. Ça peut être une explication : si le script s'exécute avant que les "input" ne soit chargé, il ne peut leurs appliquer les fonctions.
merci alain 42 je testerai ta solution également ^^
en effet sur le onblur ceci peut être beaucoup plus intéressant je vais voir cela merci bien
c'est mon jour de chance 2 personnes qui m'aident
merci grandement à vous 2 ^^
en effet sur le onblur ceci peut être beaucoup plus intéressant je vais voir cela merci bien
c'est mon jour de chance 2 personnes qui m'aident
merci grandement à vous 2 ^^
Je pense avoir trouver d'où vient le problème :
- le chargement étant asynchrone, le script peut être exécuter avant le chargement du formulaire
- le script s'exécute quand le document est finit de chargé, or il a finit de charger depuis longtemps.
Pour remédier à cela, on commence par une petite modification du fichier index.php. On ajoute ça quelque part :
Cela passe le mode de chargement des données en synchrone.
Si on veut rester en asynchrone pour les futur chargement, on peut faire ainsi :
Ensuite, on modifie le fichier inscription.php.js. Là ou on avait :
on le remplace par :
J'ai essayer chez moi, et sa m'a l'air de fonctionner correctement.
Par contre, il y a un peu inconvénient dans ma méthode : on essaye dans tout les cas de charger un fichier js, même s'il n'y en a pas. On pourrait tenter de modifier la fonction envoieRequete() pour lui rajouter un paramètre en plus :
});</code>
Cela passe le mode de chargement des données en synchrone.
Si on veut rester en asynchrone pour les futur chargement, on peut faire ainsi :
et on appel la fonction avec un booléen en plus. S'il est a "true" alors on charge le script, sinon on ne le charge pas.
- le chargement étant asynchrone, le script peut être exécuter avant le chargement du formulaire
- le script s'exécute quand le document est finit de chargé, or il a finit de charger depuis longtemps.
Pour remédier à cela, on commence par une petite modification du fichier index.php. On ajoute ça quelque part :
$.ajaxSetup({
async: false
});
Cela passe le mode de chargement des données en synchrone.
Si on veut rester en asynchrone pour les futur chargement, on peut faire ainsi :
function envoieRequete(url, id){
$.ajaxSetup({
async: false
});
$("#" + id).load(url);
$.getScript(url + ".js");
$.ajaxSetup({
async: false
});
}
Ensuite, on modifie le fichier inscription.php.js. Là ou on avait :
$(document).ready(function()
{
/* Mon code */
});
on le remplace par :
/* Mon code */
J'ai essayer chez moi, et sa m'a l'air de fonctionner correctement.
Par contre, il y a un peu inconvénient dans ma méthode : on essaye dans tout les cas de charger un fichier js, même s'il n'y en a pas. On pourrait tenter de modifier la fonction envoieRequete() pour lui rajouter un paramètre en plus :
});</code>
Cela passe le mode de chargement des données en synchrone.
Si on veut rester en asynchrone pour les futur chargement, on peut faire ainsi :
function envoieRequete(url, id, script){
$.ajaxSetup({
async: false
});
$("#" + id).load(url);
if(script){
$.getScript(url + ".js");
}
$.ajaxSetup({
async: false
});
}
et on appel la fonction avec un booléen en plus. S'il est a "true" alors on charge le script, sinon on ne le charge pas.
