Afficher deux fois les infos

Version imprimable

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:

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

12/03/2013, 12h03
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.

Merci vermine,

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

Code:

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 ?

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

Code:

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 );
    }
});

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

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:

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:

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 ?

12/03/2013, 18h42
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:

1 2 3 function getAjax(){ $.ajax(...); }
et d'appeler cette fonction directement sur les événements appropriés

Code:

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

Merci pour ta réponse Bovino, je vais revoir mon erreur de conception.

Autre chose, j'ai une série de 2 requêtes ajax en cascade, ma première requête ajax me permet de trier mes produits via des select, une fois ces produits listés (trié dans un tableau html, une par ligne dans une frame) il y a des boutons radios à gauche de chaque ligne, lorsqu'on clique sur un bouton radio je voudrais via une nouvelle requête ajax que ça me mette à jour le prix total en fonction du prix du produit sur lequel on vient de cliquer.

J'arrive à afficher le prix total au chargement de la page et lorsque je clic sur un bouton radio mais lorsque je clic sur un radio mon prix total se met à jour mais ma liste de produits disparait et j'ai le loader qui s'affiche à la place, comment régler ce problème ?

Au début de ma première requête ajax j'ai ce code pour afficher le loader :
Code:

1 2 3 4 $(document).ajaxStart(function() { var loader = "../images/ajax-loader.gif"; $('#frame').html('').html('<img src="' + loader + '" alt="#">'); });
Ma dernière requête ajax ressemble à cela :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 $(document).ready(function() { $(".num_produit").click( function(){ $.ajax({ url: "../scripts/ajax/ajaxRequete.php", data: "num_produit="+$('input[name=num_produit]:checked').val()+"&prix_accessoire="+$("#prix_accessoire").val(), error: function(jqXHR, textStatus, errorThrown) { $('#reponse').html('').html('<div class="error">Erreur !</div>'); }, success: function( data ) { $( "#reponse, #reponse_2" ).html( data ); } }); }); });
J'ai des boutons radios qui ressemblent à cela :

Code:

<input type="radio" name="num_produit" id="num_produit" class="num_produit" value="1256687">

Merci pour vos réponses et votre aide.

Bruno

13/03/2013, 15h12
delta6
J'ai lu qu'il existait une fonction ajaxStop.

J'ai ce code qui charge le loader à chaque requête ajax :
Code:

1 2 3 4 5 $(document).ajaxStart(function() { var loader = "../images/ajax-loader.gif"; $('#frame').html('').html('<img src="' + loader + '" alt="#">'); });
et je voudrais ajouter une fonction ajaxStop qui masque le loader après que toutes mes requêtes ajax aient été exécuté, quel serait le code à rajouter pour faire cela ?
Code:

1 2 3 4 $(document).ajaxStop(function() { ....... });
Merci pour votre aide.

Bruno