Edit using Javascript Prompt

Yii 1.1 General Discussion
1

Hi all,

I am new to this forum and to yii.

Using gii, I created models and CRUD for a few database tables. However, I have a few 2-field tables like Category, Job head, Vehicle Types, etc. In the table/admin page, I see a row with ID, name, view, edit and delete buttons. I removed ID and view from the table. However, on clicking the “edit” button, I don’t want to be navigated to another page. Instead, I should get a Javascript prompt with the value. In pure PHP / JS, I do it like this:




<td>Name</td><td><a href="#" onclick="edititem($id,$name)">Edit</a></td>


<script>

function edititem(id,name) {

  var newname = prompt("Enter new name ",name);

  if(newname) {

    $.post("phpfile", { id:id, name:newname }, function() { /* Code to edit value in td */ } );

    // or pass id and name to hidden inputs in a form and form.submit();

  }

}

</script>

How can I achieve this in yii? Opening a new page for editing a single record does not look good. Or is there any option to edit items in that admin table itself? (Inline editing)

Thanks in advance.

2

You can try CJuiDialog

3

Thanks Mukesh. I was able to create modal popups for adding items. But couldn’t figure how to make it work with edit. In the link you provided, the JS is:


function addcategory() {

	<?php echo CHtml::ajax(array(

		'url'=>array('/category/create'),

		'data'=> "js:$(this).serialize()",

		'type'=>'post',

		'dataType'=>'json',

		'success'=>"function(data) { $.fn.yiiGridView.update('category-grid', { data:$(this).serialize() }); $('#dialogCategory').dialog('close'); } ",

		))?>;

	return false;

}

In the above, the popup opens with /category/create. I need to change it with $(this).attr("href") for edit to work. But whatever I enter there is being enclosed in single quotes, making it appear like a string for jquery. Any ideas to overcome this?

(Still, I loved the JS prompt for this particular job) :frowning:

4

you mean to say ‘update’? What is the controller and action for your update/edit action?

can you explain your complete functional requirement?

5

Yes. Update. I finally made it possible using plain Jquery. This is how my views/category/admin.php looks now:




<?php echo CHtml::link('Add new Category', "javascript:void(0)", array('id'=>'addnew')); ?>


<?php $this->widget('zii.widgets.grid.CGridView', array(

	'id'=>'category-grid',

	'dataProvider'=>$model->search(),

	'filter'=>$model,

	'columns'=>array(

		'name',

		array( 'class'=>'CButtonColumn' ),

	),

)); ?>

<script type="text/javascript">

$('#addnew').click(function(){

	var newname = prompt("Enter name of Category","");

	if(newname) { $.post('<?php echo Yii::app()->createUrl('/category/create'); ?>', { 'Category[name]':newname }, function() { window.location=window.location; return false; }); }

});

$('a.update').click(function(){

	var url = $(this).attr("href");

	var newname = prompt("Enter name of Category",$(this).parent().parent().find('td:first').html());

	if(newname) { $.post(url, { 'Category[name]':newname }, function() { window.location=window.location; return false; }); }

	return false;

});

</script>

This is working fine now. I don’t know how to redraw the grid after database update / insert. Hence I used window.location=window.location for a page refresh. Any way to reload the grid using Ajax?

6

By the way, what I mentioned in the previous mail was that the code uses ‘url’=>array(’/category/create’) for creating a new item. But for editing, I need the url to be ‘/category/update/xx’ where xx is the ID of the record. I didn’t find any way to insert a variable into the ‘url’ part.

7

use this -


Yii::app()->createUrl('category/update/', array('id'=>$somevariable));
8

Oh, thanks. I didn’t know that.