[Resolved] Stuck with ajaxLink

I’m trying to update an image via ajaxLink. The image has a unique css id and the function does return a valid response. I tried to work with the update property but I just don’t get it working. So here are my snippets:

My View (part):


echo CHtml::ajaxLink('<img id="'.$data['combatIdent'].'" src="/images/icn_share'.$data['shareFlag'].'.png">', 'ajaxRequest', array(

        'type'=>'POST',

        'data'=>array(

            'crAction'=>'updateShareFlag',

            'combatIdent'=>$data['combatIdent'],

            'shareFlag'=>$data['shareFlag'],

        ),

    ));

My Controller (part):


public function actionAjaxRequest() {

            // Switch CR share flag

            if($_POST['crAction'] == 'updateShareFlag') {

                $model = new combatReport();

                $model->combatIdent = $_POST['combatIdent'];

                $model->shareFlag = $_POST['shareFlag'];

                $shareFlag = $model->switchShareFlag();

                echo $shareFlag;

            }

        }

I bet it’s quite easy but I just don’t get it ;)

miss this?


$model->save();

Nope. The model is working and returns a valid value. My problem here is that I don’t get it how to update the IMG-Tag.

Example:

  • Image is <img src="/images/share_yes.png">

  • ajaxAction returns "no"

  • Image should get updated with <img src="/images/share_no.png">

Your code doesn’t receive the ajax response to update the html.

Try it for a test:




echo '<div id="test">foo bar</div>';

echo CHtml::ajaxLink('<img id="'.$data['combatIdent'].'" src="/images/icn_share'.$data['shareFlag'].'.png">', 'ajaxRequest', array(

        'type'=>'POST',

        'data'=>array(

            'crAction'=>'updateShareFlag',

            'combatIdent'=>$data['combatIdent'],

            'shareFlag'=>$data['shareFlag'],

        ),

        'update'=>'#test', // look at this

    ));



I hope it will update "foo bar" to "no".

You have to replace the "src" attribute of the img tag instead. It should be possible, but might not be so simple and easy.

you might forget ‘success’ in ajax rensponse



'success'=&gt;'function(data){


    var source_image = &quot;/images/icn_share&quot;+data;


    &#036;(&quot;#id_of_image&quot;).attr(&quot;src&quot;,source_image);


}';

Yeah, that’s it.

Or rather:




'success'=>'function(data){

    var source_image = "/images/icn_share"+data+".png";

    $("#' . $data['combatIdent'] .'").attr("src",source_image);

}';



just wondering, if just fliping image to yes/no without $model->save(); why bother to use ajax? front-end js would do the trick.

That it was. Now I know that this job completely relies on JS (which I don’t like btw) :)

Thanks!

Oh… There’s still a world without AR out there ;)

Well, after taking a closer look at your code, I second rootbear in a sense.

I dont’t think that your combatReport is correctly updated in your db.

The first time you click on the link, it will update the image. But can you reverse it to the original state by another click? :unsure:

I guess that the ajax calls will fail to flip-flop the image in the 2nd call and thereafter.




echo CHtml::ajaxLink('<img id="'.$data['combatIdent'].'" src="/images/icn_share'.$data['shareFlag'].'.png">', 'ajaxRequest', array(

        'type'=>'POST',

        'data'=>array(

            'crAction'=>'updateShareFlag',

            'combatIdent'=>$data['combatIdent'],

            'shareFlag'=>$data['shareFlag'],

        ),

        'success'=>'function(data){

            var source_image = "/images/icn_share"+data+".png";

            $("#' . $data['combatIdent'] .'").attr("src",source_image);

        }'

    ));



In the above, "src" attribute of img will be updated by ajax call, e.g. from "icn_share_no" to "icon_share_yes".

But the ‘shareFlag’ parameter of the ajax call will never be changed. If it was originally ‘_no’, then it will remain ‘_no’ forever.

And in your controller code:




public function actionAjaxRequest() {

            // Switch CR share flag

            if($_POST['crAction'] == 'updateShareFlag') {

                $model = new combatReport();

                $model->combatIdent = $_POST['combatIdent'];

                $model->shareFlag = $_POST['shareFlag'];

                $shareFlag = $model->switchShareFlag();

                echo $shareFlag;

            }

        }



Probably you are flip-flopping the shareFlag and saving the model in switchShareFlag().

But $model->shareFlag always receives the same value that is initially set to the view.

And the way you update the AR model looks a little strange to me.

Why don’t you load it from db using ‘combatIdent’, instead of creating a new instance?




                $model = combatReport::model()->findByPk($_POST['combatIdent']);

                $model->shareFlag = ($model->shareFlag === '_yes') ? '_no' : '_yes';

                $model->save();

                echo $model->shareFlag;



And by doing this, you will no longer need to include ‘shareFlag’ in your ajax call parameter. :)

Maybe I forgot to mention that ‘shareFlag’=>$data[‘shareFlag’] isn’t used anymore and has been removed. I don’t trust POST data in general so the model just get the call to switch to the next of 3 states and returns the state it was set to. This way it’s working really fine.