CJuiAutoComplete to trigger gridview search

Yii 1.1 General Discussion
1

Hi, Im new to yii and need some help.

I have CJuiAutoComplete working and it’s showing values from the database - I have it returning the ID from the database.

Upon selection of a value from the autocomplete, I want a GridView to show data based on the ID that was returned by auto complete.

For example, imagine the autocomplete is showing a list of companies and when I select a company, a grid view below shows a list of the companies invoices.

I can’t figure out how to trigger the grid view to look up the invoices database based on the company Id that’s returned by the auto complete.

I have worked out that in CJuiAutoComplete I need to use ‘select’ as in:

‘options’=>array(

	'select'=&gt;'<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/huh.gif' class='bbc_emoticon' alt='???' />??'

)

Can someone please help me with this. Since i’m new Id’ really appreciate some workable code that I can hopefully work with.

Thanks for your help.

2

Well you can check this wiki (including its comments like this one).

Also, if you have JS/jQuery background, here’s the official plugin doc.

Last but not least, this previous thread on the forum itself :)

3

Thanks, I had already seen these articles and went through them again throughly and I still cannot work out what I need to do.

I know how to set up autocomplete, and have it working fine - I can’t get it to trigger a grid view to do a search and display the results.

I’m getting really frustrated here with yii - I’ve spent countless hours and there’s no proper examples out there to show how to do something basic.

Can someone please help me.

4

Ok, I’ve overlooked your real goal

I’d do it differently without CJuiAutocomplete widget, but with the same JUI plugin however, in addition to the selectToAutoComplete plugin

It becomes very easy :)

[list=1]

[*]Make sure you register the needed js files.

[*]Initialize the autocomplete on first load.

[*]Re-initialize it after grid updates (because the grid gets rendered again).

[/list]

Real-life example:


Yii::app()->clientScript->registerCoreScript('jquery-ui');

Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl . '/js/jquery.select-to-autocomplete.js', CClientScript::POS_END);


Yii::app()->clientScript->registerScript('search', "

$('.search-form form').submit(function(){

	$.fn.yiiGridView.update('model-grid', {

		data: $(this).serialize()

	});

	return false;

});


$('select[name=\"Model[dropdown]\"]').selectToAutocomplete();    

");

?>


<?php $this->widget('zii.widgets.grid.CGridView', array(

    'id'=>'model-grid',

    'dataProvider'=>$model->search(),

    'filter'=>$model,

    'afterAjaxUpdate'=>"js:function(id, data){

        $('select[name=\"Model[dropdown]\"]').selectToAutocomplete();

    }",

    'columns'=>array(

        array(

            'name'=>'dropdown',

            …

        ),

    ),

)); ?>

Edit: it’s not perfect, as it works better when you hit the return key to select the desired option. Using the mouse needs a little more work as far as I know.

[size=“2”]Edit 2 : Ok, I must be completely asleep. No, I haven’t overlooked your real goal if I get it well. So the code above is completely useless to you. My first post is what I’d do in that case. Can you share your working codes so that someone can help?[/size]

5

This is what I currently have:




View:

$this->widget('zii.widgets.jui.CJuiAutoComplete', array(

        'model'=>$model,

        'source'=>$this->createUrl('Clients/getNames'),

        // additional javascript options for the autocomplete plugin

        'options'=>array(

                'select'=>'js: function(event, ui) {     

                         $.fn.yiiGridView.update("invoices-grid", {

                                // CODE NEEDED HERE to trigger gridview to search invoices

                               //  where ClientID in invoices table matches ClientID from autocomplete

                 });


                }'

        ),

        

));


$this->widget('zii.widgets.grid.CGridView', array(

                'id'=>'invoices-grid',  

                'dataProvider'=>$model->searchInvoices( /* do I need to pass ClientID from autocomplete? */ ),   

                'columns'=>array(

                  ..........

                ),

));

model:




public function searchInvoices($ClientID)

{

        $criteria=new CDbCriteria;

        $criteria->addCondition('t.ClientID="'.$ClientID.'"');          

                                

        return new CActiveDataProvider($this, array(

                'criteria'=>$criteria,

        ));

}

By default the grid view will be empty - the user types in a client name in the autocomplete and chooses the client they want - the gridview needs to show a list of invoices for the client that was selected.

I have the autocomplete working fine, i.e it returns the ClientID. I don’t know how to get the gridview to show a list of invoices matching on the ClientID returned by the autocomplete.

6

Ok, I suppose a Client and a related Invoice models, the latter holding a clientId field

In my opinion, it would be straightforward to do it like this:

[list=1]

[*]In your autocomplete, add an ajax call passing the widget value (clientId) to a listInvoices action in your Invoice controller;

[*]That listInvoices action gets a clientId as an argument, and partially renders a view with a grid in it (see next). Its code is like the actionAdmin you find in the standard Gii CRUD, and that makes the grid filterable and searchable;

[*]Put the CGridView in a separate view to be partially rendered for the Invoice model.

[/list]

Something like this:

[list=1]

[*]Your view


<?php $this->widget('zii.widgets.jui.CJuiAutoComplete', array(

        'model'=>$model,

        'source'=>$this->createUrl('Clients/getNames'),

        'options'=>array(

                'select'=>'js: function(event, ui) {     

                         $.get(

                               "' . $this->createUrl('invoice/listInvoices') . '",

                               ui.value,

                               function(data) {

                                   $("#gridDiv").html(data);

                               }

                         );

                }'

        ),

)); ?>

<div id="gridDiv"></div>

[*]In your Invoice controller:


public function actionListInvoices($clientId)

{

    $model=new Invoice('search');

    $model->unsetAttributes();  // clear any default values

    $model->clientId = $clientId;

    if(isset($_GET['Invoice']))

        $model->attributes=$_GET['Invoice'];

    $this->renderPartial('_invoices', array('model'=>$model), false, true);

}

[*]Your _invoices.php view


<?php $this->widget('zii.widgets.grid.CGridView', array(

    'id'=>'invoices-grid',

    // Here we're gonna use Gii's standard Invoice model's search() method

    'dataProvider'=>$model->search(),

    'filter'=>$model,

    'columns'=>array(

        …

    ),

)); ?>

[/list]

Well it’s not tested, so it may have typos or errors

Also, there is a very detailed wiki that may give you further ideas.

7

Thanks for your help.

I still can’t get this to work. I’m at wits ends with this! So frustrating!

Only the autocomplete is working - nothing else. I only see the autocomplete, I select a name and nothing happens.

8

Maybe you should post what is not working, a typo happens to everyone :)

Of course, you have to be sure that the actions you’ve added are authorized in your controller.

Also, you should inspect your output, and check the "real" jQuery code output by Yii, and debug that code.

9

One thing: in the view file I suggested, you should replace ui.value by ui.item.id or ui.item.value (depending on where you return the client Id, supposing you return standard id / value pairs)

I guess you should post your code anyway