Rendering Views and Updating them with Ajax


This wiki article has not been tagged with a corresponding Yii version yet.
Help us improve the wiki by updating the version information.

I wanted to implement a widget that could refresh itself through Ajax without refreshing the whole page. CGridView and CListView are excellent examples of such widgets.

I spent some time trying to understand how a controller renders it’s view(s) and then looked at the actionAdmin and actionIndex actions of an app generated by gii. The views generated by these actions contain CGridView and CListView widgets respectively.

My case study was a simple Dashboard application, where I have two view – left and right in the same page (layout file). The sequence diagram outlines how these two pieces are rendered and how they’re merged with the layout file to generate a page the user will see. I came up with the sequence diagram below.

If the pieces appear unfamiliar to you, you might want to read – Rendering View Files in Yii here (if this link get’s deleted, google the title).

Sequence Diagram

It might be worth mentioning that, the default implementation of the aforementioned widgets, requests the “owning” controller (the one that created the widget) to render it’s entire view again through an Ajax request. When a response arrives, the html response (page) is parsed using jQuery and the section (div) that the widget is interested in is extracted. The widget’s contents are then replaced with the extracted (partial contents) one.

In a typical application’s controller, where one might be displaying several models/views, it might make sense to write a controller that returns just the partially rendered view without any layout applied. This should cut down some time for you depending on how complex your views/models are. This approach, if thought out carefully should also maximize code sharing.

If I have provided inaccurate information, please feel free to comment and let me know.

Total 4 comments

#15384 report it
Mubashar Iqbal at 2013/11/04 06:58am
Good Wiki

i think its a best way for beginners to learn the YII call structure .

#15354 report it
Manish Gupta at 2013/10/31 05:02am
Suggestions incorporated

@nineinchnick thanks for your encouraging comments. I incorporated your suggestions and updated the diagram. However, I had to incorporate a faux step of invoking from jQueryWidget to Browser as the tool I used doesn't otherwise allow me to move the objects.

#15352 report it
nineinchnick at 2013/10/31 03:31am
nice summary

Nice summary, I think it's important for beginners to get a grasp how various components are coupled.

I think that in that graphic jQueryWidget should be between User and Browser and it's the User that calls the 'update' action by changing page, sorting or performing a search.

On second thought, I'd join the User and Browser into one. If an action is fired from the browser we can assume it was the user who called it. If you send the results to the browser and they are displayed we can assume the user can see them.

#15348 report it
Manish Gupta at 2013/10/30 05:28pm
Original Post

The original is post from also by me.

Leave a comment

Please to leave your comment.