CGridView filtered rows to JavaScript function

Yii 1.1 General Discussion
1

Hey everyone!

I’m a bit stumped right now. Being new and all and since this seems like a great community, I figured I should ask for your help.

My website is running on Yii 1.1.14.

I’m using the search function of my model to populate my CGridView object. Here’s my GridView code.




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

    'afterAjaxUpdate' => 'function(id,data)

    { 

        deleteMarkers();

        addMarkers(".$resultingJSON.");               //The $resultingJSON parameter changes after every search in my GridView.               

                                                      //It contains data from each row filtered by the last search.

    }',

    'id' => 'element-gridAdmin',

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

    'filter' => $model,

    'columns' => array(...)  

    )

);

Here is what I’m trying to do.

[list=1]

[*]I need to filter my GridView with the search function.

[*]I need to take the resulting data and send it to a JavaScript function meant for Google Maps.

[*]Then, I must add markers on my map according to each row filtered (In other words, I must get my row values from my search in JavaScript).

[*]If I change the filters in my GridView, I must reload the new markers on my map according to the new search condition without reloading the page.

[/list]

Here’s what I currently have in my JavaScript file.


    function addMarkers(jsonMarkers)

    {

        var cols = new Array('blue', 'brown', 'darkgreen', 'green', 'orange', 'paleblue', 'pink', 'purple', 'red', 'yellow');


        for (var i in jsonMarkers) {


            var id = jsonMarkers[i].id;

            var inpTitle = jsonMarkers[i].titre;

            var lat = jsonMarkers[i].latitude;

            var lon = jsonMarkers[i].longitude;

            var col = cols[jsonMarkers[i].idAttraction % 10];

            var lett = jsonMarkers[i].lettreIcone;


            var latLng = new google.maps.LatLng(lat, lon);

            

            mark = new google.maps.Marker({

                position: latLng,

                map: map,

                draggable: true,

                title: inpTitle,

                icon: "../someaddress/images/" + col + lett + ".png",

                animation: google.maps.Animation.DROP

            });

            google.maps.event.addListener(

                    mark,

                    "click",

                    function () {

                        if (confirm("Voulez-vous examiner l\'élément suivant? \n \n" + inpTitle))

                        {

                            window.location.href = "Yii::app()->getBaseUrl(false)" + "/element/view?id=" + id;

                        }

                    }

            );

            markers[id] = mark;

        }

    }

I’m not sure what would be the best approach.

  • I tried (as shown above) to input a JSON parameter in ‘afterAjaxUpdate’, but my function always gets called with the same original parameter.

  • I also tried to get the value of each row in my GridView in JS, but that only worked for the first page of the GridView, the others being ignored.

In other words, what would be the easiest way to send filtered rows from a CGriddView to a JavaScript function after each search?

Thanks a lot for your help!