How to turn off a task after a message prompt confirmation - javascript

I have a basic application.
When the button is triggered, I set my loading value to true.
vm.loading = true;
which then turns on my spinner in the background.
We are currently using asp .net boilerplate message prompts, I would like to have the spinner to occur when the message has is confirmed.
Current simplified code, spinner doesn't appear at all.
vm.uploadImage = function() {
abp.message.confirm(('Do you want to continue'),
function (isConfirmed){
if (isConfirmed){
vm.loading = true;
// do work here //
vm.loading = false;
}
});
}
To get the spinner working, I had to move vm.loading outside of the message prompt. But doing so I'm unable to disable the loading prompt. May I ask how do I disable to correctly fix the spinner.
vm.uploadImage = function() {
vm.loading = true;
abp.message.confirm(('Do you want to continue'),
function (isConfirmed){
if (isConfirmed){
// do work here //
}
}).then(function () {
vm.loading = false;
});
}
I've also tried putting the loading before and after the message, but it doesn't wait for the message prompt to complete.

Related

Disabling Form fields the use the SelectStatic widget in netbox v3 with javascript

I have a problem where i am trying to disable certain forms fields which use the SelectStatic Widget based on a tick box, i have included the javascript below.
const vlan = document.querySelector('#id_vlan');
const physical_facing = document.querySelector('#id_physical_facing');
const service_type = document.querySelector('#id_service_type');
const bd_function = document.querySelector('#id_function');
function vlan_enable(){
vlan.disabled = false;
};
function vlan_disable(){
vlan.disabled = true;
};
function service_function_enable() {
service_type.disabled = false;
bd_function.disabled = false;
};
function service_function_disable() {
service_type.disabled = true;
bd_function.disabled = true;
};
(function() {
service_function_enable();
vlan_enable();
if(physical_facing.checked){
service_function_disable();
} else {
vlan_disable();
}
})();
function pf_event() {
if(physical_facing.checked) {
vlan_enable();
service_function_disable();
} else {
vlan_disable();
service_function_enable();
}
};
physical_facing.addEventListener('change', pf_event)
When on the Page, the VLAN field is a DynamicModelFormField and will never disable, but when toggling the switch on and off the fields do not re-enable, i know the event is getting fired because i can see it in the developer tools, the disabled tag gets applied and removed with no change on the page, This may be a simple mistake but would like if someone can point me in the right direction.
below is what the page looks like
Netbox Page
Has anybody had any success doing this with the new version of netbox as it worked fine in V2 with the SelectStatic2 widget.

beforeinstallprompt triggers on every load

Beforeinstallprompt triggers on every load.
I have used the code here: https://developers.google.com/web/fundamentals/app-install-banners/
I am not using the The mini-info bar which i have dissabled by calling e.preventDefault();
The problem is that the showAddToHomeScreen(); is called on every load if the user does not click addToHomeScreen.
I want the showAddToHomeScreen(); function to be called only every month or so by storing information about the last "canceled" click in sessions or something similar. Isn't google suppose to do this on it's own?
This i found on the following link:
https://developers.google.com/web/updates/2018/06/a2hs-updates
You can only call prompt() on the deferred event once, if the user clicks cancel on the dialog, you'll need to wait until the beforeinstallprompt event is fired on the next page navigation. Unlike traditional permission requests, clicking cancel will not block future calls to prompt() because it call must be called within a user gesture.
window.addEventListener('beforeinstallprompt', function (e) {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
showAddToHomeScreen();
});
function showAddToHomeScreen() {
var prompt = document.querySelector(".a2hs-prompt");
prompt.style.display = "flex";
var open = document.querySelector(".a2hsBtn");
open.addEventListener("click", addToHomeScreen);
var close = document.querySelector(".a2hsBtn-close");
close.addEventListener("click", function() {
prompt.style.display = "none";
});
}
function addToHomeScreen() {
var prompt = document.querySelector(".a2hs-prompt");
// hide our user interface that shows our A2HS button
prompt.style.display = 'none';
if (deferredPrompt) {
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then(
function (choiceResult) {
if (choiceResult.outcome === 'accepted') {
show_ad2hs_success_message();
}
deferredPrompt = null;
});
}
}
You have to define your own session and add expire date. This is simple with ajax. This is how i did:
Javascript:
$(document).ready(function() {
$.ajax({
url: '/update_session_addtohomescreen',
success: function (session_expired) {
if(session_expired=='True'){
showAddToHomeScreen();
}
},
error: function () {
alert("it didn't work");
}
});
});
This is wrapping the showAddToHomeScreen(); function
View
#csrf_exempt
def update_session_addtohomescreen(request):
if request.is_ajax():
number_of_days_till_expire = 1
now_in_secs = time.time()
if not 'last_session_coockie' in request.session or now_in_secs > request.session['last_session_coockie']+60:#number_of_days_till_expire*86400:
session_expired = True
request.session['last_session_coockie'] = now_in_secs
else:
session_expired = False
return HttpResponse(session_expired)
return None
You should though include csrf token in your request and also add the url to urls.py

