Hi all,
I have a problem on using CJuiDialog, i can trigger the CJuiDiolog but i need to pass some value also, got anyway to pass the value. I have read forum and someone suggest to use code like below:
echo CHtml::link(‘open dialog’, ‘#’,array(
‘onclick’=>’$("#mydialog").data({ theid: “abc” }).dialog(“open”);’,
));
i have try on it but i can’t get the value in the CJuiDialog page, can anyone help me?
How are you reading the data from the dialog page ?
If I’m not mistaken, the data/view is embedded between the widget tags; which is embedded in a normal view. You can use the data from the main view in the dialog.
Are you using ajax to populate your dialog view? Please post some view/controller code so that we can help.
Matt
Hi,
<?php
$this->beginWidget(‘zii.widgets.jui.CJuiDialog’, array(
'id'=>'mydialog',
// additional javascript options for the dialog plugin
'options'=>array(
//'title'=>'Upload Image',
'autoOpen'=>false,
'width'=>'auto',
'modal'=>true,
),
));
echo $theid.’-’.$_POST[‘theid’].’-’.$_GET[‘theid’].‘jjj’;
$this->renderPartial("/site/localization",array('model'=>$model,'model_Countries'=>$modelCountries));
$this->endWidget(‘zii.widgets.jui.CJuiDialog’);
echo CHtml::link(‘open dialog’, ‘#’,array(
‘onclick’=>’$("#mydialog").data({ theid: “abc” }).dialog(“open”);’,
));
?>
Here is the sample code that i try to do testing, i do not know is that the correct way to define the onClick CJuidialog or not, this code is i get it from the forum and someone show it but didn’t show how to retrieve the data. Is this the correct way to trigger the dialog box? Because i would like to trigger the diolog box and show the upload button, the upload part is complete but i need to pass value($id). My page will have many product list and each product will have a button to onClick upload image, so i need to know where button there are clicking.
Is that any other way to trigger the CJuiDialog, for example like i do ajaxButton to trigger controller and then let controller to trigger the dialog box?
Hi,
Can you please post your entire view code? I need to see how you’re generating your rows of data i.e. CGridView? Also, please code your code within the [code] templates.
If you’re using CGridView, have you seen Zaccaria’s post at http://www.yiiframework.com/wiki/204/using-cjuidialog-to-edit-rows-in-a-cgridview/#c4142?
Matt
What I would do is
[list=1]
[*]open the dialog on the click event
[*]send an AJAX request to generate the view (you can pass all the params to the AJAX request)
[*]on success of the AJAX response, replace the content of the popup with the response text
[/list]
I did something similar but with a regular link i.e. not in a grid. Look at the last link for an example - "Notify Users"
if (Yii::app()->user->isAdmin)
{
$image = CHtml::image(Yii::app()->request->baseUrl . '/css/gridViewStyle/images/loading.gif');
$this->menu = array(
array('label' => 'Project Admin', 'url' => array('/admin/project/admin')),
array('label' => 'Create Project', 'url' => array('/admin/project/create')),
array('label' => 'Update Project', 'url' => array('/admin/project/update', 'id' => $model->id)),
array('label' => 'Delete Project', 'url' => '#',
'linkOptions' => array(
'submit' => array('/admin/project/delete', 'id' => $model->id),
'confirm' => 'Are you sure you want to delete this item?')),
array(
'label' => 'Notify Users',
'url' => array('/admin/project/notificationPopup', 'projectId' => $model->id),
'ajax' => array(
'type' => 'POST',
'success' => 'function(data, textStatus, jqXHR){
$("#userNotificationPopup").html(data);
}',
'beforeSend' => 'function(jqXHR, settings){
$("div.#userNotificationPopup").html(\'' . $image . '\');
}',
'async' => true,
),
'linkOptions' => array(
'onclick' => '$("#userNotificationPopup").dialog("open");'),'randomID' => true),
);
}
Cheers,
Matt
Hi Matt,
Thanks for your code and advice, i have go through you code and i have modify a bit for my own requirent and it finally works. My idea was using the button to trigger the controller to call the CJuiDialog box prompt up and this Dialogbox is renderPartial with the EAjaxUpload, once the upload is done will trigger dialogBox close, in the whole process i will need to pass some information below was my code:
In view:
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'userNotificationPopup',
// additional javascript options for the dialog plugin
'options'=>array(
//'title'=>'Upload Image',
'autoOpen'=>false,
'width'=>'auto',
),
));
$this->renderPartial('uploadImage');
$this->endWidget('zii.widgets.jui.CJuiDialog');
echo CHtml::Button('Add',array('ajax' => array(
'type'=>'POST',
'dataType'=>'json',
'data'=>array('test'=>'123'),
'url'=>CController::createUrl('sell/loadDialog'),
'success'=>'function(data){
$("#userNotificationPopup").dialog("open");
}',
'async' => true,
),
//'linkOptions' => array('onclick' => '$("#userNotificationPopup").dialog("open");'),
));
In my controller:
public function actionLoadDialog(){
echo CJSON::encode(array(
'result'=>'value',
));
}
renderPage:
<?php
$this->Widget('ext.EAjaxUpload.EAjaxUpload',
array(
'id'=>'uploadFile',
'config'=>array(
'action'=>$this->createUrl('sell/uploadTest'),
'allowedExtensions'=>array("jpg","jpeg","gif","png"),//array("jpg","jpeg","gif","exe","mov" and etc...
'sizeLimit'=>10*1024*1024,// maximum file size in bytes
'minSizeLimit'=>1*5*1024,// minimum file size in bytes
'onComplete'=>"js:function(id, fileName, responseJSON){ alert(fileName+' '+responseJSON['size']);
$('#userNotificationPopup').dialog('close');
}",
),
));
?>
Glad it works. One question, why do you do an Ajax request simply to open the dialog? In your code, the dialog will always open unless there is an error submitting/receiving the Ajax request/response. Is the Ajax request used to determine if the dialog box should open?
In my code, I did an Ajax call to build a view for the dialog; saving page load time since the content isn’t generated unless the user clicks the link.
Matt
Hi Matt，
yea, the purpose i did for this ajax button is because i need to pass variable value to the CJuiDialog. this code actually i was use in the product listing page where this button is to prompt the image upload section ( client request ) and somemore the listing was an append form generate each time the user press add product. I have having problem on the ajax button because the button was not pre load, all the ajax button generate with the same name, yt0 something like that… this problem have block me to occur the correct controller function ( it keep trigger the first button controller "The add product list button". Any idea to avoid this problem?
And the prompt out is actually renderPartial an upload button ( EAjaxUpload ), in this part i have another problem occur, the button is not load but show "Please enable the javascript …", if u put the script renderPartial from other controller, it works well.
Do you know anyway to renderPartial the EAjaxUpload from the controller? i need to send data pass by the renderPartial. Example like this
controller
public function actionUpload(){
$id = $_POST['id'];
$server = $_POST['server']
$this->renderPartial('EajaxPage',array('id'=>$id,'server'=>$server))
}
both id and server is pass from the ajax button and on success trigger $("#upload).dialog("open");
the i can do upload in this CJuiDialog box
Pass two Booleans, false, true to the renderPartial method. See what they do here. Also make sure you give unique Id’s to all widgets and content divs.
You’re running into a common Yii/jQuery issue. Basically, when you call renderPartial from Ajax without false, true Yii doesn’t include the necessary jQuery files.
You need to postProcess the result by passing true as the fourth argument. Watch out though, if your partial view uses scripts that already included in the main view the Ids will be duplicated and you’ll run into problems. A common workaround is to identify the duplicate scripts (manually) and exclude them in the partial view.
<?php
// Do not resend the jQuery script with this reponse since it's included in the initial page load.
Yii::app()->clientscript->scriptMap['jquery.min.js'] = false; // Used in production mode
Yii::app()->clientscript->scriptMap['jquery.js'] = false; // Used in development mode
?>
Let me know how it goes.
Matt
Hi Matt,
Thank for your post, my problem is almost solve. Once i add the fourth argument to true and add the include jQuery, the EAjaxUpload is work. CJuiDialog + EAjaxUpload is almost work. Only got a bit bug that i still nt able to solve yet. I have call function to trigger CJuiDialog to close but error is occor, the close script is like below:
$('#uploadBox').dialog('close');
Here the js error:
$(
[Break On This Error] $('#uploadBox').dialog('close');
This is the 1st problem:
Here is show my script:
View:
<?php
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'uploadBox',
'options'=>array(
//'title'=>'Upload Image',
'autoOpen'=>false,
'width'=>'auto',
),
));
$this->endWidget('zii.widgets.jui.CJuiDialog');
?>
<script type="text/javascript">
function closeCJuiDialog(){
$('#uploadBox').dialog('close');
}
</script>
renderPartial View
<?php Yii::app()->clientScript->registerCoreScript('jquery'); ?>
<?php
$form=$this->beginWidget('CActiveForm', array(
'id'=>'seller-form',
'enableAjaxValidation'=>true,
'htmlOptions'=>array('enctype'=>'multipart/form-data','name'=>'productListing','OnSubmit'=>'return CheckForm();'),
));
?>
<?php
$this->Widget('ext.EAjaxUpload.EAjaxUpload',
array(
'id'=>'uploadFile',
'config'=>array(
'action'=>$this->createUrl('sell/uploadImageFile',array("a"=>$a)),
'allowedExtensions'=>array("jpg","jpeg","gif","png"),//array("jpg","jpeg","gif","exe","mov" and etc...
'sizeLimit'=>10*1024*1024,// maximum file size in bytes
'minSizeLimit'=>1*5*1024,// minimum file size in bytes
'onComplete'=>"js:function(id, fileName, responseJSON){
alert(responseJSON['counter']);
closeCJuiDialog();
}",
),
));
?>
<?php
$this->endWidget();
?>
Controller
public function actionUploadImageFile(){
$value = $_GET['a'];
//echo $value;
//exit;
Yii::import("ext.EAjaxUpload.qqFileUploader");
$folder=Yii::app()->basePath.'/images/';// folder for uploaded files
$allowedExtensions = array("jpg","jpeg","gif","png");//array("jpg","jpeg","gif","exe","mov" and etc...
$sizeLimit = 0.5 * 1024 * 1024;// maximum file size in bytes
$uploader = new qqFileUploader($allowedExtensions, $sizeLimit);
$result = $uploader->handleUpload($folder,$value);
$result=htmlspecialchars(json_encode($result), ENT_NOQUOTES);
echo $result;// it's array
}
public function actionLoadDialog(){
echo CJSON::encode(array(
'counter'=>$this->renderPartial('uploadImage',array('a'=>'5'),true,true),
'server'=>$_POST['server'],
'productType'=>$_POST['productType'],
));
}
Now the value is able to pass, only the last part once upload image was done, the trigger close cause js error.