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

Bibliothèques & Frameworks Discussion :

Créer attente dans une fonction [Prototype]


Sujet :

Bibliothèques & Frameworks

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Avril 2008
    Messages
    29
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2008
    Messages : 29
    Par défaut Créer attente dans une fonction
    Bonjour,

    J'ai un p'tit problème avec un formulaire Ajax...

    J'ai une liste déroulante, qui sur onchange va appeler 2 fonctions :

    OnChange = fontion1();fonction2();

    La fonction 1 met a jour 1 div
    La fonction 2 met a jour le 2ème div

    Si je mets un alert de l'id de la fonction 1, ça fonctionne, et si je commente l'alert, ca ne fonctionne plus (seul la 2ème fonction s'execute!!!)

    Donc je me demande si je ne dois pas mettre une tempo quelque part ?!? et je ne sais pas comment faire...

    Enfin bref, en deux mots : AU SECOURS !!!


    Je vous mets le code si vous pouvez m'aider


    Les fonctions :
    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
    47
    48
    49
    50
    51
    52
     
    		function SelectLt()
    		{
    			getXhr(); // On appele la fonction getXhr
     
    			// Traitement de la réponse au POST envoyé plus bas
    			xhr.onreadystatechange = function () // On défini ce qu'on va faire quand on aura une réponse
    			{
    				if(xhr.readyState == 4 && xhr.status == 200) // si on a tout reçu et que le serveur est ok
    				{
    					leselect = xhr.responseText; // On indique que leselect est égal à la réponse xhr
    					document.getElementById('lt').innerHTML = leselect; // On se sert de innerHTML pour rajouter les options a la liste lt
    				}
    			}
     
    			// Envois des données par post
    			xhr.open("POST","AjaxCreaRgLt.php",true); // On ouvre xhr, on lui indique la méthode POST ainsi que le fichier de destination
    			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // ne pas oublier ça pour le post
     
    			//On poste les arguments
    			sel = document.getElementById('site'); // ici, l'id du site
    			idsite = sel.options[sel.selectedIndex].value; // idsite sera égal à la valeur de l'option sélectionnée
    			xhr.send("idsite="+idsite); // On envois la variable idsite qui aura la valeur de idsite
     
    		}
     
    		function SelectAuto()
    		{
    			getXhr(); // On appele la fonction getXhr
     
    			// Traitement de la réponse au POST envoyé plus bas
    			xhr.onreadystatechange = function () // On défini ce qu'on va faire quand on aura une réponse
    			{
    				if(xhr.readyState == 4 && xhr.status == 200) // si on a tout reçu et que le serveur est ok
    				{
    					leselect = xhr.responseText; // On indique que leselect est égal à la réponse xhr
    					document.getElementById('autocom').innerHTML = leselect; // On se sert de innerHTML pour rajouter les options à la liste autocom
    				}
    			}
     
    			// Envois des données par post
    			xhr.open("POST","AjaxCreaRgAuto.php",true); // On ouvre xhr, on lui indique la méthode POST ainsi que le fichier de destination
     
    			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // ne pas oublier ça pour le post
     
    			//On poste les arguments
    			sel = document.getElementById('site'); // ici, l'id du local
    			idsite = sel.options[sel.selectedIndex].value; // idlocal sera égal à la valeur de l'option sélectionnée
    			xhr.send("idsite="+idsite); // On envois la variable idlocal qui aura la valeur de idlocal
     
    			//alert (idsite);   // <-- Si c'est décommenté, ça fonctionne !!!
    		}

    Les div :

    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
     
    <tr><label><td>Site : </td><td>	<select name='site' id='site' onchange='SelectAuto();SelectLt();'>
    												<option value=""></option>
    												<?php
                                                                                                    $reponse = mysql_query("SELECT sigle FROM site ORDER BY sigle") or die(mysql_error());
                                                                                                    while($donnees = mysql_fetch_assoc($reponse))
                                                                                                    {
                                                                                                            if ($donnees["sigle"] != $test)
                                                                                                            {
                                                                                                                    echo "<option value='".$donnees["sigle"]."'>".$donnees["sigle"]."</option>";
                                                                                                                    $test= $donnees["sigle"];
                                                                                                            }
                                                                                                    }
                                                                                                    ?>
    												</select>
    											</td>
    					</label>
    				</tr>
    				<tr><label><td>Autocom: </td><td>	<div id='autocom' style='display:inline' >
    											<select>
    												<option value='-1'>Autocom</option>
    											</select>
    											</div>
    										</td>
    				</tr>
    				<tr><label><td>Local technique: </td><td>	<div id='lt' style='display:inline' >
    											<select>
    												<option value='-1'>Local</option>
    											</select>
    											</div>
    										</td>
    				</tr>

    Merci beaucoup pour votre aide et bonne journée à vous

    Mind

  2. #2
    Membre averti
    Inscrit en
    Mai 2008
    Messages
    29
    Détails du profil
    Informations forums :
    Inscription : Mai 2008
    Messages : 29
    Par défaut
    J'ai exactement le même problème que toi.

    Le problème, d'après ce que j'en ai compris, est que la deuxième fonction javascript se lance avant d'avoir la réponse du serveur, la deuxième fonction a besoin que la première soit bien executé (réponse du serveur compris pour fonctionner). C'est bien ça non ?

    Si c'est bien ça, une solution serait d'utiliser le framework présenté dans un article de développez (qui se résume à charger un fichier js, il n'y a pas d'installation ou autre) :

    Se simplifier AJAX avec Prototype

    Tu trouveras beaucoup d'info là dessus.

    Voilà un petit exemple pour t'aider :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
     
    new Ajax.Updater(             //crée l'objet permettant d'utiliser l'ajax
    	"madiv",              // la div qui doit être rafraichit
    	"ajax/ajoutmarquage.php",     //le fichier qui va etre appelé
    	{
    	method: 'post',
    	parameters : {param : idElement, idmarquage : nbreMarquage-1}, //tu place tes paramètres normalement
    	insertion : Insertion.Bottom,    //je sais plus si cette ligne est compatible avec onSucces, il faudra que tu testes. Elle signifie que ton texte va s'ajouter et non pas remplacer le contenu de la div (on peut bien sur changer les options
    	onSuccess : tafonction2() // une fois que le serveur a répondu, exécute la fonction2
    	}
    );
    Le problème de cette méthode est que tu ne peux pas appeler plus de deux fonctions. Si tu trouves comment faire, préviens moi

    Voilà j'espère que je t'ai aider...

  3. #3
    Membre éclairé
    Homme Profil pro
    Consultant ERP
    Inscrit en
    Mai 2006
    Messages
    257
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Consultant ERP
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2006
    Messages : 257
    Par défaut
    Bonjour, Ce que j'ai compris depuis le tire c'est que tu veux faire un message d'attent(Ex: chargement en cours), mais ce n'est pas ce que j'ai compris depuis le texte de ton message.
    En bref, si tu veux afficher un message ou une image loading le temps d'avoir la réponse du serveur, voici comment:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    if(xhr.readyState == 4 && xhr.status == 200) // si on a tout reçu et que le serveur est ok
    				{
    					leselect = xhr.responseText; // On indique que leselect est égal à la réponse xhr
    					document.getElementById('lt').innerHTML = leselect; // On se sert de innerHTML pour rajouter les options a la liste lt
    				}
    			else
    {
    					document.getElementById('lt').innerHTML = '<img src="loading.gif"/>Chargement en cours'
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    if(xhr.readyState == 4 && xhr.status == 200) // si on a tout reçu et que le serveur est ok
    				{
    					leselect = xhr.responseText; // On indique que leselect est égal à la réponse xhr
    					document.getElementById('autocom').innerHTML = leselect; // On se sert de innerHTML pour rajouter les options à la liste autocom
    				}
    else
    {
    					document.getElementById('lt').innerHTML = '<img src="loading.gif"/>Chargement en cours'
    }
    Je ne sais pas est ce que c'est vraiment ce que tu veux.

  4. #4
    Membre averti
    Inscrit en
    Juin 2006
    Messages
    16
    Détails du profil
    Informations forums :
    Inscription : Juin 2006
    Messages : 16
    Par défaut
    pourquoi faire 2 appels ajax dans ce cas ? tu n'as qu'à utiliser le seul appel ajax pour charger des 2 objets:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    if(xhr.readyState == 4 && xhr.status == 200) // si on a tout reçu et que le serveur est ok
    				{
    					leselect = xhr.responseText; // On indique que leselect est égal à la réponse xhr
    					document.getElementById('lt').innerHTML = leselect;
    document.getElementById('autocom').innerHTML = leselect;
    				}
    else
    {
    					document.getElementById('lt').innerHTML = '<img src="loading.gif"/>Chargement en cours'
    }

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Avril 2008
    Messages
    29
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2008
    Messages : 29
    Par défaut Précisions
    Merci beaucoup pour vos réponses

    Je suis désolé, mais je pense ne pas avoir été assé explicite... Mea-culpa


    Je pense que Versus68 a compris le problème.

    othmane126 et colonnel, merci pour vos réponses, c'est extrèmement sympas, mais je ne souhaite pas faire apparaitre de barre de chargement (désolé, je n'ai pas été assé clair )


    Je ne peux également pas utiliser le framework prototype car je travaille dans une grosse boîte et je n'ai pas le 'droit' de l'installer...



    Donc, mon problème est le suivant :

    J'ai un Select (id=site) qui sur Onchange appel 2 fonctions

    SelectLt() execute via une page php une requete sql grace au select id=site et met a jour la liste lt

    SelectAuto() execute via une autre page php une autre requete sql grâce également à id=site et met à jour la liste autocom


    Si je mets un Alert(idsite) dans ma fonction 1, tout fonctionne correctement
    Si je retire l'Alert(idsite), ca plante completement...

    Donc je me demande si il est possible d'envoyer le même id=site dans les 2 pages php en même temps ???
    Je pense que cela met la grouille dans le script car je pense qu'en mettant mon Alert, je crée une tempo dans la fonction et que c'est pour cela que ca fonctionne...

    Mais le problème, c'est que je ne veux pas de ce fichu Alert

    J'espère avoir été clair, si ce n'est pas le cas, je vous ferais un petit schéma.

    Merci encore pour votre aide, c'est vraiment très sympas

    Merci

    Mind

  6. #6
    Membre Expert Avatar de DoubleU
    Profil pro
    Inscrit en
    Janvier 2006
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2006
    Messages : 1 106
    Par défaut
    Déclare tes objets xhr en local dans tes 2 fonctions, la si ton instance xhr est globale, les deux fonctions la partage, donc ca peut foutre le souk dans les traitements.


  7. #7
    Membre averti
    Profil pro
    Inscrit en
    Avril 2008
    Messages
    29
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2008
    Messages : 29
    Par défaut Marche psa :(
    Salut DoubleU

    J'ai essayé d'appliquer ta méthode, mais je n'y arrive pas... (je ne mets pas en doute tes dires, mais plus mes compéthences !!! )

    En essayant ton code dans chacune des 2 fonctions appelé, plus rien ne fonctionne et la console d'erreur firefox m'indique : 'Xhr has no properties'...

    Mon incompéthence en ajax/javascript ne me permet pas de comprendre ce qu'il demande !?!

    Je te laisse mon code si tu peux y jeter un oeil voir même deux !!!

    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
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
     
    script type='text/javascript'>
     
    			var xhr = null; // On initialise la variable XHR
     
    			// ---------------         On crée une fonction getXhr qui vérifiera si le navigateur supporte les XMLHttpRequest       -------------------------------
    			function getXhr() 
    			{
    	           	if(window.XMLHttpRequest) //Si le navigateur est Firefox et autres
    				xhr = new XMLHttpRequest(); // La variable prend un nouvel XMLHttpRequest
     
    				else if(window.ActiveXObject) // Si le navigateur est Internet explorer
    				{
    					try // essayer la norme Msxml2
    					{
    						xhr = new ActiveXObject("Msxml2.XMLHTTP"); // déclaration d'un nouvel objet activeX dans la variable whr
    			        }
    					catch (e) // sinon, utiliser la norme Microsoft
    					{
    			            xhr = new ActiveXObject("Microsoft.XMLHTTP"); // déclaration d'un nouvel objet activeX dans la variable whr
    			        }
    				}
     
    				else // Si le navigateur ne supporte ni les XMLHttpRequest, ni les activeX
    				{ 
    				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");  // On  affiche une messagebox
    				   xhr = false; // La variable xhr ne prend pas de valeur
    				}
    			}
     
     
    		// ----------------------- On crée la fonction SelectAuto qui sera chargé lors de la sélection du Site et qui génèrera la liste déroulante des autocoms ------------------------------
     
    		function SelectAuto()
    		{
    			var xhr = getXhr();
    			//getXhr(); // On appele la fonction getXhr
     
    			// Traitement de la réponse au POST envoyé plus bas
    			xhr.onreadystatechange = function () // On défini ce qu'on va faire quand on aura une réponse
    			{
     
    				if(xhr.readyState == 4 && xhr.status == 200) // si on a tout reçu et que le serveur est ok
    				{
    					leselect = xhr.responseText; // On indique que leselect est égal à la réponse xhr
    					document.getElementById('autocom').innerHTML = leselect; // On se sert de innerHTML pour rajouter les options à la liste autocom
    				}
    			}
     
    			// Envois des données par post
    			xhr.open("POST","AjaxCreaRgAuto.php",true); // On ouvre xhr, on lui indique la méthode POST ainsi que le fichier de destination
     
    			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // ne pas oublier ça pour le post
     
    			//On poste les arguments
    			sel = document.getElementById('site'); // ici, l'id du local
    			idsite = sel.options[sel.selectedIndex].value; // idlocal sera égal à la valeur de l'option sélectionnée
    			xhr.send("idsite="+idsite); // On envois la variable idlocal qui aura la valeur de idlocal
     
    			//alert (idsite);   // <-- Si c'est décommenté, ça fonctionne !!!
    		}
     
     
    		// ----------------------- On crée la fonction SelectLt qui sera chargé lors de la sélection du Site et qui génèrera la liste déroulante des Lt ------------------------------
     
     
    		function SelectLt()
    		{
    			var xhr = getXhr();
    			//getXhr(); // On appele la fonction getXhr
     
    			// Traitement de la réponse au POST envoyé plus bas
    			xhr.onreadystatechange = function () // On défini ce qu'on va faire quand on aura une réponse
    			{
    				if(xhr.readyState == 4 && xhr.status == 200) // si on a tout reçu et que le serveur est ok
    				{
    					leselect = xhr.responseText; // On indique que leselect est égal à la réponse xhr
    					document.getElementById('lt').innerHTML = leselect; // On se sert de innerHTML pour rajouter les options a la liste lt
    				}
    			}
     
    			// Envois des données par post
    			xhr.open("POST","AjaxCreaRgLt.php",true); // On ouvre xhr, on lui indique la méthode POST ainsi que le fichier de destination
    			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // ne pas oublier ça pour le post
     
    			//On poste les arguments
    			sel = document.getElementById('site'); // ici, l'id du site
    			idsite = sel.options[sel.selectedIndex].value; // idsite sera égal à la valeur de l'option sélectionnée
    			xhr.send("idsite="+idsite); // On envois la variable idsite qui aura la valeur de idsite
     
    		}
     
     
     
    	</script>
    Merci encore pour toute votre aide, c'est super sympa et je souligne que c'est grace à des personnes comme vous que les débutants peuvent progresser sans se lasser de ne pas y arriver...

    Merci encore

    @+
    Mind

  8. #8
    Membre Expert Avatar de DoubleU
    Profil pro
    Inscrit en
    Janvier 2006
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2006
    Messages : 1 106
    Par défaut
    Faut juste que ta fonction getXhr() retourne l'objet créé, pas que tu initialises la variable globale

    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
    function getXhr() 
    			{
                            var xhr = null;
    	           	if(window.XMLHttpRequest) //Si le navigateur est Firefox et autres
    				xhr = new XMLHttpRequest(); // La variable prend un nouvel XMLHttpRequest
     
    				else if(window.ActiveXObject) // Si le navigateur est Internet explorer
    				{
    					try // essayer la norme Msxml2
    					{
    						xhr = new ActiveXObject("Msxml2.XMLHTTP"); // déclaration d'un nouvel objet activeX dans la variable whr
    			        }
    					catch (e) // sinon, utiliser la norme Microsoft
    					{
    			            xhr = new ActiveXObject("Microsoft.XMLHTTP"); // déclaration d'un nouvel objet activeX dans la variable whr
    			        }
    				}
     
    				else // Si le navigateur ne supporte ni les XMLHttpRequest, ni les activeX
    				{ 
    				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");  // On  affiche une messagebox
    				   xhr = false; // La variable xhr ne prend pas de valeur
    				}
                                    return xhr;
    			}

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Créer une fonction dans une fonction
    Par chris81 dans le forum Windows Forms
    Réponses: 7
    Dernier message: 20/12/2007, 15h50
  2. Impossible de créer une table temporaire dans une fonction
    Par bossun dans le forum MS SQL Server
    Réponses: 1
    Dernier message: 05/10/2007, 10h03
  3. [D5] Créer dynamiquement des variables dans une fonction
    Par MelkInarian dans le forum Delphi
    Réponses: 11
    Dernier message: 14/04/2007, 12h16
  4. créer un type dans une fonction javascript
    Par amelhog dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 11/07/2005, 13h54
  5. créer un type hidden dans une fonction javascript
    Par amelhog dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 27/05/2005, 12h17

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