Problem With Ajax And Jquery.getjson Callback

Yii 1.1 General Discussion
1

Dear all,

I am using the CStarRating component. I try to display it and enable voting on CGridView, so far the displaying is okay but when I vote on it (e.g. click a star) the callback doesn’t triggered. I have tried using both AJAX and JQuery.getJSON as below:




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

	'id'=>'client-grid',

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

        'afterAjaxUpdate'=>'function(id,data){ $(\'span.rating input\').rating({readOnly:false}); }',

	'columns'=>array(

		'client_name',

                array (

                    'name' => 'score',

                    'type' => 'raw',

                    'value'=>'$this->grid->controller->widget("CStarRating",

                        array(

                            "name"=>"rating".$data->id_client,

                            "value"=>$data->score,			

                            "starCount"=>"5",

                            "minRating"=>"1",

                            "maxRating"=>"5",

                            "ratingStepSize"=>"1",

                            "readOnly"=>false,

                            "htmlOptions"=>array("class"=>"rating"),                

                            "callback"=>"function(){

                                url = \"/clients/update\";

                                jQuery.getJSON(url, {id: \'$data->id_client\', val: $(this).val()},

                                    function(data) {

                                        if (data.status !== \"success\"){

                                            alert(\"error\");

                                        }});}",),true)',                           

                ),

))); ?>

and




array (

'name' => 'score',

'type' => 'raw',

'value'=>'$this->grid->controller->widget("CStarRating",

            array(

                "name"=>$data->id_client,

                "value"=>$data->score,			

		"starCount"=>"5",

                "minRating"=>"1",

                "maxRating"=>"5",

                "ratingStepSize"=>"1",

                "readOnly"=>false,

                "htmlOptions"=>array("class"=>"rating"),                

                "callback"=>"function(){

                    $.ajax({

                        type: \"GET\",

                        url: \"/clients/update\",

                        data: \"id_client=$data->id_client&score=\" + $(this).val(),


                        success: function(msg){

                            alert(\"Sucess\")

                        },

                        error: function(xhr){

                            alert(\"failure\"+xhr.readyState+this.url)

                        }                        

                    })

                }",

            ),true)',                           

),

The output HTML is fine but nothing triggered and the clients/update action is not invoked. Please advise, thank you!

2

this is a tricky business here is what I did





// changed my grid to 

...

[

	'name' => 'score',

	'value' => [$this, 'updateScore']

]

...


// then I added the updateScore method in my current controller where the view is being rendered

// it renders a template and pass in the $data variable

    public function updateScore($data)

    {

        return $this->renderPartial('score', ['data' => $data]);

    }


// my score partial

<?php


$this->widget("CStarRating", array(

    "name"=>"rating".$data->id_client,

    "value"=>$data->score,                      

    "starCount"=>"5",

    "minRating"=>"1",

    "maxRating"=>"5",

    "ratingStepSize"=>"1",

    "readOnly"=>false,

    "htmlOptions"=>array("class"=>"rating"),                

    "callback"=>"js:ratingCallback"

)); ?>


<script type="text/javascript">

    function ratingCallback() {

        jQuery.getJSON(

            "/clients/update", 

            {id: "<?php echo $data->id_client ?>", val: $(this).val()},

            function(data) {

                if (data.status !== "success") {

                    alert("error");

                }

            }

        );

    } 

</script>

I like my code clean and easy on the eyes

3

Dear alirz23,

Thank you ever so much. It is in deed a tricky business and that’s why I have been pulling my hair out in the last few days. I have followed exactly your advice and the logic is now much CLEARER and the code is much CLEANER. But unfortunately, the update function in my controller is still not invoked :( Please advise! Thank you!

4

double check your update url make sure its a valid url pointing to controller action, also check your browser console. I did test this code and it worked for me

5

Thank you alirz23, I have checked the controller carefully like you said but nothing could be found. I tried this to see if the callback within the CStarRating widget work:




<?php


$this->widget("CStarRating", array(

    "name"=>"rating".$data->i_cdr,

    "value"=>$data->score,                      

    "starCount"=>"5",

    "minRating"=>"1",

    "maxRating"=>"5",

    "ratingStepSize"=>"1",

    "readOnly"=>false,

    "htmlOptions"=>array("class"=>"rating"),                

    "callback"=>"function(){alert("CALLBACK TRIGGERED!!!");}"

)); ?>

but nothing happened when the stars is clicked. So it really seemed like the callback is not triggered and I have tried several time but could not resolve :(