Update Foreach Loop Items With Ajax

Yii 1.1 General Discussion
1

Hey All!

Just got a little thingy to solve here. I have a view (partial) which has a foreach loop in it:





<div class="row well" id="item_form">

	<div class="span3">

		<h4 class="specialhead">Create new Item</h4>

		<?php $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(

			'layout' => TbHtml::FORM_LAYOUT_INLINE,

		)); ?>

		<?php $model = new EItem; ?>


		<div class="row">

			<?php echo $form->textFieldControlGroup($model, 'title'); ?>

			<?php echo CHtml::ajaxSubmitButton('Create new IO',CHtml::normalizeUrl(array('item/additem','render'=>true)),

                 array(

                     'type'=>'post',

                     'success'=>'function(data) { 

                        if(data.status=="success"){

                         $("item_container").replaceWith(data);

                        }

                         else{

                        $.each(data, function(key, val) {

                        });

                        }       

                    }',

                     ),array('class'=>'btn btn-info')); 

            ?>

		</div>	 

		<?php $this->endWidget(); ?>

	</div>

</div>


<div id="item_container">

	<?php foreach($items as $item): ?>

		<table class="bordered_table" id="item<?php echo $item->id; ?>">

			<tr class="odd">

				<td class="span4"><b>Title</b></td>

				<td class="span4">

					<?php $this->widget('yiiwheels.widgets.editable.WhEditableField', array(

					    'type' => 'text',

					    'model' => $item,

					    'attribute' => 'title',

					    'url' => $this->createUrl('item/update'),

				    ));	 ?>

				</td>

				<td class="span4"></td>

			</tr>	

		</table>

	<? endforeach; ?>

</div>

and the ItemController:





public function actionAddIo()

	{

		if(isset($_POST['EItem']))

		{

			$item = new EItem;

			$item->attributes = $_POST['EItem'];

			$item->save(false);


			$all_items = EItem::model()->findAll());


			// WHAT TO DO HERE??? I tried $this->renderPartial('_items', array('items'=>$all_items), false, true); but that does not work

		}

	}

basically I just want to get the foreach loop of tables updated and show the new item immediately, can someone tell me how to do that?

Thanks in advance for any help!

-Seb

2
  1. Get HTML content from server (use renderPartial for this).

Insert it to table using jquery’s appendTo() or something.

  1. Get JSON from server. Use some javascript to create a new row (for example, by cloning existing row)

  2. Get JSON and use client-side rendering (like knockout.js, angularJS etc)

3

Use it as




return $this->renderPartial('_items', array('items'=>$all_items), false, true);

And in html where you have to display it do as




'success':function(data){

$('#object_id').html(data);

}
4

thanks