Hi,
How do I search a CGridView using JQuery or javascript.
James.
Hi,
How do I search a CGridView using JQuery or javascript.
James.
Your question is not really clear…
Explain more about what you mean by searching with javascript?
What you need to search where you need to search?
Do you have pages there as by searching with javascript you cannot search other pages?
What to do when you find the result?
Ok I want to know how to update a CGridView with a set of search results that are being returned from the controller.
I have a CGridView with a search bar at the top, I know how to use the criteria to search the results etc in the controller.
I know how to make a call to the controller from ajax jquery.
What I need to know is how do I update the CGridView contents using the returned result from the controller and what format does the returned result need to be in?
It needs to update the CGridView using ajax.
Explain more about what you mean by searching with javascript?
I have CGridView that needs the results searchable by javascript / ajax.
What you need to search where you need to search?
I need to first name, last name and email. This is not too important as I have the controller code to do this.
Do you have pages there as by searching with javascript you cannot search other pages?
This is not what I mean.
What to do when you find the result?
When the result is found in the controller, I want to update the CGridView using Ajax.
Man you responded to every question I posted… those where just some type of questions that got to my mind thinking about what could be your use case… it was not intended that you respond to everyone of them… they where there just so that you understand that if you want to get proper help you need to post proper question…
To update the CGridView you can use $.fn.yiiGridView.update()…
Here are two threads about gridview update, maybe they can give some idea:
Ok thanks, yes I have seen this before …
$.fn.yiiGridView.update()
I am trying to get it to work. I have this …
$.fn.yiiGridView.update(
"yw0",
{data: ajaxRequest}
)
Could anyone please tell me what is suppose to go in the ajaxRequest data variable, what format does it have to be in? Is it a JSON object, is it an array, what exactly is it?
The format is standard-looking query string…
you can use the jQuery serialize() method for it…
Ok, would this be similar to ?first_name=James
?
Ok thanks.
Can anyone see what is wrong with this …
<script>
var ajaxUpdateTimeout;
var ajaxRequest;
$("input#search").keyup(function() {
ajaxRequest = $(this).serialize();
ajaxRequest = 'Visits=43';
alert(ajaxRequest);
clearTimeout(ajaxUpdateTimeout);
ajaxUpdateTimeout = setTimeout(function() {
$.fn.yiiGridView.update(
"yw0",
{data: ajaxRequest}
)
},
300);
});
</script>
I have a CGridView, according to the html code the ID of this grid view (or the division it belongs in are "yw0")
I have requested that it only show requests when Visits equals 43 but nothing is happening, the grid view is not updating at all.
you need the grid ID not the division ID…
you set that ID when calling the CGridView
for example:
$this->widget('zii.widgets.grid.CGridView', array(
'id'=>'company-grid',
'dataProvider'=>$model->search(),
'columns'=>array(...)
));
Here the grid ID is "company-grid".
Thanks I will try that.
Ok I have set the ID properly but still no luck.
The ajax request variable is "search=thesearchedstring"
Search code
<?php echo CHtml::beginForm(CHtml::normalizeUrl(array("member/search")), "GET", array("id" => "filter-form")); ?>
Search for a member: <?php echo CHtml::textField("search", (isset($_GET["search"])) ? $_GET["search"] : '', array("id" => "search")); ?>
<?php echo CHtml::submitButton("Search", array("name" => "")); ?>
<?php echo CHtml::endForm(); ?>
<script>
var ajaxUpdateTimeout;
var ajaxRequest;
$("input#search").keyup(function() {
ajaxRequest = $(this).serialize();
//ajaxRequest = 'Visits=43';
alert(ajaxRequest);
clearTimeout(ajaxUpdateTimeout);
ajaxUpdateTimeout = setTimeout(function() {
$.fn.yiiGridView.update(
"company-grid",
{data: ajaxRequest}
)
},
300);
});
</script>
CGridView
<?php
$this->widget("zii.widgets.grid.CGridView", array(
"id" => "company-grid",
"dataProvider" => $data,
"columns" => array(
array(
"name" => "name",
"header" => "Full name"
),
array(
"name" => "email",
"header" => "Email address"
),
array(
"name" => "mobile",
"header" => "Mobile number"
),
array(
"name" => "points",
"header" => "Points"
),
array(
"name" => "visits",
"header" => "Visits"
),
array(
"name" => "last_visit",
"header" => "Last visit"
),
array(
"header" => "Options",
"type" => "raw",
'value' => 'Edit'
)
),
"cssFile" => Yii::app()->request->baseUrl . "/css/grid_view.css",
"pager" => array("cssFile" => Yii::app()->request->baseUrl . "/css/pagination.css"),
"template" => "{items}{summary}{pager}",
"summaryText" => "Viewing {page}-{pages} out of {count} members"
));
?>
Any idea whats wrong?
First thing I would suggest is to check with a tool like firebug if the ajax call is made… and what is the returned data from the call…
Ok an ajax call is being made that returns the whole html for the entire page.
What is suppose to be returned?
I thought the query string on the yiiUpdateGridView was enough? i.e. the "search=james" or "first_name=james"
I thought that was suppose to work, why do I have to return something from the ajax call?
Never the less I do have a function called search in my controller which is working, it just returns the html for the entire page though.
Seems to me you dont understand how this works… search/pagination/sorting/filtering… all makes ajax calls to the server to get the new data to be shown to the user… that is why you need to return something from the ajax call - the new grid
The $.fn.yiiGridView.update() method searches the returned data for the gidID instance - that is why you need to send the grid instance to it… and then replaces the current one on the page with the one returned from the ajax call… that is how you get the new values on the page…
If you return the whole page or only the grid is not important for the functionality of the update - it should work… only thing is that you are "returning" more data than needed… so at a later stage if you want to optimize this… you can use a separate view just for the grid and return only the grid…
So what is happening with your grid?.. if it remains the same there are 2 possibilities… first is that the gridID on the returned page is not the same as the one on the curretn page ( in your example "company-grid")… and second one is that you are not doing the actual search on the server but jsut returning always the same data…
Hi, I see what you are saying now.
I thought returning the whole page was not doing anything because I did not think it was clever enough to just get the grid in the whole returned html page via the ID.
Anyway the reason is the "second one" you said, the returned html actually is not doing the search properly even through if I visit the html page manually it does do the search correctly, so I will look into it.
I will look into why the ajax returned result is not working but visiting the url manually is working.
Thanks.
Ok that is brilliant, it is almost working.
The only problem I have now is that it is not replacing the current grid, but showing two, three, four grids etc in its place. Its just adding new grids and not replacing the current one.
$member = new Member;
$criteria = new CDbCriteria();
if(strlen($search) > 0) $criteria->addSearchCondition("name", $search, true, "OR");
$dataProvider = new CActiveDataProvider($member, array("criteria" => $criteria));
$this->render("_member_table", array("data" => $dataProvider));
Here is the controller code to handle the search. I have noticed that the search url sends two parameters the "search" variable and the "ajax" variable (which has the "company-grid" in it.
My search code is only using the "search" variable and not the "ajax" variable. Is this why its not working? If so what do I do with the ajax variable?
Any ideas why its adding new grids and not replacing the current one?
So the returned page has only one grid… but on your page they just accumulate?
In this case can’t say what is happening here without looking at the code… to find what is wrong here you need to debug using firebug…
check the source of $.fn.yiiGridView.update(), the lines that does the grid replacement are
$.each(settings.ajaxUpdate, function(i,v) {
var updateId = '#'+v;
$(updateId).replaceWith($(updateId,$data));
});