I have this code and on socket.connect I want to be able to hide the alert that was shown in socket.disconnect.
I see there is a reference in the docs to $scope methods hide, show, and toggle but how can I use them in this example?
socket.on('disconnect', function () {
// Show login error message
$alert({
title: 'Connection lost.',
content: 'Please reload the page.',
placement: 'top-right',
type: 'danger',
show: true
});
});
socket.on('connect', function () {
// TODO: Check if connection alert is showing and if it is, hide it
});
I feel stupid today...
var alert = $alert({
title: 'Connection lost.',
content: 'Please reload the page.',
placement: 'top-right',
type: 'danger',
show: false
});
socket.on('disconnect', function () {
alert.show();
});
socket.on('connect', function () {
alert.hide();
});
Related
Sweet-alert not returning the true or false after calling this get_alert() function please suggest some suggestions how could we able to work this
function get_alert() {
$('#removeactive').on('click', function(e) {
e.preventDefault();
var message = $(this).data('confirm');
//pop up
swal({
title: "Are you sure ??",
text: message,
icon: "warning",
buttons: true,
dangerMode: true,
})
.then(function(isConfirm) {
console.log(isConfirm == true);
if (isConfirm == true) {
return true;
} else {
return false;
}
});
});
}
<button id="removeactive" data-confirm="Are you sure?" type="button">Click</button>
You should not need a function to assign an event handler. Also you have not told us when you call get_alert. Calling get_alert will NOT show the alert, only assign the handler
Here I run on load of the page
If the removeactive element is dynamic, you need to change to
$(document).on('click','#removeactive', function(e) {
or better:
$(document).on('click','.removeactive', function(e) {
so any element with that class can call the alert
You also need to remove active where you know the status of the isConfirm
Here is a working example
$(function() { // on page load
$('#removeactive').on('click', function(e) {
e.preventDefault();
var message = $(this).data('confirm');
//pop up
swal({
title: "Are you sure ??",
text: message,
icon: "warning",
buttons: true,
dangerMode: true,
})
.then(function(isConfirm) {
console.log("confirmed?", isConfirm);
if (isConfirm) console.log("deleting"); // here you delete
else console.log("cancelled"); // here you do whatever or nothing
// You cannot return anything
});
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<button id="removeactive" data-confirm="This will remove the active widget from the sprocket" type="button">Click</button>
this.platform.backButton.subscribe(()=> {
const alert = await this.alertController.create({
header: 'Confirm!',
message: 'Do you want to go back!!!',
buttons: [
{
text: 'Yes',
handler: () => {
// Previous page loaded
}
}, {
text: 'No',
handler: () => {
//Page should not go back.
//This is where i want to write code,if the user clicks
No and the back button function should be disabled.
//Only when the user presses Yes,the page will go to
previous.
}
}
]
});
})
I dont know how to handle when the user presses no,i.e.Disable the back button function or event.
Finally i solved the issue.As the event emitted from the backButton is an promise.If I dont need to go back,i just reject that promise.
this.platform.backButton.subscribe(()=> {
const alert = await this.alertController.create({
header: 'Confirm!',
message: 'Do you want to go back!!!',
buttons: [
{
text: 'Yes',
handler: () => {
// Previous page loaded
}
}, {
text: 'No',
handler: () => {
reject()
}
}
]
});
})
Try this way to prevent the back button
this.platform.backButton.subscribeWithPriority(9999, () => {
this.dismiss();
});
I've a form with submit validation.
I'dd like to add more than 1 alerts on form submit with:
var proceed = true;
$.confirm({
title: 'Confirm 1',content: 'No products added. Are you sure to proceed?',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-success',
action: function () {
}
},
cancel: {
text: "Cancel",
action: function () {
proceed = false;
return false;
}
}
}
});
... some others checks ....
if ( !proceed ) { return false;} //EXIT SCRIPT
// IF ALL CHECKS PASSED
$.confirm({
title: 'Final confirm',content: 'All checks are ok. Are you sure to insert?',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-success',
action: function () {
form.submit(); //SUBMIT THE FORM
}
},
cancel: {
text: "Cancel",
action: function () {
// CLOSE DIALOG
}
}
}
});
but on form submit I get all of 2 $.confirm opens! I'd like to pause second one until I click OK on the first one.
My jsfiddle https://jsfiddle.net/st1cqb39/2/
Make the finalConfirm function as a generic one, and call it in the action callback (of your empty check) accordingly.
Here is a DEMO: https://jsfiddle.net/st1cqb39/3/
Hope this helps!
I've got an alert controller that, when triggered, opens and then immediately closes without me doing anything.
let alert = this.alertCtrl.create({
title: 'Requires Login',
message: 'Please register or log in to add to cart.',
buttons: [
{
text: 'Cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Login',
handler: () => {
this.logOut();
}
}
]
});
alert.present();
I can't find anything wrong and I'm wondering what is causing this issue? When I run the application through my phone I get the error, but when I run it through the browser, no error.
Here's a working example from my current project
logout() {
let confirm = this.alertCtrl.create({
title: 'Confirm',
message: 'Are you sure you want to logout?',
buttons: [
{
text: 'No',
handler: () => { }
},
{
text: 'Yes',
handler: () => {
this.removeNotificationRegistrationAndLogOut(LoginPage, true);
}
}
]
});
confirm.present();
}
I am trying to redirect the page back when the user provides a wrong authentication credentials but after a jAlert pops up and exactly after the close btn of the jAlert is pressed but I am unable to do so. Please help me out with this task. Thanks in advance!!!
Here is the code:
<script>
$(document).ready(function () {
$.jAlert({
'title': 'Authentication Error',
'content': 'Invalid Username of Password"!',
'theme': 'blue',
'btns': { 'text': 'close' }
});
});
</script>
The jAlert plugin provides an onClose function that fires when the modal is dismissed. Define the behaviour you want within the function, for example:
<script>
$(document).ready(function() {
$.jAlert({
'title': 'Authentication Error',
'content': 'Invalid Username or Password!',
'theme': 'blue',
'btns': { 'text': 'close' },
'onClose': function(alertElem) {
// alert("Redirecting...");
window.location = "index.html";
}
});
});
</script>
See the jAlert documentation at http://flwebsites.biz/jAlert/.