I open modal using
document.getElementById('openLoginFormBTN').addEventListener('click', function (event) {
let loginFormModal= new bootstrap.Modal(document.getElementById('loginModal'));
loginFormModal.show();
});
and it works fine, but when I want to close it in function
...
console.log("user logged in")
let loginFormModal= new bootstrap.Modal(document.getElementById('loginModal'));
loginFormModal.hide();
...
It doesn't want to close.
I believe you can rely on the getOrCreateInstance method.
No need to retreive the modal again once you have the instance.
const btnShow = document.getElementById('openLoginFormBTN');
const modalEl = document.getElementById('loginModal');
const loginFormModal = bootstrap.Modal.getOrCreateInstance(modalEl);
btnShow.addEventListener('click', function (event) {
loginFormModal.show();
});
loginFormModal.hide();
I created a DEMO where you can play around with this.
Not sure if I've hit the mark on your use case. Please elaborate in case I missed something.
Related
Link to my codes (i cant embed images yet) https://i.stack.imgur.com/4XLgU.png
Im trying to add a TextInput Box to my screen but there is an error please tell me how i can resolve it.
Create the two functions and the state for the text and number, please add the below code in your Caloriscreen Class.
const [text,setText] = useState()
const [number, setNumber] = useState()
const onChangeText = (e) =>{
setText(e.target.value)
}
const onChangeNumber= (e) =>{
setNumber(e.target.value)
}
You need to use onChangeText prop properly.
Let's say if we have a state property number which can be created as follows:
constructor(){
super()
this.state={
number:0 }}
And now that you want to store the number user enters in input box you'll have to write:
<TextInput
onChangeText={(text)=>{
this.setState({
number:text
})}}/>
I'm wondering if it is possible to access variable / method of a template in iron:router.
My problem is : I want to reset a lot of stuff launched by my template (timer / subscription / whatever) on the page unload (from a change page menu)
But the window.onBeforeUnload is only triggered when we are changing the url. But my Iron:router is not reffreshing page and the only way i found to get this unload event is passing by iron:router's unload event. But there, I just can't access to my template variable or method. So the only way i found at the moment is passing my reset var by session... And i find this very awful !
Router.route('/printList', {
name: 'printjoblistList',
unload: function () {
var reset = Session.get("sessionTestIronRouter");
}
Have you got advice, tips and bests ways to do that ? :)
Ok, solved this, not very clean though.
I declared a globalHelper in my template client size :
Template.registerHelper('functionToCall', function () {
// Code here
});
and in my unload iron's route :
Router.route('/template', {
name: 'myTemplate',
unload: function (e, obj) {
Blaze._globalHelpers.functionToCall();
}
});
I am building notification feature for my app just like Facebook's notification. I have almost made it work but just unable to observe a computed property.
Here is the scenario:
There are many deals and when a deal is updated(like it's name/ price is changed), the notification is sent through RabbitMQ. The object payload that we send, it has an attribute "status" which could be 'read' or 'unread'.
controller:
notificationsCount: function() {
var notifications = this.get('notifications');
var unreadCount = 0;
for (var i = 0; i < notifications.length; i++) {
if (notifications[i].status == 'unread') {
unreadCount++;
}
}
return unreadCount;
}.property('notifications.[]'),
Here, initially 'notifications' is an empty array. All the notifications coming from RMQ as object payloads goes inside this. This 'unreadCount' is what I want to show kinda like a small badge over the notification icon.
When I click the notification icon, all the notifications' status should change to 'read' from 'unread'.
controller:
action:{
readNotifications: function () {
var notifications = this.get('notifications');
for (var i = 0; i < notifications.length; i++) {
notifications[i].status = 'read';
}
},
}
Through debugging, I found everything is working fine till this point. But what I want is, once the user clicks the notification icon and all the notifications are marked as read, the notificationCount should be set as zero as there are no more any notifications that is unread.
Theoretically, I have to either observe notificationsCount or execute notificationsCount once inside readNotifications action. But I couldn't find a way to do it. If there is any other way, feel free to share.
Thanks in advance.
The short of it is that you should define your notificationsCount computed property to listen to notifications.#each.status instead of notifications.[]. .[] triggers when the array contents change (elements are added or removed), while an .#each.prop triggers when the prop property on any array element changes.
Refer to the relevant Ember.js docs for details on this.
Additionally, you can make your code more concise using NativeArray methods (because, since you are already using the .property() shorthand, you do have prototype extension enabled). Your entire notificationsCount could be written as
notificationsCount: function() {
return this.get('notifications').filterBy('status', 'unread').length;
}.property('notifications.#each.status'),
and your action as
readNotifications: function () {
this.get('notifications').setEach('status', 'read');
},
Here's a link to a jsfiddle: http://jsfiddle.net/Qt972/
When you run the fiddle you'll see a name and a button to make the "person" say hello. This works fine, however the "event" is undefined.
An even simpeler case also fails:
http://jsfiddle.net/CCg2K/1/
Does anyone know how I can fix this issue?
When you do a console.log(arguments) inside your action callback you can see that there are actually 3 parameters passed. The first one is the view, the second is the event and the third is the context.
You can rewrite your edit action like this:
edit: function(view, event, context) {
var target = event.target;
...
}
UPDATE: since commit 657a2664 - available in release 0.9.6 I guess - only a single event parameter is passed which has the view and context as properties. So if you want to access those you have to do the following:
edit: function(event) {
var view = event.view;
var context = event.context;
...
}
Does anyone have an idea why this doesn't work or a workaround?
I'm trying to use the ValueChanging event from inside an EditorProvider
I have defined an EditProvider
<ig:TextEditorProvider ID="tepPercent">
<EditorControl HorizontalAlign="Right" ClientEvents-ValueChanging="validatePercent4Decimals"></EditorControl>
</ig:TextEditorProvider>
And a javascript handler
function validatePercent4Decimals(sender, args) {
var oldfieldvalue = args.get_oldValue();
var newfieldvalue = args.get_value();
if (isNaN(newfieldvalue)) {
args.set_value(oldfieldvalue);
args.set_cancel(true);
}
}
I've debugged it and can see it is running, and if I enter 34r, the inNan tests true and the set_value and set_cancel are called. But the value on the grid does not change from the 34r...
What's going on?
From this post on the Infragistics forums I believe that you have a numeric column. If this is the case then you should use a NumbericEditorProvider instead. There are more details on the available editor provides in the Infragistics help:
http://help.infragistics.com/NetAdvantage/ASPNET/2011.1?page=WebDataGrid_Editor_Providers.html