problem with CTreeview

Yii 1.1 General Discussion
1

firstly excuse my English

I have the following problem, in my main layouts in the main, in some place I have a CTreeview that I show it collapsed, but every time that I go to another pages, the CTreview is deformed some seconds and later it is shown correctly, that is to say it is shown correctly after some second.

collapsed

1644

collapsed.png

normal

1646

normal.png

deformed

1645

deformed.png




public function initCTreview()

{

//$data=here I build the array $data, I didn't put the code 

$this->widget('system.web.widgets.CTreeView', array(

    'data'=>$data ,

	'collapsed'=>true,

	'animated'=>'normal',

	'control'=>'#treeviewcontrol',

	'url'=>array('frameset/getTreeMenu'),

    'htmlOptions'=>array(

		'class'=>'filetree treeview-famfamfam',

		

	),

 ));

}

layouts main.php




<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<!-- blueprint CSS framework -->

	<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/screen.css" media="screen, projection" />

	<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/print.css" media="print" />

	<!--[if lt IE 8]>

	<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/ie.css" media="screen, projection" />

	<![endif]-->

	<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/main.css" />

	<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/form.css" />

    <link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/default.css" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Cárnico</title>

</head>

<style type="text/css">

.normal

{

 cursor:pointer;

 color:#000000; 

 background-color:#FFFGHF;

}

</style>

<body>

<div class="main_container">

   <div class="izq_container">

   <div class="izq_top_container">

         <div class="logo"><img src="<?php echo Yii::app()->request->baseUrl; ?>/images/carnico/logo.png" width="240" height="133"/></div>

       </div>

              

       <div class="menu">

        

        <div class="body_menu">

        <div class="top_menu_azul">

        <div class="icono"><img src="<?php echo Yii::app()->request->baseUrl; ?>/images/carnico/icono.png"/></div>

         <div class="texto_menu">Navegación</div>

         </div>

          <div class="item_menu">

             <?php 

              $this->initCTreview();

              //echo $content;

             ?>

          </div>

        </div>

       </div>

   </div>

  next ....
2

Check this similar thread - http://www.yiiframework.com/forum/index.php?/topic/19003-

3

According to what I understood

I don’t invoke directly to the method, I make this

Yii::app()->clientScript->registerScript(‘initCTreview’, "

        &#036;.ajax({


		    url:'&quot;.&#036;this-&gt;createUrl('carnico/initCTreview').&quot;',


            success:function(result){


				resultado =  result;


             },


           complete:function(XMLHttpRequest, textStatus){


              setTimeout(&#036;('.item_menu').html(resultado),400);


                


           }  


          });


        &quot;);

but the result is not what I want

1659

resultado.png

4

Hi PLC8407,

What I did to fight the FUOC is to:

  1. Hide the navigation

  2. Show the reload gif instead of the navigation

  3. After AJAX complete, I set a delay of 300ms

  4. Hide the reload.gif,show the navigation

5

you can put an example with code

6

You are loading your tree along with the page,and I am loading the tree dynamically using AJAX so my sample won’t be applicable to you.

At any rate, here’s a more applicable solution to your situation:

  1. Upon loading the page, set the visibility of the tree div to ‘hidden’ first so FOUC won’tbe seen (show loading animation so that users know that something is loading in that part of the page)

  2. Set the loading animation to run for like 500ms, then after that hide the loading animation and set the visibility of the tree div to ‘block’. If you can still see the FOUC, increase the delay to 600ms or 700ms (or lessen it if 300ms will do).

That’s about it. Good luck :)

7

thank you macinville, this way it works

Yii::app()->clientScript->registerScript(‘ocultar_treeview’, "

 &#036;('#cargando').css('display', 'none');


 &#036;('#treeview').css('display', 'block');

");

<div class="item_menu" >

       &lt;div id=&quot;cargando&quot; style=&quot;display:block; color: green;&quot;&gt;&lt;img  src=&quot;&lt;?php echo Yii::app()-&gt;request-&gt;baseUrl; ?&gt;/images/carnico/loading.gif&quot;/&gt;Cargando...&lt;/div&gt;


       &lt;div id='treeview' style=&quot;display:none &quot;&gt;


       &lt;?php 


         &#036;data = &#036;this-&gt;initCTreview();


         &#036;this-&gt;widget('system.web.widgets.CTreeView', array(


            'id'=&gt;'areas',


            'data'=&gt;&#036;data ,


            //'collapsed'=&gt;false,


           'animated'=&gt;'normal',


           'control'=&gt;'#treeviewcontrol',


           'url'=&gt;array('frameset/getTreeMenu'),


           'htmlOptions'=&gt;array(


	         'class'=&gt;'filetree treeview-famfamfam',


	


            ),


        ));


        ?&gt;


       &lt;/div&gt;  


      &lt;/div&gt;


    &lt;/div&gt;
8

I was just about to create a thread for this particular issue, good thing I found this post.

I didn’t know that such weirdness in page loading is called FOUC :)