Yii 1.1: Using CJuiDialog to edit rows in a CGridView

12 followers

Scenario

I have a CGridView with a list of clients/events. For each row (EventClient) I wanted a quick edit dialog.

I used Zaccarias excellent article as the base http://www.yiiframework.com/wiki/145/cjuidialog-for-create-new-model/

Solution

First follow the wiki above to create all the required code. Then make the following modifications in your CGridView page:

Column hyperlink

For each column, set the _updateComment_url property in the Javascript function to the required url

array(
    'name'=>'comment',
    'header'=>'Comments',
    'type'=>'raw',
    'value'=>'CHtml::link(
        ($data["comment"]?$data["comment"]:"(comment)"),
        "",
        array(
            \'style\'=>\'cursor: pointer; text-decoration: underline;\',
            \'onclick\'=>\'{
                updateComment._updateComment_url="\'.
                    Yii::app()->createUrl(
                        "eventClient/updateComment",
                        array("id"=>$data["id"])
                    )
                .\'";
                updateComment();
                $("#dialogComment").dialog("open");}\'
            )
        );',
),

Javascript function

In the same page include the updateComment() function that calls the action

<script type="text/javascript">
 
function updateComment()
{
    // public property
    var _updateComment_url;
 
    <?php echo CHtml::ajax(array(
        'url'=>'js:updateComment._updateComment_url',
        'data'=> "js:$(this).serialize()",
        'type'=>'post',
        'dataType'=>'json',
        'success'=>"function(data)
            {
                if (data.status == 'failure')
                {
                    $('#dialogComment div.divComment').html(data.div);
                    // Here is the trick: on submit-> once again this function!
                    $('#dialogComment div.divComment form').submit(updateComment);
                }
                else
                {
                    $('#dialogComment div.divComment').html(data.div);
                    setTimeout(\"$('#dialogComment').dialog('close') \",2000);
 
                    // Refresh the grid with the update
                    $.fn.yiiGridView.update('event-client-grid');
                }
 
        } ",
    ))?>;
    return false;
 
}
 
</script>

Total 8 comments

#14531 report it
xander at 2013/08/21 03:41am
...

nice share.

just want to ask further. Once the opendialog close. how can we call the cgridview to retrieve the latest data?

#9015 report it
phreak at 2012/07/12 04:25pm
yet another improvement

I use a slightly different approach. I simply add a special class to all a elements, e.g. "ajax-modal". Then I attach an on click event to all a.ajax-modal, and use the href to load the dialog content.

$("a.ajax-modal").on("click", ...
#4142 report it
zaccaria at 2011/06/09 02:42am
Another small change

We can try to improve the style a bit more with the link, by changing like that:

'value'=>'CHtml::link(
        ($data["comment"]?$data["comment"]:"(comment)"),
        array("eventClient/updateComment","id"=>$data["id"]),
        array(
            \'style\'=>\'cursor: pointer; text-decoration: underline;\',
            \'onclick\'=>\'{
                updateComment._updateComment_url= $(this).attr(\'href\');                
                updateComment();
                $("#dialogComment").dialog("open");
                return false;}\'
            )
        );',

This allows you to use a standard link with attached the function. If the updateComment function is thought for work in both ajax/submit way, users without javascript enabled will be able to update comment using post (like CGridView, wich works with ajax but has also a fallback)

#4133 report it
Asgaroth at 2011/06/08 11:14am
...

I just made a reply on your post:

http://www.yiiframework.com/forum/index.php?/topic/20273-passing-parameters-to-an-ajax-link/page__gopid__99408#entry99408

#4130 report it
Asgaroth at 2011/06/08 10:23am
dont delete it

Dont delete it, it still solves the problem, but you can inprove it, its what I said :)

#4128 report it
Russell England at 2011/06/08 10:08am
Asgaroth

Should I delete this wiki instead?

#4127 report it
Russell England at 2011/06/08 10:00am
@Asgaroth

Oh I totally agree with you, but I've been trying to solve this for days. This was the only solution I could find that would work :)

If you know a better way I would be very grateful :) http://www.yiiframework.com/forum/index.php?/topic/20273-passing-parameters-to-an-ajax-link/page__pid__99380#entry99380

Thanks, Russ

#4126 report it
Asgaroth at 2011/06/08 09:51am
Js

I know its about style, but...

You shouldnt have much inline js nor you should have functions and least of all global variables. perhaps you could make use of jQuery events, selectors and external files, talk about registerScript or registerSCript file.

I know readers can take your code and make whatever they want with it, but I beleave that when writing a wiki you should advice readers to best practices, thats because most readers will copy paste your code and modify to their needs leading to... global variables inline js, etc

Just my opinion.

Leave a comment

Please to leave your comment.

Write new article