AJAX render view with ajax function

Archives Yii 1.0.x Discussions
1

Hi,

I have an actionListCategory, in this action, I render a view (listCats) wich display all cats with ajax delete button for each cat.

When I click on the delete button, it call the actionDeleteCat (ajax), this action will delete the cat from database, and then render listCats to display the list of cats after deleted.

This is OK but now I click on another delete button, nothing happens :(

here my code:

CatController.php





public function actionListCategory()

{

$cats=Cat::model()->findAll();

$this->render('listCategory',array('cats'=>$cats));

}


public function actionDeleteCat()

{

Cat::model()->deleteByPk($_GET['id']);

$cats=Cat::model()->findAll();

$this->renderPartial('listCats',array('cats'=>$cats));

}


?>

and View

listCategory.php




<div id="cat" style="clear:both;">

<?php 

$this->renderPartial('listCats',array('cats'=>$cats))<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/wink.gif' class='bbc_emoticon' alt=';)' />); 

?>

</div>

listCats.php




<?php foreach($cats as $cat): ?>

<div>

<?php echo $cat->title?>

<?php echo CHtml::ajaxButton('Delete', Yii::app()->createUrl('cat/deleteCat',array('id'=>$cat->id)),array('update'=>#cat')));

?>

</div>

<?php endforeach;?>
2

Well, i’m not sure about ajaxButton (i didn’t use it yet), but probably it’s same as at common jquery(and etc) issue: when u load full page - u render and set ‘events’ that request ajax content. But when u load new content, no events set for that, so u have to solve it somehow - for example, manually set events.

for example:

u have list of links:

  1. <a href ="#">…

  2. <a href ="#">…

  3. <a href ="#">…

  4. <a href ="#">…

and ur application auto setup click events for these links.

but after some click, u load another part of links(via ajax) and u got:

  1. <a href ="#">…

  2. <a href ="#">…

  3. <a href ="#">…

well, if content(links in our case) came as raw html for our ajax request, then no events for that content. U have to solve it somehow. probably execute ‘event binder’.

it’s how it’s working in theory. I’m not sure about ajaxButton at yii and ajax content, but it’s more important to understand how it’s working in reality. try to look at ur source after full page load and look for any event binders…probably u will find ur solution there.

3

i just tested ajaxButton. As i said - solution at ur page source. For example, my ajax button turn into:


<input name="yt0" type="button" value="Delete" id="yt0" />

and at end of page, yii bind click event, like:


<script type="text/javascript">

/*<![CDATA[*/

jQuery(document).ready(function() {

jQuery('#yt0').click(function(){jQuery.ajax({'url':'/index.php?r=customer&id=1','cache':false,'success':function(html){jQuery("#cat").html(html)}});return false;});

/*]]>*/

</script>

After loading of you RAW html via renderPartial, u get only next html code


<input name="yt0" type="button" value="Delete" id="yt11" />

<input name="yt0" type="button" value="Delete" id="yt11" />

<input name="yt0" type="button" value="Delete" id="yt22" />

<input name="yt0" type="button" value="Delete" id="yt33" />

but no any new event binders for that new html content. So it’s ur task to decide how to solve it.

in most cases i use something like:


<script type="text/javascript">

/*<![CDATA[*/

function bind_events() {

$('.ajax-delete').click( function(){

 $.ajax({

  'url':'/index.php?r=customer&id=1',

  'cache':false,

  'success':function(html){ 

     [i]...put any manipulation with 'html' that we got.[/i]

     bind_events();

    }

  });

  return false;

});

};

}

$.ready(function() {

     bind_events();

});


/*]]>*/

</script>

something like this. i didn’t test for typos here, i just copy/past right here at comments.

4

Or use jqury live function eg

$("#yourdescriptor").live("click", function(event) {

5

hi,

How to add .live event to CHtml::ajaxButton?

thanks

6

If you can identify an exclusive jQuery selector (combination) for the whole group of html content, just register the script separately (outside of the block being replaced).

/Tommy

7

+1