Help with jQuery Edit in Place plugin integration into Yii app

Yii 1.1 General Discussion
1

2 questions:

  1. Does Yii come bundled with a Edit-in-place plugin. I didn’t see one.

  2. I am trying to integrate this 3rd-party in-line editable plugin, but I am not having any success seeing the UI element in the view. When I mouse over the element, I don’t see the in-place edit option. Any help please? :frowning:

http://code.google.com/p/jquery-in-place-editor/

In my main.php layout file, I have the following libraries loaded:

<?php Yii::app()->clientScript->registerCoreScript('jquery'); ?>


<?php Yii::app()->clientScript->registerCoreScript('jquery.ui'); ?>


<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl ."/js/jquery.editinplace.js", CClientScript::POS_HEAD); ?>

view.php:

<span class="editable">Hello World!</span>

<script type="text/javascript">

$(function() {

  &#036;('.editable').inlineEdit({


    buttonText: 'Add',


    save: function(e, data) {


      return confirm('Change name to '+ data.value +'?');


    }


  });


});

</script>

2

I wanted to use the Highslide js (Thumbnail viewer) files with my application. I downloaded the code from highslide.com and put it under protected/js folder (the downloaded files are in the protected/js/highslide folder.) Then I used the following code in the header section of view/layouts/main.php, and I was able to use the Highslide functionality in my Yii application. Here is my code. Notice that I have commented the original <link rel command generated by the Yii framework as it is defied in the new code.




<!--

        <link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/form.css" />

-->




<?php

 $cs=Yii::app()->clientScript;

 $cs->registerCSSFile(Yii::app()->request->baseUrl.'/css/main.css');

 $cs->registerCSSFile(Yii::app()->request->baseUrl.'/js/highslide/highslide.css');

 $cs->registerCoreScript('jquery');

 $cs->registerScriptFile(Yii::app()->request->baseUrl.'/js/highslide/highslide.js', CClientScript::POS_HEAD);

 $cs->registerScriptFile(Yii::app()->request->baseUrl.'/js/highslide/highslide_eh.js', CClientScript::POS_HEAD);

 $script = 'hs.graphicsDir = \''.Yii::app()->request->baseUrl.'/js/highslide/graphics/\';'."\n";

 $script .= 'hs.outlineType = \'rounded-white\';'."\n";

 $script .= 'hs.showCredits = false;';

 $cs->registerScript('hislide-par', $script, CClientScript::POS_BEGIN);

 $script = 'addHighSlideAttribute();';

 $cs->registerScript('hislide-att', $script, CClientScript::POS_END);

 ?>
3

this test works for me:




<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . "/js/jquery.editinplace.js", CClientScript::POS_HEAD); ?>

<span class="editable">Hello World!</span>

<?php Yii::app()->clientScript->registerScript('edit',"

    

        $('.editable').editInPlace({

            /*show_buttons: true,*/

            callback: function(e, data) {

                return data;

            }

        });

    

    ");
4

Thanks both - it works!

5

why I should add jquiery.ui and complete $(document).ready function on POS_HEAD?

any suggestion for better use are very welcome, thanks before, here is my complete code on a view page. i store my jquery.editinplace.js on assets/js.







<table>

<tr>

	<th>NO</th>

	<th>Item Stock</th>

	<th>Stock Code</th>

	<th>Banyaknya</th>

	<th>Harga</th>

	<th>Total harga</th>

	<th>Prioritas</th>

	<th>Catatan</th>

</tr>	

<?php 

$i=1;

$itemEditScript="";

foreach ($listItem as $data): 

?>

<tr>

	<td><?php echo $i++; ?></td>

	<td><?php echo $data->stockDetail->nama; ?></td>

	<td><?php echo $data->stockDetail->stockCode; ?></td>

	<td>

		<span id="<?php echo 'itemN-'.$data->id; ?>" ><?php echo $data->n; ?></span>

		<?php $itemEditScript .= 

			"

			$('#itemN-".$data->id."').editInPlace({

				callback: function(unused, enteredText) { return enteredText; },

				// url: './server.php',

				show_buttons: false

			});

			"

		?>

		<?php echo $data->satuan ?>

</td>

	<td><?php echo $data->hargaSatuan ?></td>

	<td><?php echo $data->totalHarga ?></td>

	<td><?php echo $data->priorityOrderByCustomer ?></td>

	<td><?php echo $data->ket ?></td>

</tr>

<?php endforeach; ?>

</table>


<?php 

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . "/assets/js/jquery.editinplace.js", CClientScript::POS_HEAD); 

Yii::app()->clientScript->registerCoreScript('jquery.ui');

Yii::app()->clientScript->registerScript('editItem',"$(document).ready(function(){".$itemEditScript."});", CClientScript::POS_HEAD); 

?>
6

would you please describe briefly how to update the data into database?

how to configure url parameter and receive the params in the controller/action?

thank you before,

7

i solve this out by adding this parameter


$jqeditJs="...

url: '".$this->createUrl('JqEditInLineUpdate',array('id'=>$data->id))."',

params: 'fldName=n',

..."

here are some codes from my controller





public function actionJqEditInLineUpdate($id)

{

  if(isset($_POST['update_value'])){

 	$model=TblPesananItem::model()->findByPk((int)$id);

 	$model->$_POST['fldName']=$_POST['update_value'];

 	$model->totalHarga = $model->n * $model->hargaSatuan;

 	if($model->save())

        $this->renderPartial('_JqEditInLineUpdate', array('value'=>$_POST['update_value']), false, true);

  }else

 	return false;

}

any better techniques?