I am using (clickOutside) directive with div, and it is called when I click input element inside div.
<div class="col-4 align-self-center" (click)="setMethod(true)"
(clickOutside)="setMethod(false)" >
<button type="button" mat-raised-button color="accent" >
<input type="text"
class="form-control"
*ngIf="activeTitle"
[(ngModel)]="title" />
</button>
</div>
You can bind to the (blur) event instead of using (clickOutside). Maybe that would do the trick for you?
Note that the blur event fires when the component loses focus. This means that in order for blur to fire, the HTML element needs to be focused in the first place. E.g. the user has to have clicked on it with the mouse. You can call the focus() method on that element when your user clicks anywhere inside it, thereby ensuring that blur will be fired when the element loses focus.
E.g.:
<div
class="col-4 align-self-center"
(click)="setMethod(true)"
(blur)="setMethod(false)"
>
<button
type="button"
mat-raised-button color="accent"
>
<input
type="text"
class="form-control"
*ngIf="activeTitle"
[(ngModel)]="title"
/>
</button>
</div>
Related
Below is the html, to scan the bar-coder and the same will assign to barCodeNumber variable,
onChange() function will call once the bar-coder scanned,
Question:-
I want to hide the div from UI, but the function should work, even div is not visible.
I tried using "visibility: hidden" in scss style class, but the function is not working.
<div class="mt-5">
<div class=" flex flex-row align-content-center justify-content-between row-gap-6 card-container">
<form>
<input type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="barCodeNumber"
autofocus="true" placeholder="Enter/Scan RFID" (change)="mappingFunction($event)">
</form>
</div>
</div>
below is .ts file:
mappingFunction(event){
console.log('Event print', event);
}
Have a look here: Angular Reactive forms : change vs valueChanges
tldr:
(change) is called when blured away (which doesn't happen if it's hidden)
valueChanges is called every time and as soon as the value changes.
Also there is a special type of input that's hidden
<input type="hidden" ... >
You can "get out" from view the input
style {
position:absolute;
top:-3rem;
}
I noticed when using this kind of validation:
<label>Password</label>
<input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': f.password.touched && f.password.errors }" />
<div *ngIf="f.password.touched && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
<div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
</div>
<div class="form-group">
<button class="btn btn-primary" (click)="alertX()">sdf</button>
</div>
When I focused the input and then click the button, the method 'alertX()' is not executed I think it is because the state for the input changes to touched=true before the alertX(), (this happens sometimes not always but is kinda annoying for UX) any advice how to avoid this behaviour would be appreciated...
Example of method not executed when input was focused the button was clicked
According to MDN Docs:
click fires after both the mousedown and mouseup events have fired, in
that order.
In your example, clicking on the button causes the mousedown. This fires the validation immediately and there is an error under the input.
This moves the button a little lower and the mouseup is no longer on the button! So the click event doesn't fire since you didn't mouseup on the button.
Workaround:
<button class="btn btn-primary" id="btnSubmit" (mousedown)="alertX()">Register</button>
Register a EventListener on mouse down rather than a 'click' event to fire.
Working Demo on Stackblitz
I am trying to turn a password row into an input field when the 'change password' button is clicked. I am kind of halfway there already using Jquery. So I have made it so that when you click 'change password' the input field gets added. Also when they click 'back' the original state is shown. If you look on the codepen, you'll notice that after clicking 'back', you can't then click 'change password' again, the jquery doesn't work. Is there a solution to this?
Also I have used jquery 'replaceWidth', is there a better way to do this? I am putting a lot of html into my Jquery and not sure if that's the best way to do it.
Please take a look!
https://codepen.io/liamdthompson/pen/WYwXeK
$("#change").click(function () {
$("#container").replaceWith('<input class="form-control" id="zing" required="required" type="text" value="Change password" id="website_name">');
$(this).replaceWith('<button type="button" id="yeet" class="btn btn-light lighter">back</button>');
$("#yeet").click(function () {
$(this).replaceWith('<button type="button" id="change" class="btn btn-light lighter">Change password</button>');
$("#zing").replaceWith('<div class="" id="container">*********</div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accountmain" style="padding-top:25px;">
<div class="row">
</div>
<div class="row">
<div class="col">
<h6> Password</h6>
</div>
<div class="col" id="container">
*********
</div>
</div>
<button type="button" id="change" class="btn btn-light lighter">Change password</button>
</div>
This is because your #change on click event is bound to the dom element when the page loads.
To bind events to dynamically created elements, bind to the document using the .on feature, like this.
You have to re-attach the event listener again when you insert the button back in.
Otherwise another solution is to use the derived event on the parent class ie.
$('body').on('click', '#change', function(){});
This will affect any element with Id change that has body in its line of ancestors.
so I have a parent and child window
the parent window have some form in it and I plan to fill the form by value passing from child window that is retrieved from mysql database
but, every time the button to open the children window clicked it trigger 2 event
first , it open the children window
second , it submit the form in parent window
my question is why the second event happened ? i didnt put any code to submit the form (on parent window) in onclick event yet
this is my code in parent window :
<script language="javascript">
function openWindow() {
window.open("blabla.php","_blank","height=600,width=400, status=yes,toolbar=no,menubar=no,location=no");
}
</script>
<div class="form-group">
<label>ID USER</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
<input type="text" readonly class="form-control" id='idk' name='idk' placeholder="Submit ID User" required="required" />
<span class="input-group-addon"><button onClick="javascript:openWindow();">Select</button></span>
</div>
</div>
I can't answer you're question without more information. You need to understand what events are being fired when you're click function is being called to do this pass the event to your function. Then you can see the event object and determine what is causing your the second event to be fired. To do this pass the event object into your function and then you can inspect it.
<script language="javascript">
function openWindow(e) {
console.log(e);
window.open("blabla.php","_blank","height=600,width=400,
status=yes,toolbar=no,menubar=no,location=no");
}
</script>
<div class="form-group">
<label>ID USER</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
<input type="text" readonly class="form-control" id='idk' name='idk' placeholder="Submit ID User" required="required" />
<span class="input-group-addon"><button onClick="javascript:openWindow(event);">Select</button></span>
</div>
</div>
I don't know exactly what you are trying to accomplish based on the limited information you gave so this is the best I can do to help you. If you are using bootstrap and I see you are using some bootstrap classes. Bootstrap may be submitting your form on the click. Using e.preventDefault() may stop this behavior.
I have following structure
<div id="mainblock">
<div id="inner1">
some content in inner1
</div>
<div id="innersub1">
<input type="submit" id="go" value="go">
<input type="submit" id="delete" value="delete">
</div>
<div id="inner2">
some content in inner2
</div>
<div id="innersub2">
<input type="submit" id="go" value="go">
<input type="submit" id="delete" value="delete">
</div>
I need to exchange content between inner1 and inner2 div inluding ids. So, the id's change like inner1 becomes inner2,innersub1 becomes innersub2, and viceversa. I have been able to do this, using jquery. Now, go and delete buttons have attached handlers. But, now when I click "edit", it shows previous content before exchange. So, how should I reattach these handlers? Can I handle this swapping of content with handlers in some other way?
thanks
You can manually (in code) detach reattach them. Alternately you can just hide an unhide the buttons you need and leave the event handlers as they are.