I have an update form, and within that form there is a table where I want to populate using ajax after filling in a couple of fields. I have tried using ajaxSubmitButton but somehow it just doesn't trigger the action that I want.
Here is my view:
<?php
echo CHtml::ajaxSubmitButton('Insert', array('myController/insertProgress'), array(
'type' => 'POST',
'success' => 'function(){
alert("success");
}',
'data' => array(
'progress' => 'js:$("#progress").val()',
),
)
);
?>
myController:
public function actionInsertProgress() {
$data = $_POST['progress'];
//do stuff here, including echoing the table row
}
When I click the submit button, it doesn't trigger the insertProgress action, but instead the main form action which is actionEdit. It's as if the URL that I provided is being ignored.
The url for this form goes something like this:
(sitename)/(modulename)/myController/edit/id/57
Thank you.
EDIT: I do have another submit button to update the whole form, which triggers the actionEdit action.
EDIT2: this is what the widget produces:
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
jQuery('body').on('click','#yt0',function(){jQuery.ajax({'type':'POST','data':{'progress':$("#progress").val()},'url':'http://inarac.id/adm/topikkajian/insertProgress','cache':false});return false;});
});
/*]]>*/
</script>
If you are using module you should add the modele path to your link
$myLink = Yii::app()->getBaseUrl(true) .
'/index.php/moduleName/myController/insertProgress';
<?php
echo CHtml::ajaxSubmitButton('Insert',
$myLink, array(
'type' => 'POST',
'success' => 'js:function(){
alert("success");
}',
'data' => array(
'progress' => 'js:$("#progress").val()',
),
)
);
?>
I am using this 'widgets.TbThumbnails' from bootstrap to show the list of items as thumbnails. It shows first 10 items in one page and another 10 items on the other page. further it shows page navigator button at the bottom of the page. I tried to show all the items in a single page, but couldn't. If anyone know please help me to fix this. here is my code for thumbnail view
<?php $dataProvider = new CActiveDataProvider('Symptoms');
$this->widget('ext.bootstrap.widgets.TbThumbnails',
array(
'dataProvider' => $dataProvider,
//'template' => "{items}\n{pager}",
'itemView' => '_thumb',
//'htmlOptions' => array('style' => 'width:975px;','height:1020px'),
)
);
?>
Well that is due to the fact that dataProvider uses default settings for pagination.
Cpagination has a property named pageSize which refers to the the number of items per page. By default this is set to 10 thats why you can see 10 items per page.
Here is Official documentation.
You can do like this:
<?php
$dataProvider = new CActiveDataProvider('Symptoms', array(
'pagination'=>false
));
$this->widget('ext.bootstrap.widgets.TbThumbnails', array(
'dataProvider' => $dataProvider,
'itemView' => '_thumb',
)
);
?>
here i am using the ajax request to delete the record from the clistview the record is deleting succesfully but the list view is not updating if we refresh the page then only the record is removing from the clist view can any one help here is my code
<?php
echo CHtml::link(CHtml::encode('Delete'), $this->createUrl('delete', array('id' => $data['id'])), array(// for htmlOptions
'onclick' => ' {' . CHtml::ajax(array(
'type'=>'POST',
'beforeSend' => 'js:function(){if(confirm("Are you sure you want to delete?"))return true;else return false;}',
'url'=>$this->createUrl('delete', array('id' => $data['id'],'ajax'=>'delete')),
'complete'=>'js:function(jqXHR, textStatus){$.fn.yiiListView.update("firstlist");}'
)) .
'return false;}', // returning false prevents the default navigation to another url on a new page
)
);
here is the code for clistview
<?php $this->widget('zii.widgets.CListView', array(
'id' => 'firstlist',
'dataProvider'=>$dataProvider,
'itemView'=>'_beneview',
'enablePagination' => false,
'summaryText' => '',
)); ?>
You could use CHtml::ajaxLink for ajax request, but your way is also fine.
I have filtered CListView results also with paginations enabled, you can just look at the major things for updating list view on this link
Please check view part and updating script part.
Hope his will help.
Use CGridView, you can add CButtonColumn
I create a form use the CActiveForm to create a form.
<?php $form = $this->beginWidget('CActiveForm', array(
'id'=>'report-form',
'enableAjaxValidation'=>false,
'enableClientValidation'=>true,
'focus'=>array($exps[0],'productname'),
)); ?>
and when I call the ajax handler in the controller.I want to create a new html string to update the form.
but I can't find the way to get access to value $form!
could I get the value in the controller form the view?
any suggestion would be appreciated!
You could create the form object at your controller and pass it to the view via the 2nd argument of the render() function..
// inside controller
$form = $this->beginWidget('CActiveForm', array(
'id'=>'report-form',
'enableAjaxValidation'=>false,
'enableClientValidation'=>true,
'focus'=>array($exps[0],'productname'),
));
$this->render($myView, array(
'form' => $form,
));
I have a case where on my view file there are 6 links and clicking on them opens CJuiDialog boxes . I am keeping all the 6 dialog boxes code in the same view file along with links and that is causing the file to be big and loading them all together once .The ideal scenario is the dialog boxes should get loaded only when the use clicks on the links .
So is there any way we can keep only the links code in the main view file and keeping all the dialogue boxes in separate files and loading them only when the user clicks on the links
I mean
index.php ( view containing only links)
_dialog1 ( containing code for first dialog )
_dialog2 ( containing code for second dialog )
_dialog3 ( containing code for third dialog )
_dialog4 ( containing code for fourth dialog )
_dialog5 ( containing code for fifth dialog )
_dialog6 ( containing code for sixth dialog )
Sample Code
//First Dialog code
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'mydialog1',
'options'=>array(
'title'=>'Dialog box 1',
'autoOpen'=>false,
'modal'=>true,
),
));
echo 'First dialog content here';
$this->endWidget('zii.widgets.jui.CJuiDialog');
echo CHtml::link('open dialog', '#', array(
'onclick'=>'$("#mydialog1").dialog("open"); return false;',
));
//2nd dialog code
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'mydialog2',
'options'=>array(
'title'=>'Dialog box 1',
'autoOpen'=>false,
'modal'=>true,
),
));
echo 'dialog2 content here';
$this->endWidget('zii.widgets.jui.CJuiDialog');
echo CHtml::link('open dialog', '#', array(
'onclick'=>'$("#mydialog2").dialog("open"); return false;',
));
Solution I came with
//In controller
public function actionOpenDialog1()
{
$data = array();
$this->renderPartial('_dialogContent1', $data, false, true);
}
public function actionOpenDialog2()
{
$data = array();
$this->renderPartial('_dialogContent2', $data, false, true);
}
//In index.view
<div id="data">
</div>
<?php
echo CHtml::ajaxButton ("Open first dialog", CController::createUrl('dialogTesting/openDialog1'),array('update' => '#data'));
echo CHtml::ajaxButton ("Open second dialog", CController::createUrl('dialogTesting/openDialog2'),array('update' => '#data'));
?>
//_dialogContent1.php
<?php
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'mydialog1',
'options'=>array(
'title'=>'Dialog box 1',
'autoOpen'=>true,
'modal'=>true,
),
));
echo 'first dialog content here';
$this->endWidget('zii.widgets.jui.CJuiDialog');
?>
//_dialogContent2.php
<?php
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'mydialog1',
'options'=>array(
'title'=>'Dialog box 1',
'autoOpen'=>true,
'modal'=>true,
),
));
echo 'first dialog content here';
$this->endWidget('zii.widgets.jui.CJuiDialog');
?>
Thanks a lot for your help
Regards
Kiran
Naming files
The convention in Yii is to name the view files:
index.php: a full view
_dialog1.php: a partial view (included from another view)
Sub views
Then you can include partial views with CController::renderPartial():
$this->beginWidget(...);
$this->renderPartial('_dialog1', array('var1' => 23, 'var2' => "var"));
$this->endWidget(...);
Factorizing code
This should make your source node much lighter. But I suggest you go farther and avoid duplicating all those widget calls. To do this, you should define a structure for your dialog parameters and loop over it. Something like:
$dialogs = array(
'mydialog1' => array(
'file' => '_dialog1',
'options' => array('title' => "My title 1",),
),
'mydialog2' => array(
'file' => '_dialog12,
'options' => array('title' => "My title 2",),
),
);
$defaultOptions = array(
'autoOpen' => false,
'modal' => true,
);
foreach ($dialogs as $id => $dialog) {
$this->beginWidget(
'zii.widgets.jui.CJuiDialog',
array(
'id' => $id,
'options' => CMap::mergeArray($defaultOptions, $dialog['options']),
)
);
// ... include partial view ...
This factorization will make your code more compact, but it will above simplify the future changes. Using data structures to avoid code duplication is a well-known practice.
AJAX
Lastly, if you really want the partial views to be loaded dynamically, that means you have to use AJAX. Be careful, because your page may be less reactive from a user point of view. If all your forms amount to a few Kb of HTML, then there's no nedd for AJAX. But if you go this way, then you'll need to:
Add an CJuiDialog containing just <div id="dialog-ajax"></div>.
Create another action that will apply renderPartial() on the dialog views.
Replace the content of the previous foreach loop with code that writes JS like function dialog1() {jQuery("#dialog-ajax").load(...);}. You'll need to hack if you want to change dynamically the widget title.
Bind some events (clicks) to these JS functions.
Another way would be to make your aJAX action render a full CJuiDialog, it might be simpler and avoid JS hacks. Anyway, I'm not sure you really need AJAX.
My answer
//In controller
public function actionOpenDialog1()
{
$data = array();
$this->renderPartial('_dialogContent1', $data, false, true);
}
public function actionOpenDialog2()
{
$data = array();
$this->renderPartial('_dialogContent2', $data, false, true);
}
//In index.view
'#data'));
echo CHtml::ajaxButton ("Open second dialog", CController::createUrl('dialogTesting/openDialog2'),array('update' => '#data'));
?>
//_dialogContent1.php
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'mydialog1',
'options'=>array(
'title'=>'Dialog box 1',
'autoOpen'=>true,
'modal'=>true,
),
));
echo 'first dialog content here';
$this->endWidget('zii.widgets.jui.CJuiDialog');
?>
//_dialogContent2.php
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'mydialog1',
'options'=>array(
'title'=>'Dialog box 1',
'autoOpen'=>true,
'modal'=>true,
),
));
echo 'first dialog content here';
$this->endWidget('zii.widgets.jui.CJuiDialog');
?>
You can simply include one empty CJuiDialog in your page, and when it needs to be displayed load the contents with jQuery AJAX (load is the simplest, and probably enough) that returns a render of the appropriate view before opening the dialog.