News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Jquery Ajax - Lista de categorias

Started by Dhayzon, January 28, 2017, 08:40:37 AM

Previous topic - Next topic

Dhayzon

esto es algo que estaba buscando hacer pero hace 4 meses atrás había encontrado la respuesta definitiva
inicie mostrando una lista de todas las categorías haciendo consultas ala base de datos..pero era muy complejo.
luego recordé que smf ya tiene  una forma de mostrar la lista de categorías desde cualquier punto del foro, el famoso jump to
que esta en esta ruta    -...../index.php?action=xmlhttp;sa=jumpto;xml

usando jquery ajax o simplemente  javascript podemos usar esa ruta para obtener las categorías.

un ejemplo sencillo seria

$(document).ready(function(){
  $("#cat-list").append("<ul></ul>");
  $.ajax({
    type: "GET",
    url: smf_scripturl+"?action=xmlhttp;sa=jumpto;xml",
    dataType: "xml",
    success: function(xml){
    console.log(xml);
    $(xml).find('smf').each(function(){    
      var Titles = $(this).find('item');
    Titles.each(function( index ) {
var  category = $( this ).attr('type');
var boardID = $( this ).attr('id')
  if (category !== 'board'){
  var disabled = ' category';
  var link =  $( this ).text();
  }
  else{
    var disabled = ' grupos';
    var name =  $( this ).text();
    var link = "<span class=\"color_cat\"></span> <a href=\""+smf_scripturl+"?board="+boardID+".0\">"+name+"</a>";
  }
$("<li class="+disabled+"></li>").html(link).appendTo("#cat-list ul");
});
     
    });
  },
  error: function() {
    alert("An error occurred while processing XML file.");
  }
  });
});



luego colocamos el div donde nos gustaría que se cargue la lista de categorías

<div id="cat-list"></div>

el resultado seria tipo
-Nombre de la categoria
   *categoria 1
   *mascategorias
-nombre de la categoria 2
  *asdsad
   * sadasd

es un código simple para que ustedes puedan mejorarlo, yo lo haré por ejemplo para que se muestre solo al hacer click en un botón que diga mostrar categorias,  etc. 

nota.
  no se consideran subforos ..... eso también seria parte para mejorar el codigo jquery

Vehement Works

Alguna imagen o demo para poder apreciar este código en acción de manera correcta.

- Saludos
Last released modifications: AdSense Mod|Font AweaZome BBC code

Advertisement: