retour de fonction ( return) en javascript

ichida · 25/09/2011, 00h24

index.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
<html>
    <head>
        <title>Myform</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <form method="POST">
            <div>
              <p><span>Username :</span>&nbsp;<input id="user" type="text"/><label id="labeluser"></label></p><br />
              <p><span>Password :</span>&nbsp;<input id="pass" type="password"/><label id="labelpass"></label></p><br />
              <p><span>&nbsp;</span><input id="sb" type="submit" value="Submit" /></p>
            </div>
         </form>
        <script type="text/javascript" src="jquery-1.6.4.js"></script>
        <script type="text/javascript" src="ajaxcall.js"></script>
    </body>
</html>

usercheck.php

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
<?php
$server = "localhost";
$username = "root";
$password = "";
$database_name = "tutorial";
 
mysql_connect($server, $username, $password)or die("Server Error");
mysql_select_db($database_name)or die("Database Error");
 
$user = $_POST['user'];
 
$query = "SELECT username FROM users WHERE username = '$user'";
 
$result = mysql_num_rows(mysql_query($query));
 
echo $result;
?>

ajaxcall.js

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
$(document).ready(function()
{
    var user    = $('#user');
    var lu      = $('#labeluser');
    var sb      = $('#sb');
    var bool;
 
    function checkusername()
    {
        if(user.val() == '')
        {
            lu.html("&nbsp&nbspUsername Required!"); 
            return false;
        }
        else
        {
            $.post ('checkuser.php',
                    {
                        user:user.val()
                    },
                    function (response)
                    {
                        if(response == 1)
                        {
                            bool =  false;
                            lu.html("&nbsp&nbspUsername Unavailable!");
                        } 
                        else if(response == 0)
                        {
                            bool =  true;
                            lu.html("&nbsp&nbspUsername Available");
                        } 
                    }
                    );
               return bool;
        }
 
    }
    sb.click(checkusername);
 
});

script SQL

Code :

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

1
2
3
4
5
6
7
CREATE DATABASE `tutorial` ;
 
CREATE TABLE `tutorial`.`users` (
`id` INT( 10 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 25 ) NOT NULL ,
`password` VARCHAR( 25 ) NOT NULL
) ENGINE = InnoDB;

Bonsoir;
je rencontre un problème au niveau de la fonction
checkusername() elle retourne toujours bool comme true ce qui bug mon script ; si je remplace return bool par return false mon script marche sauf que le boutton submit n'est plus cliquable
ce qui ne me permet plus de verifier un autre username.
aidez moi à comprendre et resoudre mon erreur SVP.

MrPringle · 25/09/2011, 01h37

C'est une requête Ajax, donc asymétrique, la fonction callback va être effectuée lors de la réponse du serveur, c'est à dire après ton "return bool;".

ichida · 25/09/2011, 01h43

Bonsoir merci de m'avoir répondu.
Je n'ai pas bien compris votre réponse, auriez-vous une solution à me proposer?

MrPringle · 25/09/2011, 02h54

Ajax fonctionne de manière asymétrique, ce qui veut dire que lors d'une requête, on envoie une demande au serveur et en l'attendant, le script suit son cours.

En l'occurence après votre "$.post", le return n'attend pas la réponse du serveur pour s'exécuter. Tout le traitement se passe dans la fonction callback, vous pouvez essayer quelque chose de ce style :

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
 
$(document).ready(function()
{
	var user = $('#user');
	var lu = $('#labeluser');
	var sb = $('#sb');
 
	function checkusername()
	{
		if(user.val() == '')
		{
			lu.html("&nbsp&nbspUsername Required!"); 
		}
		else
		{
			sb.attr('disabled', true);
			$.post (
				'checkuser.php',
				{
					user:user.val()
				},
				function (response)
				{
					if(response == 1)
					{
						lu.html("&nbsp&nbspUsername Unavailable!");
						sb.removeAttr('disabled');
					} 
					else if(response == 0)
					{
						lu.html("&nbsp&nbspUsername Available");
						$(this.form).submit();
					}
				}
			);
			return false;
		}
 
	}
	sb.click(checkusername);
 
});

PS. Il serait bon d'indenter votre code.

PS2. Il est préférable de déclencher l'événement sur sur le onSubmit du form plutôt que sur le click du bouton car dans ce second cas, presser entrée sur l'un des champs texte passe au travers votre vérification.

beegees · 25/09/2011, 18h23

Citation:

Ajax fonctionne de manière asymétrique,

je dirais plutôt de manière asynchrone.

MrPringle · 25/09/2011, 23h24

En effet... Le pire c'est que j'ai utilisé le mauvais adjectif dans mes deux posts.

beegees · 26/09/2011, 10h08

Citation:

Envoyé par MrPringle

En effet... Le pire c'est que j'ai utilisé le mauvais adjectif dans mes deux posts.

Pas très grave, tu as voulu aidé, c'est le principal

Merci

beegees

sekaijin · 26/09/2011, 12h44

il te suffit de faire un appel ajax synchrone
c'est un paramètre de l'appel à fournir

JQuery redéfinit (encapsule XMLHttpRequest) et donc la façon de faire un appel synchrone ou asynchrone dépend de JQuery

A+JYT

25/09/2011, 01h37	#2
MrPringle Membre habitué Mathias Philippe Développeur Web Inscription : septembre 2011 Messages : 75 Détails du profil Informations personnelles : Nom : Mathias Philippe Localisation : Philippines Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : septembre 2011 Messages : 75 Points : 121 Points : 121	C'est une requête Ajax, donc asymétrique, la fonction callback va être effectuée lors de la réponse du serveur, c'est à dire après ton "return bool;".
	00

25/09/2011, 01h43	#3
ichida Invité de passage Inscription : mai 2010 Messages : 10 Détails du profil Informations forums : Inscription : mai 2010 Messages : 10 Points : 1 Points : 1	Bonsoir merci de m'avoir répondu. Je n'ai pas bien compris votre réponse, auriez-vous une solution à me proposer?
	00

25/09/2011, 23h24	#6
MrPringle Membre habitué Mathias Philippe Développeur Web Inscription : septembre 2011 Messages : 75 Détails du profil Informations personnelles : Nom : Mathias Philippe Localisation : Philippines Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : septembre 2011 Messages : 75 Points : 121 Points : 121	En effet... Le pire c'est que j'ai utilisé le mauvais adjectif dans mes deux posts.
	00

26/09/2011, 12h44	#8
sekaijin Expert Confirmé Urbaniste Inscription : juillet 2004 Messages : 1 421 Détails du profil Informations personnelles : Sexe : Âge : 48 Localisation : France, Yvelines (Île de France) Informations professionnelles : Activité : Urbaniste Secteur : Santé Informations forums : Inscription : juillet 2004 Messages : 1 421 Points : 2 809 Points : 2 809	il te suffit de faire un appel ajax synchrone c'est un paramètre de l'appel à fournir JQuery redéfinit (encapsule XMLHttpRequest) et donc la façon de faire un appel synchrone ou asynchrone dépend de JQuery A+JYT
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email