Need help on CHtml::ajaxbutton()

Hi all,

I face a problem from renderPArtial button. I have a product listing page and the product a lot. So i create a dropdownlist base on the category to allow user add product in the list. Where user click add list, it will generate the info include a button(ajaxbutton() that use to trigger CJuiDialog box) using append method. The problem is everytime i append the new row of data, the button id still the same id(yt0), this make the button trigger the add product list button’s controller (the Addlist button is preload in the page) and not runner it own controller function. Can anyone tell me how to solve it? i have try to fix the id in ajaxbutton and in wont work, controller is not trigger. i summarize the code only for create button, below is the code:

in the View




<script type="text/javascript">

<script type="text/javascript">

function createButton(){

	var button ='<?php echo CHtml::ajaxButton('Edit',array('ajax' => array(

					'type'=>'POST',

					'dataType'=>'json',											

					'data'=>array('counter'=>$itemFormInfo['counter'],'server'=>$itemFormInfo['server'],'productType'=>$itemFormInfo['productType']),

					'url'=>CController::createUrl('sell/loadDialog'),	

					'success'=>'function(data){						

						 $("#uploadBox").dialog("open");

					}',					

					'async' => true,

					),								

				)) ?>';

				

	$("#test").append(button);

}

</script>

</script>

<?php

$this->beginWidget('zii.widgets.jui.CJuiDialog', array(

	'id'=>'uploadBox',

    // additional javascript options for the dialog plugin

    'options'=>array(

        //'title'=>'Upload Image',

        'autoOpen'=>false,

		'width'=>'auto',

    ),

));


$this->endWidget('zii.widgets.jui.CJuiDialog');




// this is the button that already exits when page load

CHtml::Button('Add',array('ajax' =>array('type'=>'POST',											       'dataType'=>'json',											

	'data'=>array('somedata'),

'url'=>CController::createUrl('sell/addButton'),	

											'success'=>'function(data){

   createButton();

}'),));

?>

<div id="test"></div>



controller // assume i just want to trigger the createButton() function to create the ajax button




public function actionAddButton(){


}



the output will be all button id is the same (id=yt0);

So your problem is the id of the button rendered via ajax? Have you tried changing the htmlOptions?




public function actionAddButton()

{

    echo CHtml::ajaxButton('I am a button', CController::createUrl('someController/someAction'), array( ), array('id'=>'some-unique-id'))

}



Yii will always have a problem with creating unique ids for widgets that are nested or used in views that are a bit more complex. The best thing is to set them yourself to be sure

Hi Haensel,

Yes, i did add the id for the ajaxbutton but once i did like this, the whole ajax trigger was fail. I got no idea with it. It become id change to my define id and the name will be yt0, i have also try to set the name same with the id but still fail. Below is my code for the button:




CHtml::ajaxButton('Edit','',array('ajax' => array(

					'type'=>'POST',

					'dataType'=>'json',											

					'data'=>array('counter'=>$itemFormInfo['counter'],'server'=>$itemFormInfo['server'],'productType'=>$itemFormInfo['productType']),

					'url'=>CController::createUrl('sell/loadDialog'),	

					'success'=>'function(data){						

						 $("#uploadBox").dialog("open");

					}',					

					'async' => true,

					),								

				),array('id'=>'some-unique-id'))



When the view return, the button id was some-unique-id, and name will be yt0 and the most serious problem would be no event trigger once i click the button.

You shouldn’t use




CHtml::ajaxButton('Edit','',array('ajax' => array('type'=>'POST',....)

//but

CHtml::ajaxButton('Edit','',array('type'=>'POST',.....)



If it is still a problem I am sure it has something to do with the scripts not loading properly. It is hard to know what causes this but there is a good wiki article that might help you getting on the right track. Instead of echoing the ajaxbutton you could render a partial view containing the button and make sure that JQuery isn’t loaded twice with Yii::app()->clientScript->scriptMap[‘jquery.js’] = false

http://www.yiiframework.com/wiki/72/cjuidialog-and-ajaxsubmitbutton

Hi Haensel,

Actually in my page, i was using the controller to renderPartial it. The code i show you just now is just the code in the view, is it all the syntax would be correct? I have try to use firebug but no js error was found. I also have try your suggestion to put Yii::app()->clientScript->scriptMap[‘jquery.js’] = false in my view file to prevent load js twice but still fail. Below is my controller code:

View // the button to trigger the controller




<div id="currency_lis"></div>


<?php

CHtml::Button('Add',array('ajax' => array(

'type'=>'POST',								'dataType'=>'json',									'data'=>array('data'=>'data'),

'url'=>CController::createUrl('sell/addList'),	

											'success'=>'function(data){

   $("#currency_list").append(data.item_field);

)',

),));

?>



Controller




public function actionLoadButton(){

...

code

...

$item_field .= $this->renderPartial('_itemForm',array('modelProductsDeliveryMode'=>$modelProductsDeliveryMode,'itemFormInfo'=>$itemFormInfo),true);


echo CJSON::encode(array(

  'item_field'=>$item_field,

}};

}



It is something like this, click Add button trigger the controller and then append the button (is for add image - trigger CJuiDialog, discuss from another topic that i send yesterday).




<div id="currency_lis"></div> 



!=




$("#currency_list")



Hi Haensel

Dont worry, that was the copy paste mistake. Do you found any problem in my code. Is that the correct way to define the ajaxbutton. I was reading the forum and also Yii official page, the way i write should be correct right?

Again, I think you should read these articles on ajax and CJuiDialog/tabular inputs to understand how it works. This topic quickly becomes to complicated to discuss in a thread. Try doing it the way as described in one of the examples and you can at least be sure that your syntax is correct.

http://www.yiiframework.com/wiki/141/javascript-tabular-input

http://www.yiiframework.com/wiki/145/cjuidialog-for-create-new-model

http://www.yiiframework.com/wiki/72/cjuidialog-and-ajaxsubmitbutton