mettre à jour un div au clic

AaFrederic Husson
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

Lartak
Réponse acceptée

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

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

@plus
Pierre

AaFrederic Husson
Auteur

non btn c'est du juste du css

Pierrot01

Salut,

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

essayes avec ça ;)

@plus
Pierre

AaFrederic Husson
Auteur

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

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
Auteur

ç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

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
Auteur

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

Lartak

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
Auteur

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

  });
});
Pierrot01

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
Auteur

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