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

时间：2013-11-13 14:15:58

标签： javascript php ajax yii jquery-autocomplete

我在我的视图中包含了一个自动完成小部件，最初（第一页加载）工作正常，我做了一个ajax调用来更新我的主页内的CListView，那就是我的自动完成不显示完成的地方（输入框在那里，但是当用户类型没有加载任何建议）..我已经看到很多关于使用renderPartial和ajax调用无法正常工作的问题...任何有良好解决方案的人或请建议我..

这是我的主视图，在同一页面上被ajaxcall刷新.. 

   <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>";

这是在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>

以及包含来自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>

这里是通过ajax调用调用的方法来更新在代码开头发布的主页面中的消息div。

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)); 
}

1 个答案:

答案 0 :(得分：1)

你应该在ajax调用之后应用javascript的后期处理，否则一些javascript函数将无效..

你的渲染调用应该是这样的

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

请参阅此页面以获取更多信息http://www.yiiframework.com/doc/api/1.1/CController#renderPartial-detail

如果只更新div，你也应该使用renderPartial，render也会调用布局文件。

相关问题
最新问题