We wish to trow a modal popup telling the user to "please wait" until the forms finishes submitting.
Here is part of my _form.php (just a snipped for readable proposes):
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'event-form',
'enableClientValidation' => true,
'clientOptions'=>
array('validateOnSubmit'=>true,
'afterValidate'=>'js:function() {
$("#publishErrors").empty();
$("#event-form_es_").empty();
i = true;
if($("#EntityEvent_active").is(":checked"))
{
$("#publishErrors").show().append("<p>Please check:</p>")
if($("#Event_name").val()=="")
{
$("#Event_name").addClass("error");
...
...
I confess I'm a little lost on this process and I'm not sure if this will even work, still:
I'm thinking about placing this:
$this->beginWidget('zii.widgets.jui.CJuiDialog'
, array('options'=>array(
'title'=>'My Title'
, 'modal'=>true
))
);
echo 'Please Wait While Your Form is Being Submitted';
$this->endWidget('zii.widgets.jui.CJuiDialog');
at the very end of 'afterValidate' -
Is there a better approach ?
Please advice
There is already a jquery plugin for this: jQuery BlockUI plugin.
But if you want to use CJuiDialog, just make sure that closeOnEscape is false, and modal is true, also autoOpen should be false.
You could also use a jQueryUI Progressbar inside a CJuiDialog to show progress if you wish.
Edit:
Sample code to hide x button of the dialog:
$this->beginWidget('zii.widgets.jui.CJuiDialog',
array(
'id'=>'mywaitdialog',
'options'=>array(
'title'=>'My Title',
'modal'=>true,
'autoOpen'=>false,// default is true
'closeOnEscape'=>false,
'open'=>// supply a callback function to handle the open event
'js:function(){ // in this function hide the close button
$(".class-of-closebutton").hide();
}'
))
);
To open the dialog: $("#mywaitdialog").dialog("open");.
You can open the dialog in afterValidate, as you had guessed. While the form data is passed to the server the dialog will show, and after completion url navigation will occur(new page will be loaded).
Related
I am trying to develop the screen with nested popup (Popup inside another popup), Now am facing issues to close the inner popup and make visible the outer popup without redirecting to any page. how to achieve this ?
First popup has one grid and one new button, clicking on new button opens one more popup , here am uploading files and storing the details in DB while submitting the upload button, it should close the inner popup and focus should be in outer popup with updated grid details.
Please give any idea to achieve this ?
My 2nd Popup View Code,
<?php
echo CHtml::form('','post',array('enctype'=>'multipart/form-data'));
echo CHtml::activeFileField($model, 'name');
echo CHtml::button( 'Submit',array('submit' => array('baseContact/SaveAttachDocuments')));
echo CHtml::endForm();?>
Controller Action for 2nd Popup,
public function actionSaveAttachDocuments()
{
$model=new DocumentAttachmentModel();
$filename =CUploadedFile::getInstance($model,'name');
$model->type =pathinfo($filename, PATHINFO_EXTENSION);
$model->name =pathinfo($filename,PATHINFO_FILENAME);
$model->save();
/** Here i have to close the 2nd popup and update the grid in 1st popup **/
}
I guess you should close the inner popup by javascript (after client side validation), and then call the controller action for the outer popup again from the actionSaveAttachDocuments() method.
I have an XPage with 2 custom controls. The 1st custom control has a repeat control and the second is used just as a dialog box.
The user can delete a row from the repeat control by clicking on a delete link. then i use rowVar.getDocument.getNoteID and i delete the document.
What i want is to ask the user first: "are you sure you want to delete it?"
I used "window.confirm()" in CSJS but i dont like the default prompt box. So then i used dojo dialog box but i cant use rowVar of repeat control in it to get the documentId.
Currently i have code in the OK button of the dialog but i want to use OK/Cancel buttons only as a true/false and execute the code in the main custom control. Is there a way of passing the value of the button back to the caller?
I have done this in many ways. Basically, write the information you need to find the document to delete to a viewScope variable. Then create a stand alone event handler that is called from the OK or Cancel buttons of the dialog.
So the eventHandler looks like this post by Jeremey Hodge:
<xp:eventHandler
event="onfubar"
id="eventHandler1"
submit="false">
<xp:this.action><![CDATA[#{javascript:
// write the ssjs to save the doc base on viewScope parameters
}]]></xp:this.action>
</xp:eventHandler>
Then the dialog buttons look something like this (based on the Mastering XPages book and many other sources):
XSP.partialRefreshGet("#{id:eventHandler1}", {
params : {action :"OK" },
onComplete : function () {
// do something else if needed
},
onError : function() {
alert("no soup for you!");
}
});
Sorry for my very simple question, I'am new to HTML5 Builder.
I'm developing a simple database editing application (to add or remove some advertisments on site, only for system administrator), and I want to make it using HTML5 builder (I hope, it will be fast and simple).
On button click on main page ("Add record" button), I need to open another page with data fields (advinfo.php).
How can I do it?
Thanks.
You just need to redirect to the target page. How to do so will depend on the language you want to use.
If you want to use the JavaScript OnClick event of the button:
function Button1JSClick($sender, $params)
{
?>
//begin js
window.location = "advinfo.php";
//end
<?php
}
If you want to use the PHP OnClick event (the standard event):
function Button2Click($sender, $params)
{
header("Location: advinfo.php");
}
'items'=>array(
array(
'label'=>'About',
'url'=>array('about/index')
),
about/index - we get the class on the menu - active.
about/graphic - we don't get the class on the menu active.
about/print - we don't get the class on the menu active.
Please note that the menu has NO subitems.
Only About.
No mater if the user is on graphic, print or whatever, we wish to have the About highlighted.
How can we accomplish this ?
I've tried to edit that 'url' param a lot. No luck.
'items'=>array(
array(
'label'=>'About',
'url'=>array('about/index'),
'active'=>Yii::app()->controller->id=='about',
),
Added the active param. This worked.
active: boolean, optional, whether this menu item is in active state
(currently selected). If a menu item is active and activeClass is not
empty, its CSS class will be appended with activeClass. If this option
is not set, the menu item will be set active automatically when the
current request is triggered by url. Note that the GET parameters
not specified in the 'url' option will be ignored.
I've set that property. Otherwise it wouldn't work.
However, as you can see on the bold line, they say this should be automatically triggered. It wasn't on this case.
I suppose this was the case due to the fact that Yii is expecting a child element of About in order to apply that class, since there's any, we have to force it, to get the parent instead.
Not sure however.
CMenu is comparing item's route to current route, so by default it will work only for about/index.
I see two ways of forcing it - first is just set 'active' => true in items list:
$isActive = strpos(Yii::app()->controller->route, 'about/') === 0;
// ....
'items'=>array(
array(
'label'=>'About',
'url'=>array('about/index'),
'active' => $isActive
),
Or you can subclass CMenu class and overwrite CMenu::isItemActive($item,$route) method
simple but effective:
$action = Yii::app()->controller->action->id; // this is the action name currently running
'items'=>array(
array(
'label'=>'About',
'url'=>'/about/something',
'active'=>$action == 'something',
),
also...
to activate a menu, regardless of the action, just for a controller:
$controller = Yii::app()->controller->id; // this is the controller name
...
'active'=>$controller == 'something',
Notes:
add the $controller or $action variables, you can use them for more menu items. Your code will be cleaner.
you'll be 100% sure, the menu items will 'stick' active
i have a module. I need it to be able to display a modal dialog.
Seems like I need to inject a div into the main DOM and then parse it. Is this the right approach. Are there samples (or even a util- seems like this would not be that uncommon)
There are samples for almost everything in DojoCampus and in the tests directory:
var pane = dojo.byId('thirdDialog');
thirdDlg = new dijit.Dialog({
id: "dialog3",
refocus:false,
title: "Programatic Dialog Creation"
},pane);
Note that this particular widget doesn't need to be inserted to the DOM manually - it appends itself to the end of the page. Here the second parameter to the Dialog constructor - pane - is a reference to the node whose content should be displayed inside the Dialog.
UPDATE: Based on the new information you should try this:
dojo.require("dijit.Dialog");
dojo.addOnLoad(function() {
secondDlg = new dijit.Dialog({
title: "Programatic Dialog Creation",
style: "width: 300px",
content: "Insert text here"
});
secondDlg.show()
});
As shown here, you can pass Dialog content in the content attribute. (This sample is executable in FireBug on any page that includes Dojo.)
UPDATE: So, you want to have a form inside the Dialog? Nothing special here. Hey, you can even have a dijit form over there! Be sure to check out that DojoCampus article on Dialogs to learn how Dialog can communicate with a dijit form.
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.addOnLoad(function() {
secondDlg = new dijit.Dialog({
title: "Programatic Dialog Creation",
style: "width: 300px",
content: "<h2>Sample Form</h2>" +
"name: <input dojoType='dijit.form.TextBox' type='text' name='name' id='name'>"
});
secondDlg.show()
});
(Again this sample is executable in FireBug on any page that includes Dojo.)