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/
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 want to put a form in a popup.
I've found a solution but I'm looking for something cleaner.
I didn't find a way to poping-up an existing tag with swal.
So I created an hidden form in my template :
<div id="myHiddenForm"><form role="form">
<md-input class="email" md-type="email" md-label="Email" md-validate="true"
md-validate-error="invalid email">
<i md-prefix class="material-icons">account_circle</i>
</md-input>
<button type="submit" md-button>
<i class="left material-icons">done</i>Submit
</button>
</form></div>
Then I created the popup with it's innerHTML.
swal({
html: document.getElementById('myHiddenForm').innerHTML,
showConfirmButton: false,
}).catch(swal.noop);
Then I can attach a callback to the submit button and this works finally.
Obviously, I can't use md-value.bind because the displayed form is a copy of the original.
I can access the input's value, using document.querySelectorAll('#myHiddenForm .email input')[0].value but I'm wondering if there's a better way to do this ?
Maybe there's a nice approach to combine aurelia-materialize-bridge and sweetalert2.
I know there's a modal component but it's not capable of keeping the focus inside the modal popup ; plus I already use swal2 everywhere else in this webapp because, you know, it is so sweet.
After a lot of tests and the full reading of the sweetalert2 documentation, I found the correct way to handle this. We simply need to move the <form> node.
swal({
html: '<span></span>'
, showCloseButton: true
, showConfirmButton: false
, onBeforeOpen: dom => swal.getContent()
.appendChild(document.querySelectorAll('#myHiddenForm form'))
, onClose: dom => document.getElementById('myHiddenForm')
.appendChild(swal.getContent().querySelectorAll('form'))
}).catch(swal.noop);
It's perfect to use with aurelia because it preserve everything (monitors, events, validation...).
We don't even need to manually bind the submit button like I did, We can use aurelia's usual way.
Conclusion: RTFM !
I am trying to get CAPTCHA working on the eForm plugin. I have added the input form field:
<label for="cfCaptcha">Captcha:<br />
<img src="[+verimageurl+]" alt="verification code"><br />
<input id="vericode" name="vericode" class="text" type="text">
and I have added
&vericode=`1`
to the eForm call.
and have added the Template Variable [+verimageurl+] to my template.
However, when I preview the form all I see in the image area is <img src="" alt="verification code">
Would anyone know what I am doing wrong?
Did you get this fixed?
Check that you ended the label code. Run it through w3c code checker too.
A few times I have left a element un-closed and it breaks the whole thing.
I've got a very simple function, of replacing the innerHTML of a element. I've been trying to debug this for hours but simply can't, and it's infuriating.
When called from a button press the JavaScript (as follows) works well, but when called from another function it doesn't work. I am totally lost as to why this might be, and its a fairly core part of my app
// This loaded function in my actual code is a document listener
// checking for when Cordova is loaded which then calls the loaded function
loaded();
function loaded() {
alert("loaded");
changeText();
}
function changeText() {
alert("started");
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
Button press and HTML to replace
<div id="main">
<input type='button' onclick='changeText()' value='Change Text'/>
<p>Change this text >> <b id='boldStuff'> THIS TEXT</b> </p>
</div>
It is also here in full on JSFiddle
You are already changed the innerHTML by calling the function loaded(); on onLoad.
Put this in an empty file and same as .html and open with browser and try. I have commented the function loaded();. Now it will be changed in onclick.
<div id="main">
<input type='button' onclick='changeText();' value='Change Text'/>
<p>Change this text >> <b id='boldStuff'> THIS TEXT</b> </p>
</div>
<script>
//loaded();
function loaded() {
alert("loaded");
changeText();
}
function changeText() {
alert("started");
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
The problem here is, that the element you're trying to manipulate is not yet existing when you are calling the changeText() function.
To ensure that the code is only executed after the page has finished loading (and all elements are in place) you can use the onload handler on the body element like this:
<body onload="loaded();">
Additionally you should know, that it's very bad practice to manipulate values by using the innerHTML property. The correct way is to use DOM Manipulations, maybe this can help you.
You script loads before the element (boldStuff) is loaded,
Test Link - 1 - Put the js in a seperate file
Test Link - 2 - put the js at the very end, before closing the <body>
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.