I'm a bit stuck with Simplemodal.
I want to destroy the data which has the class $('p.confirm') after closing the modal window.
Here's what i have so far and it doesn't work :
if (document.getElementsByClassName('confirm').length > 0){
$('p.confirm').modal({
overlayClose:true,
onClose:function(dialog){
dialog.data.find('.confirm').remove();
$.modal.close(); // must call this!
},
persist:true
});
}
Can anybody help me ? Thanks
<p class="confirm">asdf</p>
if (document.getElementsByClassName('confirm').length > 0){
$('p.confirm').modal({
overlayClose: true,
onClose: function(dialog){
$.modal.close(); // must call this!
dialog.data[0].remove();
},
persist:true
});
}
Related
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
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.
My datatables is declared in this way:
"processing": true
,"serverSide": true
,"stateSave":true
,"stateDuration": 60*60*24
,"ajax":{
"url":"/approval/search.json"
,"type":"post"
}
My code to clear state:
if(page doesn't exist){
table.state.clear();
table.draw()
}
I don't know how to tell if page doesn't exist. I've tried table.page.info() but the data it shows is the same whether the page has info or not.
After SO MUCH trial and error I finally succeeded with this:
,"fnDrawCallback":function(){
if(table.row().data()===undefined){
table.state.clear();
location.href=url
}
}
Updated answer for newer versions of datatables:
drawCallback: function (settings) {
let api = this.api();
// fix pagination if saved page is empty
if (api.page() > 0 && api.rows({page: 'current'}).count() === 0) {
api.page('previous').state.save();
location.reload();
}
}
This will set the state to the previous page if the current does not exist, and reload the page.
I may have used the previous answer and alter it. It work perfectly for me :
drawCallback: function (settings) {
let api = this.api();
var info = api.page.info();
if (info.pages!=0 && (api.page() > 0 && api.rows({page: 'current'}).count() === 0)) {
api.page('first').state.save();
window.location.reload();
}
}
I have a chart with tool tip. What i want is when i move the mouse over certain data the tooltip should hide and if i move it on someother data it should display again. My sample code is:
tips = {
trackMouse : true,
width : 120,
height : 26,
renderer : function(storeItem, item){
if(item.yField == 'temp'){
this.hide();
} else{
this.setTitle(storeItem.get(xFld)+':'+item.value[1]);
}
};
I tried hide();, destroy();, disable(); and visibility(); but nothing worked.
Can anyone give me the proper solution for this.
Thanks
Handle the ToolTip's beforeShow event. Return true if you want the ToolTip to show, false otherwise.
beforeShow: function(item) {
return item.yField !== 'temp';
}
Handle the ToolTip's beforeShow event
Return true if you want the ToolTip to show, false otherwise.
It worked for me and it saved my time . thanks Kevin
I made a custom basic lightbox with Dojo to be used with forms and data. Not really dealing with images or such.
The problem that I seem to be facing is this. When Dojo makes a call via AJAX to ajaxtb.php with specific code for example; ?f=login or ?f=register the page is loaded. When you I close the lightbox and try to view something different say ?f=stuff the lightbox will show what ever was before it be it ?f=login or what ever, it will show it until ?f=stuff is fully loaded.
Here is the code for the lightbox, also can some one tell me how to optimize it since its pretty redundant at the moment and very basic.
dojo.ready(function(){
#loads logout confirmation
dojo.query("#jsLogoutPromp").connect("onclick", function(){
dojo.byId("qpbox-title-text").innerHTML = "Logout Confirmation";
dojo.query("#qpbox-content").style("display", "block");
dojo.query("#qpbox-overlay").style("display", "block");
dojo.xhrGet({
url: "ajaxtb.php?f=logout",
load: function(newContent) {
dojo.byId("utm").innerHTML = newContent;
},
// The error handler
error: function() {
// Do nothing -- keep old content there
}
});
});
#loads options to upload profile photo
dojo.query("#jsUserPhotoPromp").connect("onclick", function(){
dojo.byId("qpbox-title-text").innerHTML = "Upload Photo";
dojo.query("#qpbox-content").style("display", "block");
dojo.query("#qpbox-overlay").style("display", "block");
dojo.xhrGet({
url: "ajaxtb.php?f=display_pic",
load: function(newContent) {
dojo.byId("utm").innerHTML = newContent;
},
// The error handler
error: function() {
// Do nothing -- keep old content there
}
});
});
#closes everything when clicked well technically hides everything
dojo.query("#qpbox-close").connect("onclick", function(){
dojo.query("#qpbox-content").style("display", "none");
dojo.query("#qpbox-overlay").style("display", "none");
});
#shows up for logout only, same as above code, but does not work since the original id is included in ajax.php?f=logout
dojo.query("#qpbox-stay").connect("onclick", function(){
dojo.query("#qpbox-content").style("display", "none");
dojo.query("#qpbox-overlay").style("display", "none");
});
});
The functions responsible for closing everything is qpbox-close and qpbox-stay. Technically both only hide the lightbox not close. The other problem is with qpbox-stay. qpbox-stay id is located in ajax.php?f=logout and when clicked it does not close the lightbox so not sure whats the problem with it.
here is the code for ajax.php
if($_GET['f'] == 'logout') {
echo '
<p>Are you sure you want to exit right now?</p>
<br>
<button type="submit">Logout</button> No, I wana Stay
';
}
Thanks
You can use dojo.empty(dojo.byId('utm')) before showing the lightbox to delete all the contents.
Also, you can refactor your code quite a bit. Both click handlers do basically the same thing. So why not refactor them in a function?
dojo.ready(function() {
function showLightBox(title, url) {
var utm = dojo.byId('utm');
dojo.empty(utm);
dojo.byId("qpbox-title-text").innerHTML = title;
dojo.style(dojo.byId("qpbox-content"), "display", "block");
dojo.style(dojo.byId("qpbox-overlay"), "display", "block");
dojo.xhrGet({
url: url,
load: function(newContent) {
utm.innerHTML = newContent;
},
// The error handler
error: function() {
// Do nothing -- keep old content there
}
});
}
function hideLightBox() {
dojo.style(dojo.byId("qpbox-content"), "display", "none");
dojo.style(dojo.byId("qpbox-overlay"), "display", "none");
}
dojo.connect(dojo.byId('jsLogoutPromp'), 'onclick', function() {
showLightBox("Logout Confirmation", "ajaxtb.php?f=logout");
});
// ...
dojo.connect(dojo.byId('qpbox-close'), 'onclick', hideLightBox);
});
You can try and connect to #qpbox-stay after you've loaded the content, or if using Dojo 1.6, you can use NodeList.delegate like:
dojo.require('dojox.NodeList.delegate');
dojo.query('#utm').delegate('#qpbox-stay', 'onclick', hideLightBox);
That will connect to #utm which is already loaded, but work for #qpbox-stay only. It works with event bubbling, similar to jquery.live(). See http://davidwalsh.name/delegate-event