https://bootstrap-vue.js.org/docs/components/alert/
I am trying to show an alert on a button click for a second and hide it away, then show it again when button is clicked again,
<b-alert :show="saved" >Default Alert</b-alert>
..
clicked() {
//1 sec delay
this.saved = 1
}
I was hoping this would show the alert and reset the "saved" to 0 or something so when I click the button it would show again, I even tried to set the value to 0 after the click but no avail.
In their other examples they have done similar things with additional methods like 'countDownChanged','showAlert', I just want to know if that can be done without that.
Any help is appreciated.
Please refer the following code. Its working fine for me.
<button #click="test">lalala</button>
<b-alert :show="showvar" >Default Alert</b-alert>
data: {
showvar:false,
sec:1000
},
methods: {
test: function() {
console.log("hi")
let self = this;
self.showvar=true
setTimeout(function(){ self.showvar=false; }, self.sec);
}
}
codepen - https://codepen.io/anon/pen/QoeNro
Related
I made custom feature to stop auto play when user hover on swiper. It is working but there is a problem. It won't stop immediately, instead of it has delay time = swiper's speed. How to stop it immediately. Please help me.
swiper.hover( function() {
swiper.autoplay.stop();
}, function() {
swiper.autoplay.start();
} );
I attached some eventListeners to a number of elements, like this:
$.someButton.addEventListener('click', function(evt) { eventHandling(evt); });
$.someImageView.addEventListener('click', function(evt) { eventHandling(evt); });
$.someWindow.addEventListener('click', function(evt) { eventHandling(evt); });
$.someTableView.addEventListener('click', function(evt) { eventHandling(evt); });
Then, I catch them like this:
function eventHandling(evt) {
switch (evt.source.id) {
case "someButton":
console.log("button clicked");
break;
case "someImageView":
console.log("imageview clicked");
break;
case "someWindow":
console.log("window clicked");
break;
case "someTableView":
console.log("tableview clicked");
break;
};
};
They all log their id's, except the TableView which logs undefined.
The TableView is set like this (minimised):
<Alloy>
<View id="main">
<TableView bottom="100" zIndex="0" id="someTableView" dataCollection="inspection" dataFilter="statusFilter">
...
</TableView>
</View>
</Alloy>
Why isn't this working?
To tell you more clearly on why this error is happening, we need more UI/XML code to know how TableView is linked with other UI elements.
The only guess right now is that any of the TableView Row's child element(s) can also fire that click event. Can you also share the code where you are getting undefined printed on console ?
Apart from this, I observe a less useful code pattern here - Why are you using switch statement just to know the id of clicked element?
I would prefer to use below code instead of above code.
$.someButton.addEventListener('click', buttonClick);
$.someImageView.addEventListener('click', imageViewClick);
$.someWindow.addEventListener('click', windowClick);
$.someTableView.addEventListener('click', tableClick);
function buttonClick(e) {
// .....
}
function windowClick(e) {
// .....
}
function imageViewClick(e) {
// .....
}
function tableClick(e) {
// .....
}
The point here is that running the code by assuming the id of source-view which fired that event is not a good-idea, because your layout might change in future or you can rename the IDs of those elements or could be any other reason.
Sencha Touch 1.1.1 --
Is there a way to set up a listener to listen for click events on the Back button of a NestedList? I can only find examples of how to set up for clicks on the 'body' or 'el' element. How would you be more specific and target the NestedList's back button?
Many Thanks
Code so far
MyTest.views.Justacard = Ext.extend(Ext.NestedList, {
title: "The Title",
...
listeners: {
click: {
element: 'el', // ANYTHING HERE TO TARGET THE BACK BUTTON?
fn: function(){
// do action
}
}
}
});
Ext.reg('justacard', MyTest.views.Justacard);
On a side note: because the NestedList component adds the back button automatically, there's no opportuity to configure it and add a handler (I think).
PS: adding the following code (below title: for example) allows me to respond to the Back button clicks - however, it also removes all the normal Back button functionality and the NestedList no longer slides back to the parent list.
onBackTap: function() {
alert('boo');
}
Turning into a proper 'lumpy carpet' scenario ; )
Try
MyTest.views.Justacard = Ext.extend(Ext.NestedList, {
title: "The Title",
...
listeners: {
back: function() {
alert('back?');
}
}
});
or
onBackTap: function() {
this.callParent(arguments);
alert('boo');
}
P.S. Sorry, I didn't test this (just looked at sources)
I am new to sencha touch mobile and my issue is when i am clicking the alert MSG OK button my list view is also getting the click event in the portion of OK button . So i need to put some time delay before hiding the alert and clicking OK, can any one help how to give some time delay in alert OK button event or any other solution for the fix. Please find the below code. Thanks in advance.
Ext.Msg.alert('', 'Data saved successfully', function(btn, text){
if (btn == 'ok'){
// DO WORK
//Ext.defer(function(){ console.log('ok clicked');},400);
}else{
return false;
}
});
if you want to add a delay, you could use the built in setTimeout method:
setTimeout(function() {
// do your work here
}, 400);
I'd just like to create a new window from the background page and put it in back. I tried focused:false but it doesn't seem to make the trick. I tried to save the previous windowId and tabId and update it after having creating the new window but it doesn't solve the problem neither.
Do you know how we can do that?
Here is my code:
function saveTabId() {
// Get the current tab
chrome.tabs.getSelected(null,function(tab){
if (tab != 'undefined') {
if (tab.windowId != windowId) {
currentTabId = tab.id;
currentWindowId = tab.windowId;
}
chrome.windows.create({url:"http://www.google.com", width:100, height:100, top:0, left:0, focused:false}, function() {
chrome.tabs.get(currentTabId, function(tab) {
chrome.windows.update(tab.windowId, {}, function(w) {
chrome.tabs.update(tab.id, {selected:true});
});
});
});
}
});
}
I launched this code at the beginning of background.html and when I refresh the extension, the window is on top of the extensions tab.
P.S: something more strange the window is on top of the extensions tab and when I change tab in this window, the new window stays on top of the other one even if I click and type text in the other one...
I got it kind of working, but popup window is still showing up for a moment before going underneath the current window:
chrome.windows.create({url:"http://www.google.com", width:100, height:100, top:0, left:0, focused:false}, function() {
chrome.windows.update(currentWindowId, {focused:true});
});
Thanks, here is the code I'm using now. The problem in the code of the question was the focus to the other window before updating it. It is strange, when you focus on a window, it doesn't show it on top of the others.
function focusTab(tabId) {
chrome.tabs.get(tabId, function(tab) {
chrome.windows.update(tab.windowId, {}, function(w) {
chrome.tabs.update(tab.id, {selected:true});
});
});
}