I'd like to show the ngx-bootstrap alert multiple times with the [dismissOnTimeout] attribute; however, after it's dismissed the first time I can't figure out how to show it again.
My Angular html template:
<button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>
<div *ngIf="showMessage">
<alert type="success" [dismissOnTimeout]="dismissValue">
<strong>Well done!</strong> You successfully upload (disappearing in 3,2,1..).
</alert>
</div>
and in my compoent's method:
openModal(template: TemplateRef<any>) {
this.showMessage = true;
this.modalRef = this.modalService.show(template);
}
So once I call openModal(), the alert<> opens and gets dismissed the first time.
I'm trying to figure out how to reset the alert, so I can display that alert again - i.e.simulating a toaster type of component.
Thank you.
There's no direct way to show the alert that has been hidden after a timeout but you can get this working with a little workaround ( ngIf and alert's onClosed output).
<alert *ngIf="isOpen" type="success" dismissOnTimeout="5000" (onClosed)="isOpen = false">
5 sec timeout
</alert>
<button type="button" class="btn btn-primary" (click)="isOpen = true">Show again</button>
https://stackblitz.com/edit/angular-pfxjgi?file=app%2Fdismiss-on-timeout.html
Another way to do this would be via using the document and finding the alert you want to close and adding an id:
<alert id="alertid" *ngIf="isOpen" type="success" (onClosed)="isOpen = false">
5 sec timeout
</alert>
And then in the part you wish to programmatically close the control.
const element = this._document.getElementById('alertid').getElementsByTagName('button');
if (element && element.length) {
element[0].click();
}
where document is defined as:
constructor(#Inject(DOCUMENT) private _document: Document) {}
In this way you can close the alert at any time/place you want and can dispense with the timeout.
Related
This is the first time I am using modal component. Inside a for loop of an array of objects, I also added a modal component, "Add Item". The v:onClick="showSectionID" function in the SHOW button within the modal should just consolelog the id of the object who's associated modal was opened and click it's respective SHOW button. But instead it is giving the id of the last object wherever I click the SHOW button from any of associated modals.
Just to test, I removed the whole modal and only kept the SHOW button and in this case it gives me the correct id. I really cannot figure out what s is wrong in the modal and searched several sources in the internet to see a similar solution but couldn't find. See code:
<div v-for="(section) in allDataObject['Section']" :key="section['uuid']">
<h4>Section Name: {{ section["sectionName"] }}</h4>
<h4>Section Description: {{ section["sectionDescription"] }}</h4>
<template>
<div>
<b-button #click="modalShow = !modalShow">Add Item</b-button>
<b-modal v-model="modalShow">Fill form to add an item !
<button v-on:click="showSectionID (section['uuid'])">SHOW</button>
</b-modal>
</div>
</template>
</div>
In your code, you are creating a modal component for each section within the for loop.
I wouldn't be surprised if actually all your modals show up on the screen, but you see the last one because it's on top of all the other ones. But it also depends on how the modal is implemented.
I suggest you to move the modal template outside your for loop and change what you store in your component data so that you know which section to show in the modal.
Let's say your data() will look like this:
data() {
return {
modalVisible: false,
modalSectionUUID: null
}
}
Then you can create two methods to show and hide the modal:
methods: {
showModal(sectionUUID) {
this.modalVisible = true;
this.modalSectionUUID = sectionUUID;
},
hideModal() {
this.modalVisible = false;
this.modalSectionUUID = null;
}
}
Now, your template will finally look something like this:
<b-modal v-model="modalVisible">Fill form to add an item !
<button v-on:click="showSectionID(modalSectionUUID)">SHOW</button>
</b-modal>
<div v-for="(section) in allDataObject['Section']" :key="section['uuid']">
<h4>Section Name: {{ section["sectionName"] }}</h4>
<h4>Section Description: {{ section["sectionDescription"] }}</h4>
<template>
<div>
<b-button #click="showModal(section['uuid'])">Add Item</b-button>
</div>
</template>
</div>
I am trying to get one button to fire multiple tippy elements at once. I have created a each of the tippy() instances, but it does not work.
<span class="btn btn-success show-tooltip">test</span>
<span class="test-one" data-tippy-content="This is tooltip">Text</span>
<span class="test-two" data-tippy-content="This is another tooltip">Text</span>
<script>
tippy('.test-one', {
triggerTarget: '.show-tooltip'
});
tippy('.test-two', {
triggerTarget: '.show-tooltip'
});
</script>
But doing so doesn't fire the tooltip.
As per example given in aurelia documentation I am opening dialog box with viewmodel (say prompt ). This prompt has view inside in which I am adding "router-view" tag.
My routes are already configured. So when first time I open dialog it opens correct views as configured in routes and everything works well. But when I close dialog and re-opens dialog, It's not showing first route view. If I click other route link and come back to first route it works.
I have observed it's not creating instance of view model of first route( when opened dialog second time).
How to fix this issue?
Prompt html
<template><div class="row">
<left-menu ></left-menu>
<router-view></router-view>
</div></template>
<template>
and left-menu.htm
<template>
<div class="list-group">
<template repeat.for="item of items">
<a class="list-group-item ${$parent.selectedNav === item.routeName ? 'active' : ''}" route-href="route.bind: item.routeName;" click.delegate="$parent.select(item)">${item.text}</a>
</template>
</div>
Using a router inside a modal window seems off to me. The router is used to manage pages, but a modal is used to manage content within a page.
I would suggest building a modal window component, you can use <slot> tags to inject content and set it's model bindings to any data within the current view model.
Here's an example of my component that I use for this.
<template>
<div show.bind="visibility" class="modal-window">
<div>
<button class="btn btn-danger btn-sm close-button" click.delegate="close()">close</button>
</div>
<slot></slot>
</div>
<div show.bind="visibility" class="modal-window-overlay" click.delegate="close()"></div>
</template>
-
import { bindable } from 'aurelia-framework';
export class ModalContent {
#bindable visibility: boolean;
close(){
this.visibility = false;
}
}
<modal-content id.bind="'add-variant-window'">
<h4>Modal Content</h4>
<div>you can bind this to things on the current viewmodel</div>
</modal-content>
my Vue js project login template click button it redirects to like this
http://localhost:8080/#/login to http://localhost:8080/?#/login
both Url show interface.
1st Url not set the local storage variable 'token'.
2nd Url is set the local storage variable 'token'.
how to solve it?
Login.vue
<template>
<div class="row col-sm-12">
<form>
<div class="form-group">
<label>Email address:</label>
<input type="email" class="form-control" v-model="email">
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" class="form-control" v-model="password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button #click="login" type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</template>
<script>
export default{
data(){
return{
email:'',
password:''
}
},
methods: {
login(){
var data = {
email:this.email,
password:this.password
}
this.$http.post("api/auth/login",data)
.then(response => {
this.$auth.setToken(response.body.token)
// console.log(response)
})
}
}
}
</script>
The form is getting submitted as the button you have provided in the form has type="submit" which is the default behaviour of a button present inside form even if you do not add the attribute type="button"
So replace the type submit to button o prevent form submission like this:
<button #click="login" type="button" class="btn btn-success">Submit</button>
I just faced the same issue, and the provided solution did not worked for me (Vue 2.5.17).
I had to add a modifier to the #click event to prevent the default behavior:
<button class="btn btn-primary" #click.prevent="login">Login</button>
Changing the button type to button, you disable default form behaviour, like pressing enter and release submit event.
Just add a modifier to the #submit or #reset event to prevent default behaviour:
<b-form #submit.prevent="onSubmit" #reset.prevent="onReset">
In order to keep the default behaviour of submitting the form using the "Enter" key on the keyboard as well, another solution is:
to keep the type = 'submit' on the button
handle the event parameter on the callback and process it with event.preventDefault(); like that:
login(event){
event.preventDefault()
var data = {
email:this.email,
password:this.password
}
...
}
Event.preventDefault() will prevent the default behaviour which is here to submit the form on the current url with the issue we are dealing with here.
See https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
I'm still learning, please help!
I am trying to apply a Modal Popup that appears only when a link is clicked instead of when the page loads. My Modal Popup does all work fine, but I want to turn off/prevent the Popup from appearing at all when the page loads and simply have it only invoke the Popup when my chosen link is clicked.
$(document).ready(function () {
$("#popup-1").myModal({
// Functionality goes below this line
});
});
And this
<div id="popup-1" class="myModal">
<div class="window">
<!-- Your popup content -->
<div class="wrap demo-1">
<div class="title">Some Text Here</p>
<form>
<input type="text" class="field" placeholder="Your email goes here" />
<input type="submit" class="closeModal send" value="Submit" />
</form>
<label class="deny closeModal">Some Text Here</label>
</div>
<div class="cta demo-1">
<span class="icon"></span>
<p>Some Text Here</span></p>
</div>
<!-- / Your popup content -->
</div>
</div>
Is there a simple fix I can apply to solve this issue? I have spent countless hours going through existing posts and forums but almost each enquiry doesnt target the same specific question im trying to achieve based on my actual existing code.
My cose for the Link Click to activate
Newsletter
your help is very much appreciated
Just execute your modal opening code when a link is clicked instead of when the ready event is fired :
$('#modal-link').on('click', function() {
$("#popup-1").myModal({
// Functionality goes below this line
});
});
assuming the link opening your modal is :
link