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

[delta6]

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 :

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

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 :

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

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 html :

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

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

Merci pour vos réponses et votre aide.

Bruno

[delta6]

J'ai lu qu'il existait une fonction ajaxStop.

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

Code :

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

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 :

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

1
2
3
4
 
$(document).ajaxStop(function() {
.......
});

Merci pour votre aide.

Bruno