Using CJuiDialog to edit rows in a CGridView Follow @yiiframework

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 7 comments

#9015

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

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

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

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

Russell England at 2011/06/08 10:08am

Asgaroth

Should I delete this wiki instead?

#4127

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

Asgaroth at 2011/06/08 09:51am

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.

Please login to leave your comment.