I have created a declarative dojo wizard in dojo 1.5 that is embedded in a dojo dialog like this:
<div dojoType="dijit.Dialog" id="genWizardDialog" jsId="genWizardDialog" refreshOnShow="true" preventCache="true" title="Title">
<div dojoType="dojox.widget.Wizard" style='height: 375px; width:400px' hideDisabled="true" doneButtonLabel="someLabel">
<div id="wizard1" dojoType="dojox.widget.WizardPane" canGoBack="false" passFunction="panelOneDriver"></div>
<div id="wizard2" dojoType="dojox.widget.WizardPane" passFunction="validateBoxes" style="padding:8px; height:100%;"></div>
....I have some more panels.
</div>
<!-- Here I have setup the cancel method. -->
<script type="dojo/method" event="cancelFunction">
//dijit.byId("genWizardDialog").onSelected(0);
dijit.byId("genWizardDialog").hide();
</script>
</div>
Everything pretty much works. However, I have 4 panels. If I proceed to panel three and hit cancel. When I then click the button to start the dojo dialog I am already at panel 3! I want to start back at panel 1. As I have already invested time into the declarative approach I am hoping to avoid doing this programmatically. I found site that mentioned an onSelected() method to accomplish this -> http://dojo-toolkit.33424.n3.nabble.com/resetting-wizard-pane-and-contents-on-reopening-wizard-td158660.html, however, this didn't work and stands to reason since looking in the Wizard.js I don't see this method defined!
In your pasted code, you have the cancelFunction event in the dialog's div, not the wizard's. So move the <script> tag inside the div that has dojoType=dojox.widget.Wizard.
To select a specific wizard pane, you can use the selectChild function.
<script type="dojo/method" event="cancelFunction">
dijit.byId("genWizardDialog").hide();
dijit.byId("genWizard").selectChild("wizard1", false);
</script>
In the above, I've assumed that your wizard has an id "genWizard", so you'd have to add that to the wizard's div.
Now the wizard will jump to the first wizard pane when you click its cancel button.
It will not jump to the first wizard pane if you just click the dialog's X button. If you want that too, you need to use the dialog's onHide event.
<script type="dojo/method" event="onHide">
dijit.byId("genWizard").selectChild("wizard1", false);
</script>
This script tag has to be in the dialog's div, not the wizard's, make sure you get that right.
Related
Is it possible to disable this blur call on the active element from SwiperJS in the onTouchStart event handler?
Some background:
For touch and desktop devices I'm using swiper for forms on swiper-slides. Within a form I'm using vue-select (a combobox).
The Problem: When the user selects an entry, the entry get not selected on the first time but on the second time.
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>First form</div>
<v-select :options="selectionEntries"></v-select>
</div>
<div class="swiper-slide">
<div>Second form</div>
<v-select :options="selectionEntries"></v-select>
</div>
</div>
</div>
See also this example on codepen
I figured out that it seems to work correctly:
When I remove the blur-listener on the input field of the vue-select box. But it is used to close the selection list when the user leaves the field.
When I comment out this blur call in SwiperJS. I'm not sure why it is used there.
The first point is not an option, so is it possible to disable the blur call of SwiperJS via configuration?
Currently I'm using this workaround (SwiperJS V6.4.1):
const swiper = new Swiper(".swiper-container", {
// Workaround part 1:
touchStartPreventDefault: false
})
// Workaround part 2:
swiper.touchEventsData.formElements = 'notExistingHtmlTagName'
Part 1: To handle mouse down and click events on all elements, set the swiper parameter touchStartPreventDefault: false.
That will disable this code block: https://github.com/nolimits4web/swiper/blob/9dead9ef4ba5d05adf266deb7e3703ceb199a241/src/components/core/events/onTouchStart.js#L90-L97
Part 2: Set swiper.touchEventsData.formElements = 'undefined' to define nothing as formElements. That will disable the code block that calls blur: https://github.com/nolimits4web/swiper/blob/9dead9ef4ba5d05adf266deb7e3703ceb199a241/src/components/core/events/onTouchStart.js#L81-L88
I need to open Google's latest reCAPTCHA widget in a popup (modal) dialog, a Dojo Dialog in my case, and I've got that working fine, but I just realized that the user cannot keyboard navigate to it.
When the reCAPTCHA widget is displayed in the main view, not a modal dialog, then of course the user can easily keyboard navigate to it.
Has anyone found a way to set focus on the reCAPTCHA widget so that the user can access it without a mouse when the reCAPTCHA is in a Dojo Dialog?
I did see that reCAPTCHA is generated within an <iframe>. Is that part of the hurdle - that keyboard navigation can't reach content within an iframe? I've even tried to call document.getElementById("recaptcha-anchor") since I saw that that's the id of the <span> that holds the "checkbox" - but that is returning null. How to reach an element within an iframe?
I have a jsfiddle example available for demonstration at
https://jsfiddle.net/gregorco/xqs8w5pm/5/
<script>
var onloadCaptchaCallback = function() {
console.log("jsfiddle: rendering captcha");
globalRecaptchaWidgetId = grecaptcha.render('captchaDiv', {
'sitekey' : '6LcgSAMTAAAAACc2C7rc6HB9ZmEX4SyB0bbAJvTG',
'callback' : verifyCaptchaCallback,
'tabindex' : 2
});
grecaptcha.reset();
}
var verifyCaptchaCallback = function(g_recaptcha_response) {
console.log("Response validated. Not a robot.");
};
</script>
<script src='https://www.google.com/recaptcha/api.js?onload=onloadCaptchaCallback&render=explicit' async defer></script>
<div id="testDiv">
<button type="dojo/form/Button" onClick="captchaPopup.show();">Open reCAPTCHA</button>
</div>
<div data-dojo-type="dijit/Dialog" data-dojo-id="captchaPopup" title="Human Verification" style="width:350px;">
Cannot keyboard navigate to the checkbox!
<table>
<tr>
<td>
<div id="captchaDiv"></div><br/>
</td>
</tr>
</table>
</div>
Give this fiddle a try. Normally Dijit dialogs don't work too well with iframes in them because it doesn't know how to parse the content inside an iframe. In this case, we can use some of Dojo's functions to work around it. One notable thing to point out is that I've disabled autofocus of the Dijit Dialog so that it won't automatically focus the closeNode inside the dialog.
After the dialog loads, tab>space will select the captcha.
This may help others facing similar issue, but with Bootstrap modal dialog. I found the following solution on GitHub. Add the following Javascript to override Bootstrap:
Bootstrap 3x
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
Bootstrap 4x
$.fn.modal.Constructor.prototype._enforceFocus = function () { };
MS Visual Web Developer 2010-VB.Net
When button is double clicked ,i want to show some controls.How to add codes in double click event.
Thanks
Based on the fact that you're using Visual Studio Web Developer, I'll assume you're doing something with a browser. If you're not, comment on the answer and I'll delete it.
ASP.Net doesn't distinguish between single and double clicks. You'll have to use Javascript for this. To do what you're trying to accomplish, you'll have to make a client-side button whose ondblclick event calls the .click() function of the server-side button's rendered <input> element. Here's what I mean:
<asp:Button Id="Button" OnClick="Some_Method()" />
<!-- This renders to something like this: -->
<input type="submit" onclick="..." name="Button" id="Button" />
Knowing this (you can check this in your rendered document), you can do this:
<input type="button" ondblclick="document.getElementById('Button').click()" ... />
Of course, you probably only want one button visible. To do this, simply set Visible to false in the ASP.Net server control.
Again, this question could be for non-ASP.Net stuff, in which case this answer is worthless. If so, comment telling me so, and I'll delete the answer.
You can do this purely in client side.
Add client-side button that has "ondblclick" event to your ASPX/HTML page:
<button ondblclick="showControls()">Show Controls</button>
Add a DIV with display style set to none. Place your controls inside of that DIV:
<div id="myControls" style="display:none">
My<br>
Control<br>
are<br>
placed<br>
here<br>
</div>
Add client-side code that unhides that DIV:
<script>
function showControls(){
document.getElementById("myControls").style.display=""
}
</script>
Live demo: http://jsfiddle.net/5haxS/
I need to attach onClick event to tab, not to its content. For example, viewing the example, I want the event firing when I click "Drinks" tab.
The following code results in firing event when I click on tab's content, so it is not what I need:
<div
dojoType="dijit.layout.ContentPane"
href="test.php"
onClick="alert(1);"
>
</div>
Attaching event to tab container results in firing event when click both tabs and tab content.
You want to connect to the event onShow. Take a look at the "Event Summary" heading in the reference documentation:
http://dojotoolkit.org/api/dijit/layout/ContentPane
<div dojoType="dijit.layout.ContentPane" href="test.php" onShow="console.log('I'm being shown')"></div>
maybe you can write a something like this :
dojo.connect(
dojo.byId("myTab"),
"onclick",
function(){
alert('click');
}
);
there are clear, clear all buttons on richfaces fileUpload component.
<rich:fileUpload id="quoteFile" tabindex="10" listHeight="80" maxFilesQuantity="1" onuploadcanceled=""
clearControlLabel=""
clearAllControlLabel=""
acceptedTypes="xml"
fileUploadListener="#{loadSaveQuotes.uploadListener}">
<a4j:support event="onuploadcanceled" action="#{loadSaveQuotes.clearUploadData}" reRender="footer" />
</rich:fileUpload>
all I want to are:
1, remove the both buttons so that end user cannot click it. as I set clearControlLabel to "", and clearAllControlLabel to "", but only clearControlLabel is hidden. still have clear All Control appear as [x] button and I still click it
2, if I cannot remove these button, so how do I take control of them. like add an event listener to that on clear event. I added an a4j:support event but it do not trigger when I click clear button.
many thanks for your contribute.
Add an a4j:support for 'onclear' JavaScript event. The code is self-explanatory:
<rich:fileUpload id="upload">
<a4j:support event="onclear" reRender="upload"/>
</rich:fileUpload>
You can hide these buttons through CSS, e.g. you can give your fileupload an additional class like
<rich:fileUpload styleClass="my-upload"> etc. </rich:fileUpload>
and then use CSS Specificity to overrule the appearance of this fileupload component:
.my-upload .rf-fu-btns-rgh, .my-upload .rf-fu-itm-rgh {
display: none;
}
You can choose any combination of selectors that has higher specificity then the original one from RichFaces. I find having an extra class the cleanest solution, as it would allow me to have "normal" and "modified" RichFaces components next to each other, only differing in their style class.
You can look up the RichFaces style classes of the elements you want to alter in the RichFaces component documentation or with your favourite website inspection tool.
I was having the same requirement. Hide Clear All button and Clear Link but only when the file is submitted for upload. I solved this requirement with dynamic css through JavaScript. Below is the example.
rich:fileUpload control
<rich:fileUpload id="excelUploader"
fileUploadListener="#{uploadUIController.excelFileUploadListener}"
acceptedTypes=".xls"
maxFilesQuantity="1"
noDuplicate="true"
ontyperejected="Wrong file type selected !"
serverErrorLabel="Invalid file type selected !"
listHeight="100px"
doneLabel="Excel Upload Completed !"
onfilesubmit="showHideClearLink()"
styleClass="fileUploadClass"/>
Javascript code at the top of the file...
<script type="text/javascript">
function showHideClearLink()
{
var styleSheet = document.createElement('style')
styleSheet.innerHTML = ".fileUploadClass .rf-fu-btns-rgh, .fileUploadClass .rf-fu-itm-rgh {display: none;}";
document.body.appendChild(styleSheet);
}