Yii自动完成小部件在ajax调用后无法正常工作

Question

I included an autocomplete widget inside my view which initially(first page load) works fine and i make an ajax call to update the CListView inside my main page and thats where my autocomplete doesnt show completions(the input box is there but when the user type no suggestion is loaded)..i have seen a lot of issue about using renderPartial and ajax calls not working...anyone with a good solution or please suggest me..

here is my main view that is being refreshed by ajaxcall on the same page..

   <div id="top" class="row-fluid" style="margin:0 30 auto 30; ;width:100%;">
    <?php 

    ?>
     <div id="messages"   style="width:35%!important;float:left;margin-left:100px;margin-  right:20px!important;position:relative; overflow: hidden;">
    <?php 

    $this->renderPartial('ajaxindex',array('dataProvider'=>$dataProvider),false,true);
    ?>

    <!--end of portlet"-->
    </div>
    <!--end of messages-->

    <div  id="nav-panel" class="portlet" style="float:left!important;
    width:40%!important;border:1px;box-shadow: 10px 10px 5px #888888;" > 
    <div class="panel panel-success  portlet-decoration">

      <!-- Default panel contents -->
      <div class="panel-heading">
    Filtering Panel >> Rwanda
    </div>

    </div>
    <table class="table   table-condensed">
    <tr>
    <th>Province</th>
    <th>Critical</th>
    <th>Attention</th>
    <th>Normal</th>
    <th>Nothing</th>
    <th>error</th>
    <th>count</th>


    </tr>
    <?php
    $i=1;

    $countNothing=0;
    $countNormal=0;
    $countAttention=0;
    $countCritical=0;
    $countError=0;
    $countAll=0;

    foreach($messagesByProvinces as $messagesByProvince){
    $province=Province::Model()->findByPk($i);
    $provinceParams=null;
    $messageParams=null;
    $critical=0;
    $attention=0;
    $normal=0;
    $nothing=0;
    $error=0;
    $count=count($messagesByProvince);
    foreach($messagesByProvince as $message){
        $countAll++;

        if($message->indice==0){ 
            $nothing++;
            $countNothing++;
        }
        elseif($message->indice==1){
            $normal++; 
            $countNormal++;
        }
        elseif($message->indice==2){
            $attention++;
            $countAttention++;
        }
        elseif($message->indice==3){
            $critical++;
            $countCritical++;
        } 
        else   {
            $error++; 
            $countError++;
            }
    }


        if($filter!==null){
        $provinceParams=array('message/getProvincereport','id'=>$province->id,'start_date'=>$filter['start_date'],'end_date'=>$filter['end_date']);
        $messageParams=array('message/LoadMessages','province_id'=>$province->id,'start_date'=>$filter['start_date'],'end_date'=>$filter['end_date']);

        }
        else {
        $provinceParams=array('message/getProvincereport','id'=>$province->id);
        $messageParams=array('message/LoadMessages','province_id'=>$province->id);
        }



    echo "<tr><td>".CHtml::link($province->name,$provinceParams)."</td>

        <td><span class='badge badge-important'>".CHtml::ajaxLink($critical,$this->associate('indice',3,$messageParams),array('update'=>'#messages','success'=>'js:function(data){ 
        var $response=$(data);
        var newData=$response.find(".container-fluid").html();
        $("#messages").html(newData);
        } '))."</span></td>";

Here is the view that is rendered in renderPartial

<script>
 function showInput(id){

if(document.getElementById('message-body-'+id).style.display=='block')
    document.getElementById('message-body-'+id).style.display='none';
else
    document.getElementById('message-body-'+id).style.display='block';

    ;
}
</script>
  <?php

  /* @var $this MessageController */
/* @var $dataProvider CActiveDataProvider */



 ?>



<div  id="portlet-messages" class="portlet" style="float:left!important;
width:100% !important;max-height:450px;overflow:auto;
overflow-x:hidden;" > 
<div class="panel panel-primary  portlet-decoration">

 <!-- Default panel contents -->
 <div class="panel-heading">
    <i class="icon-envelope"></i>   Messages    
 </div>

 </div>
 <table  class="table table-striped">
 <?php $this->widget('zii.widgets.CListView', array(
'dataProvider'=>$dataProvider,
'summaryText'=>'',
'enablePagination'=>false,
'itemView'=>'_ajaxview',
)); ?>
</table>
</div>

