A Tree view or folder view List Problem in codeigniter

Question

mhd_arif123 0 Newbie Poster

13 Years Ago

Hi there !

The code(in model) given below generates the list structure:

function getNavigation($parent_id = 0, $show_product = 0, $flg = 0 ){
                $query = $this->db->get_where('categories', array('parent_id' => $parent_id));
                //var_dump($query->result()); //exit;

                if($query->num_rows() ){
                    $this->navigation .= '<ul id="browser" class="filetree">';
                    foreach($query->result() as $v){
                        $this->navigation .= '<li> <span class="folder">';

                            if($flg) {

                            if($v->categories_id == $this->config->item('category_search_cid')){ //go to advanced search page
                                $this->navigation .= '<a href="'.site_url( 'category/showCustom/' . $v->categories_id ).'">';
                            }else{
                                //$this->navigation .= '<a href="'.site_url( 'product/prod_details/' . $v->parent_id ."/".$v->categories_id ).'">';
                                $this->navigation .= '<a href="'.site_url( 'product/category/'.$v->categories_id ).'">';
                            }

                            }

                        $this->navigation .= $v->categories_name;

                        if($flg) {
                            $this->navigation .= '</a>';
                        }

                        $this->getNavigation($v->categories_id, $show_product, 1 );
                        //show category product
                        if($show_product){
                            // ----------- Inner Lists Generation---------------
                            $this->navigation .= '<ul>';
                            $products = $this->getProductsByCID($v->categories_id);
                            if($products){
                                foreach($products as $p_v){
                                    $this->navigation .= '<li><span class="file">';
                                    if($p_v->url){
                                        $this->navigation .= '<a href="'.site_url('product/c/'.$p_v->url).'">'.$p_v->p_model.'</a>';
                                    }else{
                                        //$this->navigation .= '<a href="'.site_url('product/detail/'.$p_v->id).'">'.$p_v->p_model.'</a>';
                                        $this->navigation .= '<a href="'.site_url('product/detail/'.$p_v->id).'">'.$p_v->p_name.'</a>';
                                    }
                                    $this->navigation .= '</span></li>';
                                }
                            }
                            $this->navigation .= '</ul>';
                            // -----------Inner Lists Generation Ends---------------
                        }
                        //show category product end
                        $this->navigation .= '</span></li>';
                    }
                    $this->navigation .= '</ul>';


                }
            }

The code below is the view :

<div id="mainleft" class="mcon_left">
    <div  class="pro_nav" >  
    <div id="main">

        <?php echo $nav; ?>

    </div>
    <div class="mailus">
    <a href="mailto:inquiry@k52.com;globalsourcinghk@21cn.net"><img src="./images/mailus_img.png" /></a>
    </div>
    </div>

In header section of the site i included following files :

<!-- Treeview Starts-->
        <link rel="stylesheet" href="<?php  echo base_url();?>css/jquery.treeview.css" />
        <link rel="stylesheet" href="<?php  echo base_url();?>css/screen.css" />

        <script src="<?php  echo base_url();?>js/jquery.js" type="text/javascript"></script>
        <script src="<?php  echo base_url();?>js/jquery.cookie.js" type="text/javascript"></script>
        <script src="<?php  echo base_url();?>js/jquery.treeview.js" type="text/javascript"></script>
<!-- Treeview Ends-->

Please help me to fix it out .. Thanks in advance...

php:codeigniter

2 Contributors
1 Reply
1K Views
6 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by Member #120589

Dani AI

Generated 10 Months Ago

correctly asked for the symptom — the code itself shows likely causes. Three concrete problems stand out in 's routine that will break the tree view in most browsers and tree plugins:

A nested <ul> is generated before the </span> is closed, placing a block <ul> inside an inline <span> (invalid HTML). Tree plugins expect the child <ul> to be a sibling of the <span> inside the <li>, not a child of the span.
The root id="browser" and class="filetree" are added on every recursive level; IDs must be unique and the plugin should be initialized on the single root UL only.
The navigation string/property is not shown being reset or returned, which can cause duplicated output across calls or an empty result. Returning the built string or resetting the property before building is safer.

Fixes and quick examples:

/* build only one root UL; close span before recursing */
if ($query->num_rows()) {
  $this->navigation .= ($flg ? '<ul>' : '<ul id="browser" class="filetree">');
  foreach ($query->result() as $v) {
    $this->navigation .= '<li><span class="folder">...name...</span>';
    $this->getNavigation($v->categories_id, $show_product, 1);
    $this->navigation .= '</li>';
  }
  $this->navigation .= '</ul>';
}

Also reset or return the string (e.g. $this->navigation = ''; before first call, or return the HTML from the function). Initialize the plugin after DOM ready:

<script>
$(function(){ $('#browser').treeview({ collapsed:true, persist:'location' }); });
</script>

Debugging checklist: view page source to confirm only one id="browser", inspect DOM to ensure <ul>s are siblings of span, check the browser console for JS errors and the Network tab for missing script/CSS 404s, and verify jQuery loads before the tree plugin.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Member #120589 · Answer 1 · 2013-07-19T15:46:52+00:00

You don't mention what the problem is. This would give us a clue as to what we should be looking for.