Yii CListView - JavaScript issue after pagination update

Yii CListView is a great tool when you want to show a set of data objects as a list in your web app. Everyone will bet the the most helping feature of CListView is the pagination. Simply you don't need to do anything to get pagination work on your list and even more importantly it's AJAX based. Means pages are loaded with AJAX making your application more interactive and user friendly.

So what's wrong with this amazing tool?

If you have HTML elements that needs to be accessed with JavaScript (more specifically jQuery, MooTools, Prototype or any JavaScript library), to attach some events or alter content dynamically when loading, they will work fine for the first page which is loaded in a normal HTTP request and not on the elements loaded with AJAX.

Let's say you want to attach an event to each list item with jQuery.

// the event handler
function clickHandler(evt) {
    // do something on click event
}

// assume that each item has the class "item" and id of list container is "itemList"
$('#itemList .item').bind('click', clickHandler);

Now, this would work only when you first load the page and the event handler will not be attached to the items loaded with subsequent pages you load with CListView pagination.
In order to deal with this kind of situations CListView provides a built in solution that we can use to attach our event handler to the items loaded with AJAX too. Simply set the afterAjaxUpdate property of CListView in your Yii view file as below.

// a javascript callback function to run when AJAX update is finish
$afterAjaxUpdate = 'function(id, data) { $("#itemList .item").bind("click", clickHandler); }';

widget('zii.widgets.CListView', array(
 'dataProvider'=>$dataProvider,
 'itemView'=>'_view',
 'id'=>'itemList',
 'afterAjaxUpdate'=>$afterAjaxUpdate
)); ?>

This way you may get even complex JavaScript operations done on your list items, that's up to you. Please do not forget to share your experience here, if possible.

Twine - HTML based static website and documentation generator

Developing a static website or a HTML based documentation for something? Need to let your software users download the docs with the application? Want to use a common template across all the pages of your static website?

Well, this article is intended to help you with some basic but time consuming process of applying a template to an HTML based static website or and HTML based documentation. First think if you are developing a static website or documentation that has to follow the of rules given below.

• All the files must be HTML files that has the extension .html
• All the pages should share the same template without using a server side scripting language.
• Files should be arranged in a folder based hierarchy for enabling easy access.
• Whole website / documentation should be downloadable by end users for offline usage.
• When published on the internet page URLs should be search engine friendly (SEO).
• When browsing each page should contain a breadcrumb path for easy navigation.
• Page title and description should be unique for each page.
• Each page should be associated with a unique ID to make it easy to install social network plugins / widgets.
• Pages should have breadcrumbs automatically generated.

Twine is a such tool that you can use to get all the above things done and generate a nice static website. However this tool is still in it's beta release. I leave it to you to experiment and use it in a creative way.

The GitHub repository is here.

Please don't forget to share your experience here.