Comment récupérer le contenu d'une URL pour l'afficher dans une div ?

Prenons l'exemple du widget dernières actualités. L'objectif est le suivant : au clic du lien "en savoir plus", je verrai directement le détail de l'actualité dans une div, sans pour autant être rediriger vers la page souhaitée, qui reste au demeurant le fonctionnement standard.

Pour se faire, je peux utiliser le script suivant :

<script type="text/javascript">
<!--
$('.laClassDeMonLien').click(function(e){
var url = $(this).attr('href').replace(/.html/,'-getpagecontent.html');
$.ajax({
url: url,
success: function(text){
$('#conteneur').html('').append($('<div class="#contents"></div>').html(text));
}
});
return false;
});

//-->
</script>

Description :

En cliquant sur le lien "en savoir plus" (évènement de type click) qui aura la class "laClassDeMonLien", le contenu s'affichera dans la div "monConteneur" (de préférence une div à id unique). Les casses sont indiquées à titre indicatif, bien entendu il faudra les rajouter dans le template de votre choix.

L'évènement de type "click" peut facilement être modifiable : les types d'évènement javascript

Let'go ;)

Autre mode de fonctionnement, si vous souhaitez afficher du contenu dans une fenêtre modale vous pouvez suivre ce post : http://communaute.medialibs.com/forum/topic-1616.html

L'objectif est d'utiliser le plug-in nyromodal pour charger le contenu voulu. En plus des appels js du plug-in via le mainPage.html, il suffit d'ajouter ce script :

<script type="text/javascript">
<!--
$(function(){
$('.nyroModal').each(
function(i,val){
 $(val).click(
   function(){
     //window.open(this.href,"width=497,height=354,top=300,left=300");
     
   }
 );
 var href=$(val).attr('href');
 $(val).attr('href',href.replace('.html','-getpagecontent.html'));
}
);});
 
//-->
</script>

Puis d'ajouter la classe du script sur votre lien (pour cet exemple la classe est 'nyromodal').

<a class="nyromodal" title="lien" alt="lien"/></a>

Bonjour,

A titre d'information complémentaire sachez que vous pouvez utiliser d'autres plugs-in. La plupart disposent d'appel Ajax qui permet de récupérer le contenu d'une page via son url ou d'injecter le contenu de la page courante dans la fenêtre modale.

- http://fancybox.net/
- http://jacklmoore.com/colorbox/

Au besoin n'hésitez pas à solliciter une formation ;) http://communaute.medialibs.com/formations/catalogue-de-formations/2180-formation-personnalisee-aux-solutions-medialibs.html

Autre cas de figure qui permet de récupérer un contenu d'une url directement au chargement de la page :

 
<script type="text/javascript">
// jQuery en mode no-conflict
(function($){
 
// on cible le contenu que l'on veut récupérer (généralement un lien vers une autre page) et on ajoute la fonction "getpagecontent"
// dans le cas d'une rubrique masquée on peut directement mettre l'url en variable
// soit var url = 'http://monSite.fr/mesDerniÚresAnnonces/-getpagecontent.html';
 
  var url = $('#en_savoir_plus').attr('href').replace(/.html/,'-getpagecontent.html');
  $.ajax({
     url: url,
     success: function(code, status){
        //on recupere le text via getpagecontent puis isole un element
        var champ = $(code).find('.directorySupplementaryFields'); 
        //on fait apparaitre en plus le contenu recupere dans une div
        $('#rightbar').append(champ); 
        // On affiche le resultat dans la console                             
        // console.log(code);
     },
     error: function(resultat, status, erreur){
        // On affiche le resultat dans la console 
        // console.log(erreur);
     }
  });
})(jQuery)
</script>
 

Bonjour Manuel,

As-tu un exemple d'application ?