Hola productiva comunidad. El siguiente proyecto se trata de un menú desplegable dinámico con la BD y muestra sus subcategorías cuando el mouse se posa en cierta categoría.
Todo funciona bien (las categorías y su subcategoría. Por ejemplo: Categoria-1 y su SUBCTEGORIA-1A), excepto cuando necesito que muestre una subcategoría dentro de otra (O SEA SUBCATERIA-1A:1), como muestro en la imagen:
Creo que el problema lo tengo en js 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
});
});
Mi BD según modelo de adyacencia:
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>