I have 2 button one of them of type file -which is hidden- if the user click the first button a confirmation dialog opens if user click Ok the second button must be clicked.
The problem is that all the logic is subscribe method -of confirmation dialog - are execute expect clickEvent for the second button.
Can anyone explain why and provide me with a solution?
#ViewChild('fileBrowser') fileInput: ElementRef;
dialogRef: MdDialogRef<ConfirmationDialog>;
clickUpload(){
this.dialogRef = this.dialog.open(ConfirmationDialog);
this.dialogRef.afterClosed().subscribe((result) => {
if (result) {
// some code
this.fileInput.nativeElement.click();
}
this.dialogRef = null;
});}
//HTML Code
<button md-button (click)="clickUpload()" > upload</button>
<input #fileBrowser id="fileBrowser" type="file" hidden="true">
"this.fileInput.nativeElement.click();" this is the problem line
I found the solution, i changed dialogRef's method from afterClosed to beforeClose
The new code
this.dialogRef.beforeClose().subscribe((result) => {
if (result) {
// some code
this.fileInput.nativeElement.click();
}
this.dialogRef = null;
});}
Related
I have below code which calls save form
<div className="col-md-4">
<button onClick={saveCredit} className="btn btn-success">
Submit
</button>
I have onclick handler function as
const saveCredit = () =>{
//validate form
// call api to save form attributes
CreditTransactionDataService.create(data)
.then(response => {
setSubmitted(true);
console.log(response.data);
})
.catch(e => {
console.log(e);
});
}
after successful save , I will show successful message as below.
{submitted ? (
<div>
<h4>You submitted successfully!</h4>
<button className="btn btn-success mr-2" onClick={newCreditTransaction}>
Add
</button><Link style={{ fontWeight: 'bold' }} className="btn btn-warning" to={"/creditTransactionList"}>
return to List
</Link>
</div>
)
but the problem is, my form is getting submitted twice, and creating duplicate records with same values.... couple of save options, i restricted with unique key column at database level, but few tables still need to handled at code level..
I´m unable to reproduce it in codepen, but one solution a little bit hacky could be check in the method if it is submitted already
const saveCredit = {
//Check if it is submitted
if(!submitted){
//validate form
// call api to save form attributes
CreditTransactionDataService.create(data)
.then(response => {
setSubmitted(true);
console.log(response.data);
})
.catch(e => {
console.log(e);
});
}
}
This may not be the best but could do the job
Also a thing I did notice is that your saveCredit function not look like a function.
Why not declare as an arrow function? Like:
const saveCredit = () => { //Your code }
Your button doesn't need onClick event handler if it's responsible for submitting a certain form. You should add type="submit" to button and onSubmit to form tag itself.
You should go for this approach to handle submitting correctly (clicking of the button or hitting enter by the user are covered).
As a newbie to HTML, I am seeking your help and guidance.
I am trying to create a page which will have only two Buttons like:
Create User and Log In
Depending on which button is clicked a form will be processed.
It's similar to a concept of Register or LogIn.
PS: I am trying to use java for the script part
Please Guide me to achieve the above mentioned scenario
As I understood from your descriptions you have a page with only two buttons in it. So there is no form in this page but then when you click on any of buttons they lead you to another page with a form.
then you can have a tag like this:
<a href="">
<div style="width: 60px; height: 30px; border: solid 1px; text-align: center">Log In</div>
</a>
The below code will send different data to the server, depending on which button was clicked
var formElm = document.forms[0];
formElm.addEventListener('submit', function(){
return false; // disable normal form submit so the page won't refresh
})
// when button number #1 gets clicked, send the form to the server
formElm.querySelector('.do1').addEventListener('click', function(){
fetch('/url',{ method:'POST', body:new FormData(formElm) })
.then(function(response) {
console.log('request succeeded with JSON response', JSON.parse(data))
})
.catch(function(error) {
console.log('request failed', error)
})
});
// when button number #1 gets clicked, do something else..you choose.
formElm.querySelector('.do2').addEventListener('click', function(){
// send something else to the server
// ...
});
<form>
<input name='something' value='foo'>
<button type='button' class='do1'>button 1</button>
<button type='button' class='do2'>button 2</button>
</form>
I would like to change component without changing URL. Let's assume that I have a component register. When I open my website I have url www.myweb.com. Then I would like to register by clicking sign up. I would like to display my component register without changing URL. Should I use ngIf or something else? Can you show me example how it should be done?
UPDATE I am sorry, but it seems to me that I was misunderstood. I tried
this solution:
login.component.ts:
showSignUp: boolean = false;
login.component.html:
<button (click)="showSignUp = true">Sign Up</button>
<register *ngIf="showSignUp"></register>
However when I clicking the button Log in I get this:
before:
after clicking:
After clicking the button Log in I would like to get a new website but with the same URL like this:
UPDATE
What do you think about solution shown below? In html file I will be checking whether variable authenticated is equal true. If so then I will display home component.
login() {
this.loading = true;
this.authenticationService.login(this.model.username, this.model.password)
.subscribe(
data => {
this.authenticated = true;
// this.router.navigate([this.returnUrl]);
},
error => {
this.authenticated = false;
this.alertService.error(error);
this.loading = false;
});
}
UPDATE
Unfortunately it doesn't work. Any ideas how can I use it with this button?
<button [disabled]="loading" class="btn btn-primary">Log in</button>
You can use *ngIf and show the component in condition!
examle
In your sign up component, set a variable and change its value on click of sign up button. And display your register component on click of the login by pitting the condition in display
// sign up component
showRegister = false;
in your sign up component html
<register *ngIf="showRegister"></register>
Yes, this is a perfect use case for ngIf. Try not to over engineer it.
ngIf is the way to go on this kind of thing.
Just put in your component code something like
showSignUp: boolean = false;
then in template:
<button (click)="showSignUp = true">Sign Up</button>
<register *ngIf="showSignUp"></register>
And since you seem new to Angular, I'll mention that in order to use ngIf in template, your module needs to import the CommonModule like
import { CommonModule } from '#angular/common';
imports: [
CommonModule,
]
I'm trying to use HTML form validation when using Google Apps Script's HTML Service. As another user asked, according to the documentation example, you must use a button input instead of a submit input. Using a submit button seems to do the validation, but the server function is called anyway. The answer given to that user didn't work for me. Also, I want to call two functions when submitting the form and this can make it more complex.
This is what I'm trying to do: The user fills a form and I generate a Google Doc and give him the URL. When he clicks the submit button, I show him a jQuery UI dialog saying "Your document is being created" with a nice spinner. Then, when the document is generated, I give him the link. I use the success handler to show the result when the Google Doc stuff is finished, but meanwhile I need a function to show the spinner. I don't know if there is a better way to do that than adding another function to the onclick event and maybe it can be damaging the process in some way. Is there a way not to call any of these functions if the form is not valid (using HTML validation)?
This is a simplified version of my code:
Code.gs
function generateDocument(formObject) {
var doc = DocumentApp.create("Document name");
...
return doc.getUrl();
}
Page.html
<main>
<form id="myForm">
...
<input type="button" value="Generate document"
onclick="showProgress();
google.script.run
.withSuccessHandler(openDocument)
.generateDocument(this.parentNode);"/>
</form>
<div id="dialog-confirm" title="Your document">
<div id="dialog-confirm-text"></div>
</div>
Javascript.html
$( "#dialog-confirm" ).dialog({ autoOpen: false, resizable: false, modal: true });
function showProgress() {
$( "#dialog-confirm" ).dialog({ buttons: [ { text: "Cancel", click: function() { $( this ).dialog( "close" ); } } ] });
$( "#dialog-confirm" ).dialog( "open" );
$( "#dialog-confirm-text" ).html( "<br />Wait a second, your document is being generated...<br /><br /><img src='http://i.stack.imgur.com/FhHRx.gif' alt='Spinner'></img>" );
return false;
}
function openDocument(url) {
$( "#dialog-confirm" ).dialog({ autoOpen: false, resizable: false, width: 400, buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] });
$( "#dialog-confirm-text" ).html( '<br />Click here to open and print your document!' );
return false;
}
All three HTML docs are joined together (and working with its respective tags) with the include function as recommended in the documentation.
The Cancel button in the dialog will close it but won't stop the doc being created. Is it possible to stop this process?
Here's a solution that I found:
"<input type='submit' onclick='if(verifyForm(this.parentNode)===true){google.script.run.withSuccessHandler(YOUROUTPUT).YOURFUNCTION(this.parentNode); return false;}' value='Submit'></form>";
JavaScript side
function verifyForm(){
var elements = document.getElementById("myForm").elements;
for (var i = 0, element; element = elements[i++];) {
if (element.hasAttribute("required") && element.value === ""){
resetInputs();
return false;
}
if (element.hasAttribute("pattern")){
var value = element.value;
if(value.match(element.pattern)){
}else{
resetInputs();
return false;
}
}
}
return true;
}
Calling the window has issues in iOS sometimes, which is why I investigated this further.
Move the function call to the <form> element; remove any function call from the submit input element; and put intermediary JavaScript code into a <script> tag:
<input tabindex="9" type="submit" value="Save Input" id='idInputBtn'>
<form id="myInputForm" name="input" onsubmit="fncWriteInput(this)">
<script>
window.fncWriteInput= function(argTheInfo) {
// Do additional checks here if you want
var everythingIsOk = . . . . . . . ;
if (everythingIsOk) {
google.script.run
.withSuccessHandler(openDocument)
.generateDocument(argTheInfo);
};
};
Notice that this.parentNode gets removed to the arg of the function call, and just use this in the function argument because the function is getting called from the <form> element, which is the parent.
If there are any errors, the form will not be submitted, and the user will get a msg that something was wrong. No code will run.
This is pseudo code, but I do use a set up like this in my application. But use developer tools and you can put a break point right in your browser and step through every line to test it without needing to put in console.log statements.
I am trying to undo an event handler/listener that is added in an linked JS file in the header of the webpage.
The basic setup:
<form id="form_enter_giveaway" action="" method="post">
<input type="hidden" name="form_key" value="04b931caff99a0a688241e6da5f09839">
<input type="hidden" name="enter_giveaway" value="1">
Enter to Win! (1P)
</form>
JS file (http://www.steamgifts.com/js/header_functions.js):
$('.submit_entry, .remove_entry').click(function(){
$('#form_enter_giveaway').submit();
return false;
});
There is nothing native that should run if I click that link, and searching every reference to that link and that form in general seems to show that that single piece of JS is the only thing that could possibly be causing the form to submit.
But I have tried $('.submit_entry, .remove_entry') .unbind(), .off(), die() with the console; All with and without 'click', and every time I click that link tag it still submits. And it is interfering with the event I want to have run in its place.
Try this
var $selector = $('.submit_entry, .remove_entry');
// Binding the event using on so that it can be unbinded later
// that triggers the submitForm handler
$selector.on('click', submitForm);
function submitForm() {
$('#form_enter_giveaway').submit();
return false
}
// Unbind the event using off
$selector.off('click');
// Bind the event and prevent the default action of anchor
$selector.on('click', function(e) {
e.preventDefault();
});
Check Fiddle