Avoid browser print dialog with javascript

is there any way to capture the browser's print event and cancel the appearance of the print dialogue?
Example:
User clicks in "File" -> "Print".
Before the print dialog appears, show a confirm() like 'It is possible that not all data is printed, continue anyway? <accept> <cancel>
User clicks <accept> -> Print dialog appears
User clicks <cancel> -> Print dialog doesn't appear
Right now I have this:
var beforePrint = function(ev) {
if (!messageShown) {
var result = confirm('Are you sure?');
if (!result) {
// TODO: Cancel
}
}
};
var afterPrint = function(ev) {
// TODO
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
You don't need to cancel it. Just call window.print() if they click on accept. If they use cntrl-p or file->print that's beyond your control anyway programmatically. BTW it should be noted that you actually can't do anything to prevent the user from manually trying to print. That includes intercepting their attempt to spawn the dialog and stop it from showing. The best you can do is apply a stylesheet to printing by default and then dynamically change that print stylesheet to enable the content's visibility when they use your code to print.

async html5 validation

For some reason html5 validation message is not shown when I'm using an async request.
Here you can see an example.
http://jsfiddle.net/E4mPG/10/
setTimeout(function() {
...
//this is not working
target.setCustomValidity('failed!');
...
}, 1000);
When checkbox is not checked, everything works as expected,
but when it is checked, the message is not visible.
Can someone explain what should be done?
I figured it out, turns out that the HTML5 validation messages will only popup when a form submit is in progress.
Here is the process behind my solution (when timeout is checked):
Submits the form
Sets the forceValidation flag
Sets the timeout function
When the timeout function is called, resubmit the form
If the forceValidation flag is set, show the validation message
Basically perform two submits, the first one triggered by the button, and the second triggered when the timeout function is called.
jsFiddle
var lbl = $("#lbl");
var target = $("#id")[0];
var forceValidation = false;
$("form").submit(function(){
return false;
});
$("button").click(function (){
var useTimeout = $("#chx").is(":checked");
lbl.text("processing...");
lbl.removeClass("failed");
target.setCustomValidity('');
showValidity();
if (forceValidation) {
forceValidation = false;
lbl.text("invalid!");
lbl.addClass("failed");
target.setCustomValidity('failed!');
showValidity();
} else if (useTimeout) {
setTimeout(function () {
forceValidation = true;
$("button").click();
}, 1000);
} else {
lbl.text("invalid without timeout!");
lbl.addClass("failed");
target.setCustomValidity('failed!');
showValidity();
}
});
function showValidity() {
$("#lbl2").text(target.checkValidity());
};
I am running on Chrome version 25.0.1364.172 m.

Calling Javascript function on browser close

I have a site, now what I want is when user switch to some external site, then an Ad should be popped up, and also when user close the browser window, the Ad should get popup, I have used onunload, but it shows the message on clicking every link, and also I used on beforeunload, it does almost everything, but it do the same as onunload...
Please anyone have some idea how should I achieve this?
This doesn't prevent popup appearing on page refresh, but does this job as requested:
<script>
var isLinkClicked = false;
// Either plain JS solution:
var links = document.getElementsByTagName('a');
var l=links.length;
while (l--) {
links[l].addEventListener("click", function() {
isLinkClicked = true;
}, false);
}
// Or jQuery solution:
$("a").live("click", function() {
isLinkClicked = true;
});
// And then Unload event listener:
window.addEventListener("unload", function(evt) {
if (isLinkClicked) {
isLinkClicked = false;
return false;
}
// here comes the rest of the code
}, false);
</script>

Categories

Resources