web-dev-qa-db-fra.com

Appel Ajax à un composant à partir d'un élément de menu

J'utilise K2.

J'ai un élément de menu qui mène à une page contenant un introtexte et de petites images des 4 derniers articles d'une catégorie. Ceci est défini dans les paramètres de catégorie et l'élément de menu mène à la présentation de catégorie. Je voudrais afficher ce contenu sans recharger la page.

Comment puis-je faire une demande ajax quand un élément de menu est cliqué pour que ce contenu soit ajouté à l'élément suivant?

<section id="ajax-content"></section>
menu-itemajaxmenu-parameters
3
web-tiki

Je suppose que vous utilisez JQuery. Si vous utilisez Mootools, faites-le moi savoir et je mettrai à jour le tout. Votre appel AJAX peut ressembler à ceci:

        $.ajax({
           url : urlToSend,
           contentType : "application/json; charset=utf-8",
           type : 'get',
           cache : false,
           success : function(data) {
              successFunction(data);
           },
           error : function(data1, data2, data3) {

              alert(data3);
           }
        });

Bien sûr, changez le contentType pour qu'il soit ce dont vous avez besoin. Le type peut également être "post", auquel cas vous souhaitez ajouter une autre donnée de paramètre: your_data_to_be_passed_to_the_server,

Votre successFunction peut ressembler à ceci:

     successFunction : function(data) {
         jQuery('#ajax-content').html(data);
      },

Ou vous pouvez simplement mettre le jQuery ('# ajax-content'). Html (data); ligne dans la fonction de réussite AJAX si vous l’utilisez uniquement pour cet appel.

5
bgies

Vous allez gérer la plupart de cela dans votre JavaScript.

Dans Joomla !, définissez une classe CSS personnalisée sur l'élément de menu en question. Cela se fait avec l'option Style de lien CSS dans les Options de type de lien de votre élément de menu. Vous pouvez alors écouter un clic sur ce lien en référençant le style que vous avez défini dans votre JavaScript. N'oubliez pas d'utiliser event.preventDefault (); pour vous assurer que votre élément de menu ne provoque pas le rechargement de la page.

2
Zachary Draper