and the the embed view that contains the bogus code of from CAutoComplete Widget..

      <?php


     $indiceDisplay='Error'; 
     $label="label-default";

      if($data->indice==0){
    $indiceDisplay="Nothing";
    $label="label-info";

      }
      elseif($data->indice==1){
        $indiceDisplay="Normal";
    $label="label-success"; 
         }
      elseif($data->indice==2){
        $indiceDisplay="Attention";
    $label="label-warning";
        }
     elseif($data->indice==3){
    $indiceDisplay="Critical";
    $label="label-important";
        }
       else{
         $indiceDisplay="Error"; 
     $label="label-default";

        }

     echo "<tr class='view' >";
      ?>
     <td>

     <?php 
     echo CHtml::encode(User::Model()->findByPK($data->user_id)->names);echo "<br/></br>";
    ?>

    </td>
     <td>
     <?php 
     echo "<b>";
       echo CHtml::encode(  date_format(new DateTime($data->date), 'g:ia \o\n l jS F Y'));?>
      <?php 
        echo "&nbsp;";
        echo "&nbsp;";
    $linkText="<span class='label ".$label." '> ".$indiceDisplay." </span>";
    echo CHtml::link($linkText,array('message/index','indice'=>$data->indice));
    echo"</br>";
       ?>
     </b>
      </br>

     <?php echo CHtml::encode($data->content); ?>
     <br />



    <?php

        echo " <b>Location :</b> &nbsp; ".CHtml::link(Province::Model()->findByPk($data-  >province_id)->name,array('message/index','province_id'=>$data->province_id))."   ".Chtml::link(District::Model()->findByPk($data->district_id)- >name,array('message/index','district_id'=>$data->district_id))."    ".CHtml::link(Sector::Model()->findByPk($data->sector_id)-  >name,array('message/index','sector_id'=>$data->sector_id))."  ".CHtml::link(Cell::Model()-  >findByPk($data->cell_id)->name,array('message/index','cell_id'=>$data->cell_id))." ";


     ?>
       <div id="results-<?echo $data->id;?>">
    </div>


     <?php  echo "<div id='message-body-".$data->id."' style='font-size:12px;display:none;'>";?>

         <div class="input-append">
                <span>Add Category</span> 
                <?php $this->widget('CAutoComplete', array(
                        'model'=>$data,
                        'attribute'=>'category',
                        'url'=>array('message/suggestCategory'),
                        'multiple'=>true,
                        'htmlOptions'=>array('style'=>'height:11px;font-weight:    bold;','maxlength'=>255,'value'=>$data->category,'id'=>'category-'.$data->id,))); ?>

     <?php echo CHtml::ajaxSubmitButton('Save',$this-  >createUrl('message/categorize',array('id'=>$data->id,'category'=>'js:function(){return     $("#category-'.$data->id.'").val();}')),
                 array(
                     'type'=>'post',
                     'data'=>array('category'=>'js:function(){return $("#category-'.$data->id.'").val();}'),
                     'success'=>'function(data) {
                        if(data.status=="success"){
                         $("#results-'.$data->id.'").html(data);
                         $("#message-body-'.$data->id.'").style.display="none";

                        }
                         else{
                         $("#results-'.$data->id.'").html(data);
                         document.getElementById("message-body-'.$data->id.'").style.display="none";
                        }       
                    }',
                      ),array('id'=>'mybtn-'.$data->id,'class'=>'btn btn-small btn- primary','style'=>'height:21px')); 
    ?>
    </div>
    </div>
    </td>
    <td>
    <a class="btn btn-small" onclick="showInput(<?php echo $data->id;?>);"><i class="icon icon-   edit"></i>
   </a>
   </td>
   </tr>

here is the method that is called through the ajax call to update the message div in the main page posted at the begining of the code..

public function actionLoadmessages()
  { $criteria=$this->getCriteria();
    if(isset($_REQUEST['indice'])){
        $criteria->addCondition('indice=:ind');
        $criteria->params['ind']=$_REQUEST['indice'];   
    }
    $dataProvider=new CActiveDataProvider('Message',array('criteria'=>$criteria)); 
    $this->layout=null;

 $this->render('ajaxindex',array('dataProvider'=>$dataProvider)); 
}

Answer 1

You should apply post processing of javascript after the ajax call otherwise some javascript functions will not work ..

Your render call should be something like this

$this->renderPartial('ajaxindex',array('dataProvider'=>$dataProvider),false,true); 

Refer this page for more info http://www.yiiframework.com/doc/api/1.1/CController#renderPartial-detail

You should also use renderPartial if updating a div only, render will call layout files as well.