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

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

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

retour de fonction ( return) en javascript

jQuery

Discussions similaires

Partager

Partager