How can one achieve multiple form submission while the user holds the button pressed.
<h:commandButton value="Multiple submission" action="#{mngr.doSomething}"/>
Basically I just want to keep invoking mngr.doSomething method as long as i hold the button pressed. Any ideas?
That's only possible if you use <f:ajax> whereby you do not render the button itself. You can then use onmousedown and onmouseup events to start and stop the rage submit by explicitly invoking the onclick() handler of the button and you can use <f:ajax onevent> to continue explicitly invoking the onclick() handler on successful return as long as the button appears to be still pressed.
Here's a kickoff example:
<h:form>
<h:commandButton value="submit" action="#{bean.submit}" onmousedown="startRageSubmit(this)" onmouseup="stopRageSubmit(this)">
<f:ajax onevent="processRageSubmit" />
</h:commandButton>
</h:form>
(again, when using <f:ajax render>, make sure that the button is not covered by the selector)
with this JS:
function startRageSubmit(button) {
button.pressed = true;
button.onclick();
}
function processRageSubmit(data) {
if (data.status == "success" && data.source.pressed) {
data.source.onclick();
}
}
function stopRageSubmit(button) {
button.pressed = false;
}
You can add javascript event listener with javascript setInterval() function to submit the form(with AJAX) in your desire intervals.
Related
I need to simulate focus event on input to open NgbTypeahead dropdown , is it possible? Because i cant do it like:
.ts:
#ViewChild('inputExecutor') inputExecutor: ElementRef
focus$ = new Subject<string>();
click$ = new Subject<string>();
focused(){
this.executorForm.controls['executor'].setValue('');
this.focus$.next(this.executorForm.value.executor);
}
inputFocus(){
this.inputExecutor.nativeElement.focus();
}
html:
<input
class="choose-executor-input"
type="text"
name="executor"
formControlName="executor"
[ngbTypeahead]="searchExecutors"
(focus)="focus$.next($event.target.value); focused()"
(click)="click$.next($event.target.value);"
(selectItem)="itemSelected($event)"
[resultFormatter]="formatExecutors"
[inputFormatter]="formatExecutors"
#instance="ngbTypeahead"
#inputExecutor/>
<button
click)="inputFocus()"
class="btn btn-executor-open"></button>
</button>
So how i can focus on input to open dropdown? Any issues?
To accomplish this, you can fire an input event on the input element the NgbTypeahead is bound to, then call the focus method so that the input has focus and you can start typing immediately.
I started with the Open on focus demo from the ng-bootstrap website, and made the following changes:
Declare a new template variable elem so the DOM element is accessible inside the component TS file (note you can't use the existing instance as that is an NgbTypeahead not an HTML element):
Component HTML:
<input
id="typeahead-focus"
...
#instance="ngbTypeahead"
#elem
/>
Component TS:
#ViewChild('elem') elem: ElementRef;
Add a button to the template which will call a focus function - this is the button that when clicked will open the typeahead and focus on it:
<button (click)="openTypeahead()">Open Typeahead</button>
Add an openTypeahead function in the component TS file as follows:
public openTypeahead(): void {
// Dispatch event on input element that NgbTypeahead is bound to
this.elem.nativeElement.dispatchEvent(new Event('input'));
// Ensure input has focus so the user can start typing
this.elem.nativeElement.focus();
}
Please see this Stackblitz for a demo
I use
HTML:
<input #instance="ngbTypeahead" .../>
<button (click)="openTypeahead(instance)">Open Typeahead</button>
TS:
openTypeahead(inp) {
inp._elementRef.nativeElement.value = '';
inp._elementRef.nativeElement.dispatchEvent(new Event('input'));
inp._elementRef.nativeElement.focus();
}
I'm trying to set paper-button active using next code
in the html file:
<template>
...
<paper-button id="button1" toggle active="{{buttonsActive}}">button 1</paper-button>
<paper-button id="button2" toggle active="{{buttonsActive}}">button 2</paper-button>
</template>
and in the dart file:
#observable bool buttonsActive = false;
if I press button1 at the begginning it change the button2 to active/inactive. However if I later press button2, after pressing button1, button1 doesn't change active state. The same happens in the other way if I press button2 first.
Is this a bug on paper-button or is there a way to do this correctly?
I found a workaround.
Add next buttonsActiveListener:
buttonsActiveChanged(bool oldValue, bool newValue) {
($['button1'] as PaperButton).jsElement['lastEvent'] = null;
($['button2'] as PaperButton).jsElement['lastEvent'] = null;
}
previous code makes lastEvetn null everytime buttonsActive variable changes.
This is caused because this:
activeChanged: function() {
this.super();
if (this.toggle && (!this.lastEvent || this.matches(':host-context([noink])'))) {
this.toggleBackground();
}
},
which appears on line 58 of paper-button-base.html. The important line is the if statement which checks if the lastEvent is falsey (null or undefined).
Again this is just a workaround.
I have two submit buttons Back, Continue. What should I to do to disable client validation when I click on Back. I was trying to add cancel class to button attribute but It seams does not help.
UPD. Actually this is working cancel class. But It seams not working if you add it dynamically(by javascript).
I attached an event handler to certain buttons, that altered the settings of the validator object on that particular form.
$(".jsCancel").click(function (e) {
$(e.currentTarget).closest("form").validate().settings.ignore = "*"
});
This has worked like a charm for me in MVC3.
I don't know if this helps you in particular, but since I use ajax form, I had to attach the event to these buttons each time the contents of the ajax form was replaced, by using the event ajax success. The full code that reparses the form and attaches the event to the cancel buttons is:
$(document).ajaxSuccess(function (event, xhr, settings) {
var $jQval = $.validator, adapters, data_validation = "unobtrusiveValidation";
$jQval.unobtrusive.parse(document);
$(".jsCancel").click(function (e) {
$(e.currentTarget).closest("form").validate().settings.ignore = "*"
});
});
Hijack the button click for form submission using JavaScript.
Here is good example with jQuery:
$("#MyButton").click(function(e) {
//submit your form manually here
e.preventDefault();
});
This is really a comment to the answer by tugberk, but comments don't show code examples very well.
Some browser versions do not like the "preventDefault()" function. After being bitten by this a few times, I added a simple utility function:
//Function to prevent Default Events
function preventDefaultEvents(e)
{
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
You call it in place of "preventDefault" like this:
$("#CancelButton").on("click", function(event) {
preventDefaultEvents(event);
return false;
});
You can use "cancel" css class.
Ex: <input type="submit" value="Cancel" name="Cancel" class="cancel" />
JQuery.Validate handle the rest in the following code:
// allow suppresing validation by adding a cancel class to the submit button
this.find("input, button").filter(".cancel").click(function() {
validator.cancelSubmit = true;
});
I am using telerik MVC control and I am having a popup window and I want to close the pop up window by firing click event from my cancel button on the popup window .
Can someone tell me how should I do it ?
This is what I did
<input type="button" value="Cancel" onclick="onClose()" />
and my java script is like this
<script type="text/javascript">
function onClose() {
window.close();
}
</script>
but when I do that I get a confirmation box asking me whether I want to close the window and If I select yes my browser window is closed.
I just did a similar thing with the asp.net-ajax window from telerik.
They have demos out that helped me.
Try http://demos.telerik.com/aspnet-mvc/window/clientsideapi for the mvc controls
You need to get a handle of the object
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return oWindow;
}
Then you can call close on the rad window object
function windowClose(reload) {
var oWindow = GetRadWindow();
oWindow.close();
}
I have the following scenario:
I have a button\link with a image inside like this:
<button type="submit" id="myButton" class="button"><img src="../../Content/images/check.png" id="defaultImage" />
SaveData!!!</button>
We are OK here! Now what I need to do is:
I want on the click that the image change for a loading element that is previously loaded in the page like this:
<img id="loadingImage" src="../../Content/images/loader.gif" style="display: none;" alt="loading"/>
And then when the load complete turn back the old button image, I ended with this code:
function loader() {
var $button = $('#myButton');
if (btnState == '1') {
$button.find('img').hide();
$button.prepend($('#loadingImage'));
$('#loadingImage').css({ 'display': 'inherit' });
btnState = '0';
}
else {
$button.find('img').hide();
$button.prepend($('#defaultImage'));
$('#defaultImage').show();
btnState = '1';
}
}
This does the trick for ONE SINGLE button(since I pass its ID in the function) but, when I have for example a grid with a button on each line, I found inviable when managing a screen with many buttons do this for each of then. The main question is: How can I make this method general for all buttons/links on one specific class in the page?
The goal is: Click a button, get the image and change it and stop(can be manual). I just don't wanna have to Hook ALL buttons.
You should do something like this, it will prevent the user from double submitting:
$('.button').click(function(evt) {
evt.preventDefault();
var button = this;
hideButton(button);
$('ID or CLASS').load('AJAX FILE URL', function() {
//On success, show button remove image
showButton(button);
});
});
function hideButton(button) {
$(button).hide().after('<img src="../../Content/images/loader.gif" alt="loading"/>');
}
function showButton(button) {
$(button).next('img').hide();
$(button).show();
}
All of the code above should be in the $(document).load
Your HTML should look like:
<button type="submit" class="button"><img src="../../Content/images/check.png" />SaveData!!!</button>
There is no need for Id's now on anything.