Greetings, all,
I am working on a project at the moment and have run into a problem when trying to use AJAX to update the contents of a widget. The short description is that I have a table where each row has a ‘delete’ link (as a CHtml::ajaxLink) that points to the delete command in a controller. The controller handles the deletion of the object and then returns (via $this->renderPartial) the entire widget. This is working fine for the rest of the widget, but there is a script at the bottom of the HTML page when I view the source that is handling mapping each row in the table to the corresponding ID of the item to be deleted. When the widget gets returned and replaced, the items in the table are different because the deleted one is gone, but the mapping of the IDs remains the same.
So if I delete the first item, it goes away as expected but after the widget is returned, clicking on the new first item still sends the former ID. I am wondering if there is a way to make that script update as well. I am including code so you can see what is happening below.
In the widget’s view file
foreach($others AS $index => $other)
{
?>
<tr class='<?php echo (($index % 2) == 0 ? 'row-dark' : 'row-light'); ?>'>
<td>
<?php
$submitter = UserModule::user($other->user_id);
if(Yii::app()->user->id == $submitter->id || UserModule::isAdmin())
{
echo CHtml::ajaxLink("<img src='".Yii::app()->request->baseURL."/images/delete.png"."' />",
array(
'Sighting/deleteAjax',
'id' => $other->_id,
),
array('replace' => '#sightingWidget')
);
}
else
{
echo "<img src='".Yii::app()->request->baseURL."/images/no_delete.png"."' />";
}
?>
</td>
// ... more <td> tags, removed for clarity
</tr>
<?php
}
?>
The code above create a script in the HTML as:
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
$('body').on('click','#yt0',function(){jQuery.ajax({'type':'POST','url':'/repository/index.php?r=Sighting/createAjax','cache':false,'data':jQuery(this).parents("form").serialize(),'success':function(html){jQuery("#sightingWidget").replaceWith(html)}});return false;});
$('body').on('click','#yt1',function(){jQuery.ajax({'url':'/repository/index.php?r=Sighting/deleteAjax&id=50acf77933da584626000000','cache':false,'success':function(html){jQuery("#sightingWidget").replaceWith(html)}});return false;});
$('body').on('click','#yt2',function(){jQuery.ajax({'url':'/repository/index.php?r=Sighting/deleteAjax&id=50acf76d33da58d127000001','cache':false,'success':function(html){jQuery("#sightingWidget").replaceWith(html)}});return false;});
$('body').on('click','#yt3',function(){jQuery.ajax({'url':'/repository/index.php?r=Sighting/deleteAjax&id=50aa859033da58ee2c000000','cache':false,'success':function(html){jQuery("#sightingWidget").replaceWith(html)}});return false;});
$('body').on('click','#yt4',function(){jQuery.ajax({'url':'/repository/index.php?r=Sighting/deleteAjax&id=50aa828933da58702c000000','cache':false,'success':function(html){jQuery("#sightingWidget").replaceWith(html)}});return false;});
$('body').on('click','#yt5',function(){jQuery.ajax({'url':'/repository/index.php?r=Sighting/deleteAjax&id=50aa810b33da584d28000000','cache':false,'success':function(html){jQuery("#sightingWidget").replaceWith(html)}});return false;});
});
/*]]>*/
</script>
And when the widget is replaced the table in the widget code is correct, but the associations in the script (i.e. ‘#yt3’ to the delete url with ‘50aa859033da58ee2c000000’ as the ID parameter is not changed.
The end result is that I can delete once, but never a second time; if I delete the same row position, I get a fatal error because the item was already deleted and if I choose a different row, the script deletes the wrong object.