Hola amigos. Mi proyecto es un menú dinámico donde las categorías y subcategorías (submenues) son extraídas desde una BD. Todo funciona bien hasta el submenú primario porque cuando se trata del submenú secundario no se cómo mostrarlos en Json según su primario.
Ejemplo del funcionamiento (botón "productos"):
http://www.fravega.com/
Ejemplo gráfico del proyecto:
Ojalá puedan ayudarme por favor. Aquí van los códigos:
Aquí tengo el problema,
en Json:
Código:
$(document).ready(function()
{
$.getJSON("categories.php?callback=?", function(data)
{
$.each(data.Categorias, function(i, category)
{
var subjsondata='';
$.each(category.subCategorias1, function(i, subCategorias1)
{
subjsondata += "<li>"+subCategorias1.name+"</li>";
});
var jsondata ="<li id='"+category.cat_id+"' class='category'>"+category.name+"<ul id='hide"+category.cat_id+"' class='hideul'>"+subjsondata+"</ul></li>";
$(jsondata).appendTo("#menu_ul");
});
}
);
$('#menu_ul').on('mouseover', '.category', function(event){
$("#menu_slider").show();
var id=$(this).attr('id');
var V=$("#hide"+id).html();
$("#submenu_ul").html(V);
$("#menu_slider").css({"background":"#0F0","width":"600px" });
});
//Mouse click on my account link
$("#menu_box").mouseup(function()
{
return false
});
});
categories.php:
Código PHP:
$user = 'root';
$pass = '';
$conn = new PDO('mysql:host=localhost;dbname=pruebamodadyacencia1', $user, $pass);
$queryCat = $conn->prepare('select cat_id,name from categories1 where parent=0');
$queryCat->execute();
// parent categories node
$categories = array("Categorias" => array());
// juego de resultados:
while($rowCat = $queryCat->fetch(PDO::FETCH_ASSOC)) {
$idCat = $rowCat['cat_id'];
$querySubcat1 = $conn->prepare("select cat_id,name from categories1 where parent='$idCat'");
$querySubcat1->execute();
// Seleccionamos categorías:
$category = array(); // temp array
$category["cat_id"] = $rowCat ["cat_id"];
$category["name"] = utf8_encode ($rowCat ["name"]);
$category["subCategorias1"] = array(); // subcategories again an array
while($rowSub1 = $querySubcat1->fetch(PDO::FETCH_ASSOC)) {
$idSubcat1 = $rowSub1['cat_id'];
$querySubcat2 = $conn->prepare("select cat_id,name from categories1 where parent='$idSubcat1'");
$querySubcat2->execute();
// Seleccionamos subcategorías primarias:
$subcat1 = array(); // temp array
$subcat1["cat_id"] = $rowSub1['cat_id'];
$subcat1["name"] = utf8_encode ($rowSub1['name']);
$subcat1["subCategorias2"] = array(); // subcategories again an array
/********************************/
while($rowSub2 = $querySubcat2->fetch(PDO::FETCH_ASSOC)) {
/*Muestra todas las subcategorías que los valores
del 'parent' sean iguales a los 'cat_id'.
Este caso:
SUBCATEGORIA-1:A1 y SUBCATEGORÍA-1:A2*/
// Seleccionamos subcategorías secundarias:
$subcat2 = array(); // temp array
$subcat2["cat_id"] = $rowSub2['cat_id'];
$subcat2["name"] = utf8_encode ($rowSub2['name']);
// pushing sub category into subcategories node
array_push($subcat1["subCategorias2"], $subcat2);
}
/********************************/
// pushing sub category into subcategories node
array_push($category["subCategorias1"], $subcat1);
}
// pushing sinlge category into parent
array_push($categories["Categorias"], $category);
}
echo ((isset($_GET['callback'])) ? $_GET['callback'] : "") . '(' . json_encode($categories) . ')';
HTML: Código HTML:
<nav id="productos">
<h5 id="botProd">PRODUCTOS</h5>
<div id="menuCategorias">
<div id='menu_box' class='shadow'>
<ul id='menu_ul'>
</ul>
</div>
<div id='menu_slider' class='sshadow'>
<ul id='submenu_ul'>
</ul>
</div>
</div>
</nav>