Bonjour,
J'utilise un système Ajax pour afficher des pages dans un conteneur.
Est-il possible de passer des variables GET avec ce système ? Sinon, comment faire ?
Merci par avance !
Oui pas de soucis, il suffit de passer les arguments dans l'url
function demoAjax() {
var xmlhttp = new XMLHttpRequest(); // on crée l'objet
xmlhttp.open("GET", "demo.php?fname=Henry&lname=Ford", false); // méthode, url, is-asynchrone
xmlhttp.send(null);
.. bloque en attendant la réponse
reprend
}
comme les argument sont déja dans l'url, il n'y a rien à passer dans le send, du coup on passe null
Ok, mais le pb c'est que la variable à passer est issue d'une bdd sql.
L'extrait de code qui suit t'aidera sans doute à comprendre ce que j'aimerai faire...
<?php
$reponse = $bdd->query('SELECT * FROM table');
while ($res = $reponse->fetch()) {
?>
<!-- Du code, du code, du code ... puis... -->
<a href="contenu.php?id=<?php $res['id']; ?>">LIEN</a>
<?php
}
$reponse->closeCursor();
?>
Cela affiche 10 bloques avec contenu texte, image et liens.
Est-il envisageable d'écrire PHP dans le code JS ? - Ce n'est peut-être pas très élégant et un peu farfelu, je ne sais pas car novice :-)
Ah, et côté JS, ça donne ceci :
$(document).ready(function() {
$("#menu a").click(function() {
page=$(this).attr("href");
$.ajax({
url: "repertoire/"+page,
cache: false,
dataType: 'HTML',
success: function (html) {
afficher(html);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
})
return false;
});
});
function afficher(data) {
$("#contenu").empty();
$("#contenu").append(data);
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "contenu.php?id=BMW", false);
xmlhttp.send(null);
}
Mais ce que j'aimerai vraiment ...
xmlhttp.open("GET", "contenu.php?ida=\"<?php $res['id'] ?>\"", false);
Non, pas de php côté js
Tu peux tout faire en php comme ceci
<?php
$reponse = $bdd->query('SELECT * FROM table');
while ($res = $reponse->fetch()) {
<!-- Du code, du code, du code ... puis... -->
echo "<a href="contenu.php?id=" . $res['id'] . ">LIEN</a>";
}
$reponse->closeCursor();
?>
plutôt qu'un echo, le mieux étant de concaténer dans une variable puis d'urlencoder le tout puis de faire un echo
Il faudrait récupérer ton lien généré dans la page appelant le script AJAX (tu peux le placer dans un input de type hidden par exemple), puis récupérer ce lien en JS (via un sélécteur tout bête $('input#mon_lien').val(); ). De cette façon tu aura ton lien sans avoir à faire 2 requêtes ajax. Tu me suis ?
Dans l'idée, je crois, mais concrétement, je ne vois pas comment écrire le code côté JS que je ne connais malheureusement pas encore :-( Un petit coup de main serait bienvenue :-)
<!-- Lien basique dans ma page -->
<a href="contenu.php?id=<?= $res['id']; ?>">LIEN</a>
Côté JS
$(document).ready(function() {
$("#menu a").click(function() {
page=$(this).attr("href");
$.ajax({
url: "articles/"+page,
cache: false,
dataType: 'HTML',
success: function (html) {
afficher(html);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
})
return false;
});
});
function afficher(data) {
$("#contenu").empty();
$("#contenu").append(data);
$('input#$lienblog').val(); // EST-CE QUE LE CODE TROUVE SA PLACE DANS CETTE FONCTION ? LE LIEN N'ÉTANT PAS CONNU D'AVANCE, QUEL VALEUR AJOUTER ?
}
Je ne comprends rien à ta fonction "afficher", quel est son rôle ?
Et du dis "LE LIEN N'ÉTANT PAS CONNU D'AVANCE", de quel lien parles-tu ? Ce n'est pas clair.
Essayes de réexpliquer ce que tu veux faire étape par étape (sans code).
afficher vide le contenu puis le rempli (Ajax) Ce que j'aimerai c'est pouvoir passer des variables de page en page (Ajax) Quand je dis le lien n'est pas connu d'avance, je veux dire qu'il doit être sous forme de variable dans le script JS et non pas en valeur absolue, pas comme ça : $('input#repertoire1/repertoire2/contenu.php?id=valeur').val();
En résumer :
<a href="contenu.php?id=<?php echo $donnees['id']; ?>">LIEN</a>
PHP
<a class="link" href="contenu.php?id=<?php echo $donnees['id']; ?>">LIEN</a>
JS
var href = $('.link').attr('href');
Ce qui te donnera le lien en JS.
Mais une fois que tu as ce lien, tu veux en faire quoi ? C'est ça que je ne comprends pas...
C'est l'id qui m'intéresse, il permettra d'afficher certaines infos plutôt que d'autres. En claire, si id = xxx alors extractions de données dans tel table, tel colones, etc.
Donc, var href récupére le lien, ok, mais comment le stocker dans une variable et/ou le récupérer dans la page de destination ? - Désolé mais je ne connais pas du tout JS. Je dois m'y mettre un jour, mais là je suis un peu en retard sur mon site -
Oups, désolé, href est la variable. Donc, je stock la variable dans href mais comment la récupérer ensuite ?
Tu peux créer ton propre attribut, par exemple 'data-id'
<a href="contenu.php?id=<?php echo $donnees['id']; ?>" data-id="<?php echo $donnees['id']; ?>">LIEN</a>
entsuite tu le lis avec
var href = $('.link').attr('data-id');
Quelque chose m'échappe. Un echo $_donnees['id']
m'affiche le bon id dans chacun des 10 bloques générés dans la page.
Mais si je teste la variable href avec un document write en js, l'id prend la même valeur dans les 10 bloques ! Comprends pas. :-(
Enfin, je ne parviens pas à récupérer cette variable dans ma page de destination.
Quand tu regardes le code source de ta page html, tu vois bien des id différents ?
Si oui ça vient de ton js, montre nous ta boucle
Je parle de la boucle while pour générer les 10 blocs avec la bdd sql. Oui, chaque data-id est correcte dans le code source de mon navigateur. Pour le JS je l'ai déjà posté plus haut, mais je le remets et en profite pour tout réxpliquer le plus simplement possible ;-)
Extrait de la page 'pages' :
<?php
$reponse = $bdd->query('SELECT * FROM table');
while ($res = $reponse->fetch()) {
?>
<!-- Du code, du code, du code ... puis... -->
<a href="contenu.php?id=<?php echo $donnees['ida']; ?>" data-id="<?php echo $donnees['ida']; ?>"
class="link">LIEN</a>
<?php
}
$reponse->closeCursor();
?>
Le code Ajax dans 'nav.js' :
$(document).ready(function() {
$("#menu a").click(function() {
page=$(this).attr("href");
$.ajax({
url: "repertoire/"+page,
cache: false,
dataType: 'HTML',
success: function (html) {
afficher(html);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
})
return false;
});
});
function afficher(data) {
$("#contenu").empty();
$("#contenu").append(data);
type="application/javascript";
var href = $('.link').attr('data-id'); // J'ai placé le stockage de la variable id dans la fonction afficher, mais peut-être vaut-il mieux créer une autre fonction...
}
La page insérée dans le conteneur (id=contenu) où je souhaite récupérer la variable id :
document.write("id vaut : ",href); // Ce test me renvoie toujours la même variable id quelque soit le lien sur lequel j'ai cliqué ! //
Voilà.
Merci d'avance !
:-)
PS : Quel est l'équivalent de var_dump en js ?
pour déboguer tu dois faire
console.log("mavar=" + mavar);
et le message s'affiche dans la console javascript du navigateur
Ton pb est lié au fait que javascript compile le code au début et la valeur de ta variable href est fixée trop tôt.
Autre chose, $('.link').attr('data-id') retourne un tableau des 'data-id' de tous les liens qui ont la classe .link
tu dois donc parcourir le tableau avec la méthode each()
$('.link').each( function (index, value) {
$document.write("id vaut " + $(this).attr('data-id'));
});
Bon, je reviendrai sur ajax et le passage de variable plus tard. Merci pour votre aide.
Argh, je voulais contourner le problème et y revenir plus tard mais ça me taraude ! Donc, j'ai utilisé each. Plus rien ne s'affichait. J'ai alors déclaré href en bas de page... et alors la même valeur qui s'est affichée 10 fois :-(
la fonction est appelée autant de fois qu'il y a d'éléments de classe 'link' et à chaque fois l'index augmente (on parcourt un tableau)
la value c'est la valeur du tableau à l'index 'index', pour nous, c'est une balise a
insert un console.log("index=" + index);
console.log("value=" + value);
console.log me renvoie cette erreur dans la console de chrome : Uncaught ReferenceError: index is not defined
et ensuite :
(anonymous function)jquery.min.js:2 (anonymous function)jquery.min.js:2 m.extend.globalEvaljquery.min.js:2 m.fn.extend.domManipjquery.min.js:2 m.fn.extend.appendnav.js:24 affichernav.js:11 $.ajax.successjquery.min.js:2 jjquery.min.js:2 k.fireWithjquery.min.js:2 xjquery.min.js:2 b
Et pour ce qui est de déclarer href plus tard, cela veut bien dire en bas de page et donc hors de la boucle while ?
Voici la structure de la page index.php au cas ou...
<script src="js/nav.js"></script>
<section id="contenu">
<?php
$reponse = $bdd->query('SELECT * FROM table');
while ($donnees = $reponse->fetch()) {
?>
<article>
<!-- Du code ... + lien -->
<a href="contenu.php?id=<?php echo $res['id']; ?>" data-id="<?php echo $res['id']; ?>"
class="link">LIEN</a>
<?php }
$reponse->closeCursor(); ?>
</section>
<script type="application/javascript">
var href = $('.link').attr('data-id');
document.write("La valeur de href est ",href); // Affiche toujours la même valeur
var href = $('.link').each( function (index, value) {
$document.write("id vaut " + $(this).attr('data-id')); // N'affiche rien
});
</script>
Bon, je laisse tomber car je suis largué. Je contourne le problème. Merci pour votre aide.
J'ai supprimé le $, ça ne fonctionne pas mieux. Je reprendrai plus tard car je me suis arraché pas mal de cheveux et je dois avancer. Merci à toi en tout cas !
Et ça ?
$data={};
$data= {
url: $(this).attr('data-url'), // ou $(this).attr("href");
id: $(this).attr('data-id')
};
var jqxhr = $.get( $data.url, $data)
.done(function(data, textStatus) {
$result = JSON.parse(data); // Un exemple de retour JSON
})
.fail(function() {
alert( "error" );
})
.always(function() {
});