mettre à jour un div au clic

Par AaFrederic Husson, il y a 8 ans

Javascript

bonjour,

Quand je clique sur le lien ci-dessous cela m'ouvre une colorbox avec la class "rech"

<a href="fiche_cli/index.php?pseudo=<?php echo $data['pseudo']; ?>" class="btn rech">Visiter</a>

je voudrais en même temps que ce même clic me mette à jour la div suivante

<div id="url_photos"> <?php $sql2 = "SELECT adresse FROM photos WHERE pseudo='".$_GET["pseudo"]."'"; $req2 = mysql_query($sql2) or die('Erreur SQL !<br>'.$sql2.'<br>'.mysql_error()); while($data2 = mysql_fetch_array($req2)) { echo '<a href="/photos/'.$data2['adresse'].'" class="photos_profil2">photos</a>'; } ?> </div>

j'ai donc fait ceci en début de page mais ça ne fonctionne pas:

$(document).ready(function() { $("body").on('click', '.rech',function(event) { event.preventDefault(); var url = $(this).prop('href'); $("#url_photos").load(url); }); });

13 réponses

Pierrot01, il y a 8 ans

Salut,
je présume que tu fais pareil pour ta class btn ?

@plus
Pierre

AaFrederic Husson, il y a 8 ans

non btn c'est du juste du css

Pierrot01, il y a 8 ans

Salut,

$(document).ready(function() { $('.rech').on('click',function(event) { event.preventDefault(); $("#url_photos").load($(this).prop('href')); }); });

essayes avec ça ;)

@plus
Pierre

AaFrederic Husson, il y a 8 ans

arf je fait n'importe quoi là

apres vérification ça fonctionne j'ai mal cherché dans mon code mais là ce que je fait c'est affiché le code de la page appelé dans la div "url_photos"

alors que l'objectif est de recuperer les photos de l'utilisateur en question

Lartak, il y a 8 ans

Bonjour.
C'est sur que si dans la page que tu appelles en ajax, il y a le/les lien (s), ainsi que d'autre code HTML incluant la DIV ayant l'ID url_photos, tu vas avoir un problème.

AaFrederic Husson, il y a 8 ans

ça fonctionneras mieux ainsi mais j'arrive pas a recuperer la valeur du pseudo j'ai un message d'erreur concernant urlParam

$(document).ready(function() { $( '.rech').on('click' ,function(event) { event.preventDefault(); var url = $(this).prop('pseudo'); $.ajax({ url: "recup_photos.php?pseudo=" + $.urlParam('pseudo'), // Ton fichier ou se trouve ton chat success: function(retour){ $('#url_photos').html(retour); // rafraichi toute ta DIV "bien sur il lui faut un id " } }); }); });
Lartak, il y a 8 ans

D'où est-ce que tu sors $.urlParam ?
Tu devrais plutôt utiliser URLSearchParams.get.
Exemple :

var url = $(this).attr('href'), params = new URLSearchParams(url), pseudo = params.get('pseudo');
AaFrederic Husson, il y a 8 ans

openclassroom j'ai trouvé ça sur le forum ils proposais cette solution pour recuperer des variables get

Lartak, il y a 8 ans

Tu peux vérifier via la documentation de l'API de jQuery et sur DevDocs, tu verras que urlParam n'existe pas, ou du moins n'existe plus.

AaFrederic Husson, il y a 8 ans

j'ai URLSearchParams is not defined

$(document).ready(function() { $( '.rech').on('click' ,function(event) { event.preventDefault(); var url = $(this).prop('href'); var params = new URLSearchParams(url); pseudo = params.get('pseudo'); alert(url); $.ajax({ url: "recup_photos.php?pseudo=" + pseudo, // Ton fichier ou se trouve ton chat success: function(retour){ $('#url_photos').html(retour); // rafraichi toute ta DIV "bien sur il lui faut un id " } }); }); });
Lartak, il y a 8 ans

Il semblerait en fait que URLSearchParams ne soit pas supporté par tous les navigateurs.
Le plus simple serait que tu définisses la valeur du pseudo dans un data attribut sur ton lien, par exemple :

<a href="fiche_cli/index.php?pseudo=<?php echo $data['pseudo']; ?>" class="btn rech" data-value="<?php echo $data['pseudo']; ?>">Visiter</a>

Puis :

var pseudo = $(this).data('value');
Pierrot01, il y a 8 ans

sinon, ça, ça irai ?

$.urlParam = function(name){ var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href); if (results==null){ return null; } else{ return decodeURI(results[1]) || 0; } }

@plus

Pierre

AaFrederic Husson, il y a 8 ans

La solution de Larak me semble bien pourtant c'est ce que j'avais fait au début mais sans succès en tout ça ça fonctionne à merveille

merci à tous les deux