[AJAX] Ajax : execution aléatoire

Je dois réaliser le déroulement en ajax de plusieurs pages pour obtenir une execution plus fluide. Pour ce faire voici ma function javascript

Code:

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
<script type='text/JavaScript'>
/**
* Permet d'envoyer des données en GET ou POST en utilisant les XmlHttpRequest
*/
function sendData(data, page, method)
{
    if(document.all)
    {
        //Internet Explorer
        var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;
    }//fin if
    else
    {
        //Mozilla
        var XhrObj = new XMLHttpRequest();
    }//fin else
 
    //définition de l'endroit d'affichage:
    var content = document.getElementById("zone_avis");
 
    //si on envoie par la méthode GET:
    if(method == "GET")
    {
        if(data == 'null')
        {
            //Ouverture du fichier sélectionné:
            XhrObj.open("GET", page, true);
        }//fin if
        else
        {
            //Ouverture du fichier en methode GET
            XhrObj.open("GET", page+"?"+data, true);
        }//fin else
    }//fin if
    else if(method == "POST")
    {
        //Ouverture du fichier en methode POST
        XhrObj.open("POST", page);
    }//fin elseif
 
    //Ok pour la page cible
    XhrObj.onreadystatechange = function()
    {
        if (XhrObj.readyState == 4 && XhrObj.status == 200)
            content.innerHTML = XhrObj.responseText ;
    }    
 
    if(method == "GET")
    {
        XhrObj.send(null);
    }//fin if
    else if(method == "POST")
    {
        XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        XhrObj.send(data);
    }//fin elseif
}//fin fonction SendData
 
</script>

Je teste bien sur quel navigateur je me situe puisqu'avant j'ai eu des soucis en utlisant un petit framework. Je déclare ma balise <div> afin d'afficher les données dans cette partie de la page.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
            <p>
                <div id="zone_avis"><!-- c\'est ici que les données récupérées vont apparaître -->';
 
if (!tep_session_is_registered('customer_id')) {
    echo "
                    <a href=\"javascript:sendData('null','Zlogin.php?products_id=".$products_id.
                    "', 'GET')\">".TEXT_WRITE_REVIEW."</a>.<br>".TEXT_WRITE_REVIEW2." <a href='service_concours.php'>"
                    .TEXT_WRITE_REVIEW3."
                    </a>)";
} else {
    echo "
                    <a href=\"javascript:sendData('null','Zform.php', 'GET')\">".TEXT_WRITE_REVIEW5."</a>.<br>"
                    .TEXT_WRITE_REVIEW4."<a href='service_concours.php'>"
                    .TEXT_WRITE_REVIEW3."</a>)";
}
echo '
                </div>
            <p>

L'execution se déroule correctement suivant si l'utilisateur est loggué ou pas. Prenons le cas ou l'utilisateur est loggué.
Ma page Zlogin.php s'affiche correctement, mais cependant il y a un petit soucis puisque avant de transmettre les données du formulaire (vérifier si l'utilisateur a bien rempli le formulaire), la 1ère que l'utilisateur saisit, ma function ne s'execute pas (pas d'affichage d'alert), mais en revenant une deuxième fois à l'endroit du formulaire, la fonction s'execute correctement cela n'est pas un soucis de navigateur puisque cela se produit aussi bien sur firefox que sur IE.

voici le code de Zlogin.php:

Code:

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
 
   echo "<form name='reviews' method='post'>";
 
       echo "<table border='0' width='100%' cellspacing='0' cellpadding='0'>
        <tr>
           <td class='main'>" .tep_draw_textarea_field('review', 'soft', 67, 10). "</td>
        </tr>
        <tr>
           <td class='smallText' align='right'>" . TEXT_NO_HTML . "</td>
        </tr>
        <tr>
           <td class='main'><b>" . SUB_TITLE_RATING . "</b> " . TEXT_BAD . "
           <input type='radio' value='1' id='radio1' name='note'>
           <input type='radio' value='2' id='radio2' name='note'>
           <input type='radio' value='3' id='radio3' name='note'>
           <input type='radio' value='4' id='radio4' name='note'>
           <input type='radio' value='5' id='radio5' name='note'> " . TEXT_GOOD . "</td>
        </tr>
        </table></form>
        ";
 
echo "<br>
        <a href=\"javascript:sendData('null','Zajout.php?products_id=".$products_id."&rating='+getValRadio(document.reviews.note)+'&review='+document.reviews.review.value, 'GET')\" onClick=\" return verif_form();\">Valider</a>&nbsp;&nbsp;
        <a href=\"javascript:sendData('null','Zaccueil.php?products_id=".$products_id."', 'GET')\">Annuler</a>
        ";
}

voici le code de ma function de vérification:

Code:

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
 
function verif_form()
{
var error = false;
var message = 'Le formulaire n\'est pas valide, vous devez saisir : \n';
 
    if(document.reviews.review.value.length < <?php echo $size; ?>) {
            error = true;
            message = message + '* le champ commentaire (30 cartères minimum) \n';
    }
    if ((!document.getElementById('radio1').checked)
        && (!document.getElementById('radio2').checked)
        && (!document.getElementById('radio3').checked)
        && (!document.getElementById('radio4').checked)
        && (!document.getElementById('radio5').checked)){
            error = true;
            message = message + '* le champ note \n';
    }
    if (error == true){
        window.alert(message);
        return false;
    }
    else{
        return true;
    }
 
}

Je débute en Ajax, donc je demande votre aide car j'ai un peu de mal :(. Je vous remercie d'avance.