Discussion :

[delta6]

Salut à tous,

Mon premier post sur ce forum, faut ben une première, content d'être parmi vous

J'utilise jquery pour mes requêtes ajax et j'ai ce code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
$.ajax({
    url: "../scripts/mon_script_ajax.php",
    data: "id1="+$("#id1").val()+"&id2="+$("#id2").val(),
    error: function(jqXHR, textStatus, errorThrown) {
    $('#reponse').html('').html('<div class="error">Erreur !</div>');
    },
    success: function( data ) {
    $( "#reponse" ).html( data );
    }
});

Suite à ma requête ajax j'affiche sur ma page les infos (un prix dans cet exemple) dans une div ayant un id qui se nomme "reponse", je souhaite pouvoir afficher cette div "reponse" 2 fois sur ma page mais j'ai essayé ça ne fonctionne pas, la 2ième div "reponse" est vide.

Comment faut-il faire pour afficher à 2 endroits différents le même résultat de ma requête ajax ?

Merci pour vos réponses.

Bruno

PS : Je débute avec jquery

[vermine]

Bonjour,

Un id doit être unique dans une page. Donc vous devez créer une div qui a un autre id et appeler une seconde fois l'instruction dans le success avec le nouvel id.

[delta6]

Merci vermine,

Donc si je t'ai bien compris je suis obligé de faire cela :

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
 
$.ajax({
    url: "../scripts/mon_script_ajax.php",
    data: "id1="+$("#id1").val()+"&id2="+$("#id2").val(),
    error: function(jqXHR, textStatus, errorThrown) {
    $('#reponse_1').html('').html('<div class="error">Erreur !</div>');
    },
    success: function( data ) {
    $( "#reponse_1" ).html( data );
    }
});
$.ajax({
    url: "../scripts/mon_script_ajax.php",
    data: "id1="+$("#id1").val()+"&id2="+$("#id2").val(),
    error: function(jqXHR, textStatus, errorThrown) {
    $('#reponse_2').html('').html('<div class="error">Erreur !</div>');
    },
    success: function( data ) {
    $( "#reponse_2" ).html( data );
    }
});

et de récupérer mes valeurs dans une div "reponse_1" et une autre "reponse_2", c'est bien cela ?

[Bovino]

Non, tu n'es pas obligé de multiplier les requêtes pour ça...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
    url: "../scripts/mon_script_ajax.php",
    data: "id1="+$("#id1").val()+"&id2="+$("#id2").val(),
    error: function(jqXHR, textStatus, errorThrown) {
    $('#reponse').html('').html('<div class="error">Erreur !</div>');
    },
    success: function( data ) {
// Possibilité 1 : appeler deux fois html()
    $( "#reponse" ).html( data );
    $( "#reponse2" ).html( data );
// Possibilité 2 : adapter le sélecteur jQuery
    $( "#reponse, #reponse2" ).html( data );
    }
});

[delta6]

Ok merci pour ta réponse Bovino ça marche nickel

Une autre question : j'ai une page php dans laquelle il y a une requête ajax, lorsque je charge cette page la requête ajax va chercher les infos et les affichent, voici mon script :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
$.ajax({
    url: "../scripts/mon_script_ajax.php",
    data: "id1="+$("#id1").val()+"&id2="+$("#id2").val(),
    error: function(jqXHR, textStatus, errorThrown) {
    $('#reponse').html('').html('<div class="error">Erreur !</div>');
    },
    success: function( data ) {
    $( "#reponse, #reponse2" ).html( data );
    }
});

J'ai sur cette page des select et lorqu'on change la valeur d'un select ça met à jour une partie de la page grâce à la même requête ajax que ci-dessus, j'ai donc 2 fois la même requête ajax et ça donne cela :

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
 
$.ajax({
    url: "../scripts/mon_script_ajax.php",
    data: "id1="+$("#id1").val()+"&id2="+$("#id2").val(),
    error: function(jqXHR, textStatus, errorThrown) {
    $('#reponse').html('').html('<div class="error">Erreur !</div>');
    },
    success: function( data ) {
    $( "#reponse, #reponse2" ).html( data );
    }
});
$("select").change( function(){
$.ajax({
    url: "../scripts/mon_script_ajax.php",
    data: "id1="+$("#id1").val()+"&id2="+$("#id2").val(),
    error: function(jqXHR, textStatus, errorThrown) {
    $('#reponse').html('').html('<div class="error">Erreur !</div>');
    },
    success: function( data ) {
    $( "#reponse, #reponse2" ).html( data );
    }
});
});

Est-ce qu'il y a un moyen de raccourcir (condenser, fusionner) ce code ou pas ?

[Bovino]

La première chose à dire, c'est que lancer une requête AJAX au chargement de la page est une erreur de conception.
Les infos dont tu as besoin au chargement de la page peuvent être récupérées et utilisées à la création de celle-ci. Tu disposes donc en PHP de tous les éléments nécessaires à un affichage correct.

A part ça, rien ne t'empêche de mettre le code de la fonction dans une fonction nommée

Code :

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

1
2
3
function getAjax(){
    $.ajax(...);
}

et d'appeler cette fonction directement sur les événements appropriés

Code :

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

$("select").change(getAjax);