Hi All,
So I have a view that contains a section of the page in div tags, and the contents of the div are generated by a renderPartial. Inside of the view that is rendered by the renderPartial call is a dropdown box with ajax handling, so that when the dropdown changes the entire div is repopulated with the same renderPartial view (which contains and reloads the dropdown w/ajax handling again). All of this works nicely the first time the dropdown is changed. However, once the div reloads and the newly-loaded dropdown is changed again, nothing happens. I am pretty sure that this has something to do with the fact that while JQuery did attach a handler to the onchange event of the dropdown the first time the page was loaded, once the section of html is reloaded (via the ajax call and renderPartial execution), the onchange event doesn't get re-attached to the dropdown list. To maybe help clarify a bit, here's some sample code illustrating the situation.
MAIN VIEW (index.php)
<h1>My Page</h1> <div id="data"> <?php $this->renderPartial('objlist',array( 'activeObjId'=>$arObj->id, 'objList'=>$objList )); ?> </div>
RENDER PARTIAL VIEW (objlist.php)
<h2>Active Record Object: <?php echo $arObj->name ?></h2> <?php echo CHtml::beginForm('#'); ?> <?php echo CHtml::dropDownList('objid',$activeObjId,$objList, array( 'ajax' => array( 'type'=>'GET', 'url'=>CController::createUrl('controller/ajaxaction'), 'update'=>'#data', ) ) ); ?> <?php echo CHtml::endForm(); ?> <table class="dataGrid"> <tr> <th class="label"><?php echo CHtml::encode($arObj->getAttributeLabel('name')); ?></th> <td><?php echo CHtml::encode($arObj->name); ?></td> </tr> </table>
CONTROLLER/ACTION
//.... public function actionAjaxaction() { if(Yii::app()->request->isAjaxRequest && isset($_GET['objid'])) { $objId = $_GET['objid']; $objArray = array( 1=>'obj 1', 2=>'obj 2', 3=>'obj 3', ); $activeObj = ArObj::Model()->findByPk($objId); $data = array( 'arObj'=>$activeObj, 'activeObjId'=>$objId, 'objList'=>$$objArray, ); echo $this->renderPartial('objlist',$data,true); } } //....
Again, basically the dropdown list calls an ajax function that replaces the contents of the div containing the dropdown list with the same view via renderPartial. The problem is that after the contents of the div with id #data have been replaced the first time, the javascript never fires thereafter when the dropdown list is changed, presumably because the onchange handler was never re-attached.
So, to anyone who followed all of that, any ideas on how to fix this or get around it? =) Thanks in advance!