[AJAX] Simuler un onclick pour envoi de données

Bonjour à tous.

Je débute en AJAX et je bute sur un truc.

J'utilise 2 fonctions que voici :

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
function sendData(data, page, method, loc) {    
    if(document.all) { //Internet Explorer
        var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;
    }
    else { //Mozilla
        var XhrObj = new XMLHttpRequest();
    }
 
    //définition de l'endroit d'affichage:
    var content = document.getElementById(loc);
 
    //si on envoie par la méthode GET:
    if(method == "GET") {
        if(data == 'null') {
            //Ouverture du fichier sélectionné:
            XhrObj.open("GET", page);
        }
        else {
            //Ouverture du fichier en methode GET
            XhrObj.open("GET", page+"?"+data);
        }
    }//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);
    }
    else if(method == "POST") {
        XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        XhrObj.send(data);
    }//fin elseif
 
}//fin fonction SendData 
 
function changeProduit(taille, couleur, id_cat, qte) {
    sendData('taille='+taille+'&couleur='+couleur+'&id_cat='+id_cat+'&qte='+qte, 'taille_ajax.php', 'POST', 'id_taille');
    sendData('taille='+taille+'&couleur='+couleur+'&id_cat='+id_cat+'&qte='+qte, 'couleur_ajax.php', 'POST', 'id_couleur');
    sendData('taille='+taille+'&couleur='+couleur+'&id_cat='+id_cat+'&qte='+qte, 'bouton_ajax.php', 'POST', 'bouton_acheter');
    sendData('taille='+taille+'&couleur='+couleur+'&id_cat='+id_cat+'&qte='+qte, 'photo_ajax.php', 'POST', 'id_photo');
    sendData('taille='+taille+'&couleur='+couleur+'&id_cat='+id_cat+'&qte='+qte, 'form_ajax.php', 'POST', 'id_lien');
}

Puis, dans la page qui démarre l'ajax, j'ai :

Code:

1
2
3
4
5
6
echo "<FORM name=\"choix_taille_couleur\" method=\"POST\" action=\"".$_SERVER["REQUEST_URI"]."\">";
echo "<div id=\"id_taille\"><a href=\"javascript:void(0);\" onClick=\"changeProduit('".$code_prod."', '".$code_prod."', '".$id_cat."', '1');\" />Cliquer pour choisir couleur et taille</a></div>";
echo "<div id=\"id_taille\"></div>";
echo "<div id=\"id_couleur\"></div>";
echo "<div id=\"bouton_acheter\"></div>";
echo "</FORM>";

Mon but est que lorsque la page s'affiche, la fonction changeProduit() soit exécutee une première fois, sans intervention de l'internaute.
J'ai voulu essayer ceci :

Code:

1
2
3
4
5
echo "<script language=\"JavaScript\">"."\n";
echo "<!--"."\n";
echo "changeProduit(\"".$code_prod."\", \"".$code_prod."\", \"".$id_cat."\", \"1\");"."\n";
echo "// -->"."\n";
echo "</script>"."\n";

Mais j'ai une erreur dans la fonction sendData().

J'ai donc dû mettre ceci :

Code:

echo "<div id=\"id_taille\"><a href=\"javascript:void(0);\" onClick=\"changeProduit('".$code_prod."', '".$code_prod."', '".$id_cat."', '1');\" />Cliquer pour choisir couleur et taille</a></div>";

Mais franchement, c'est du bricolage et pas du tout pratique pour l'internaute.

Comment faire donc pour que la fonction changeProduit() fonctionne au chargement de la page (et donc que la fonction sendData() qu'elle appelle fonctionne) ?

Bonjour et bienvenue sur developpez.com,

Avant toute chose, il faut poster le code HTML généré et non le code PHP (on est dans le forum AJAX). :merci:

Pour répondre à question, tu pourrais utiliser l'événement onload="fonction" dans la balise body.

Désolé pour le PHP.

Voici l'exemple d'une page sur laquelle je travaille :
Page test

Pour tout faire apparaitre, je dois cliquer sur :
Cliquer pour choisir couleur et taille

La solution du onload dans le body ne va pas, car ça ne doit pas se produit sur toutes les pages.

J'ai rajouté dans ma fonction SendData :
Code:

1 2 3 if (content != null) { content.innerHTML = XhrObj.responseText; }
car c'est quand content vaut null que la fonction plante.

Mais la question est pourquoi avec un onclick "content" n'est pas null alors qu'en appelant la fonction comme ceci :
Code:

1 2 3 4 5 <script language=JavaScript>  </script>
il est null au moins une fois.