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/.
Related
I have a wordpress auction site and wanted to add a confirm dialog with jquery when someone clicks on the "bid" button. I can achieve this with the default system dialog but I want a more custom dialog box with jQuery. How can I make it click the bid button once the end user has confirmed the bid?
Here is the code example:
<button type="submit" class="bid_button button alt"><?php echo wp_kses_post( apply_filters( 'bid_text', esc_html__( 'Bid', 'auctions-for-woocommerce' ), $product ) ); ?></button>
<script>
jQuery('button').confirm({
title: 'titletext',
content: 'content text"',
type: 'red',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-primary',
keys: ['enter'],
action: function(){
console.log('Brukeren bekreftet "OK"');
}
},
No: function(){
text: "No",
jQuery.alert('Kansellert!');
console.log('the user clicked cancel');
}
}
});
</script>
it seems like this libary is not created for submitting forms via button, more like using it for <a> tags, source - https://github.com/craftpip/jquery-confirm/issues/229
I thought i will give you still a way to solve your problem.
now i am preventing the default behavior from the button when its not confirmed and trigger it again when its confirmed, but this time the button can submit the form.
Also added the id submitButton to your button for making it individual.
<button type="submit" id="submitButton" class="bid_button button alt"></button>
<script>
var confirmed = false;
$('#submitButton').on('click', function() {
if (!confirmed) {
event.preventDefault();
$.confirm({
title: 'titletext ',
content: 'content text"',
type: 'red',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-primary',
keys: ['enter'],
action: function() {
confirmed = true;
$('#submitButton').click()
console.log('Brukeren bekreftet "OK"');
}
},
No: function() {
text: "No",
jQuery.alert('Kansellert!');
console.log('the user clicked cancel');
}
}
})
} else {
confirmed = false
}
})
</script>
hope I could help you. :)
I am flashing a success message using session->flash() method in laravel.
But when user clicks back button the message comes up again. How to fix this.
My code for showing message is -
#if(Session::get('success') )
<script>
swal({
text: "{{Session::get('success')}}",
button: localMsg.ok,
}).then((isConfirm) => {
});
</script>
#elseif(Session::get('error'))
<script>
swal({
text: "{{Session::get('error')}}",
button: localMsg.ok,
}).then((isConfirm) => {
});
</script>
#endif
You should destroy session values for success and error message
#if(Session::get('success') )
<script>
swal({
text: "{{Session::get('success')}}",
button: localMsg.ok,
}).then((isConfirm) => {
});
{{ Session::forget('success'); }} //Add this line to destroy value for 'success'
</script>
#elseif(Session::get('error'))
<script>
swal({
text: "{{Session::get('error')}}",
button: localMsg.ok,
}).then((isConfirm) => {
});
{{ Session::forget('error'); }} //Add this line to destroy value for 'error'
</script>
#endif
By This way you can get back button event of the browser:
if (window.history && window.history.pushState) {
window.history.pushState('forward', null, './#forward');
$(window).on('popstate', function() {
alert('Back button was pressed.'); //here you know that the back button is pressed
//write code to hide your success message when your clicks on browser back button
});
}
The following snippet allows me to perform stuff in a callback function for the buttons that are clicked. However, how can I get a callback function, or a similar workaround such that I can perform some code when a user clicks on the 'X' button/dismisses the dialog?
bootbox.dialog({
title: "Woah this acts like an alert",
message: "Cool info for you. You MUST click Ok.",
buttons: {
sucess:{
label: "Ok",
callback: callback
}
}
});
callback(){//stuff that happens when they click Ok.}
I do not want to disable/hide the close button with
closeButton: false,
There is onEscape function for this.
bootbox.dialog({
message: 'the msg',
title: "Title",
onEscape: function() {
// you can do anything here you want when the user dismisses dialog
}
});
You can use a variable to check if the modal was hidden after a click on OK or x button / escape key
var status = false;
$('.btn').on('click', function () {
bootbox.dialog({
title: "Woah this acts like an alert",
message: "Cool info for you. You MUST click Ok.",
buttons: {
sucess: {
label: "Ok",
callback: function () {
status = true;
}
}
},
onEscape: function () {
$('.bootbox.modal').modal('hide');
}
});
});
$(document).on("hidden.bs.modal", ".bootbox.modal", function (e) {
callback();
});
function callback() {
if (!status) {
onClose();
} else {
onOK();
status = false;
}
}
function onClose() {
$('p.alert span').removeClass().addClass('text-danger').text("Dismissed");
}
function onOK() {
$('p.alert span').removeClass().addClass('text-success').text("Sucess");
}
Fiddle demo
Some people might see this as a bit of a hack-around. Although it suits me fine as all I wanted to acknowledge as a developer that someone accepted the message, which triggered the next event.
Using Bootbox.js' native confirm() method which does supply a callback action. I added an additional class as an option to the confirm button (which must be supplied on a confirm() call) with the hidden classname (E.g. Bootstap has a helper class for display:none called hidden.
This hides the confirm button, thus the Modal appears as a normal Alert box.
bootbox.confirm({
message: "Some Button Text",
buttons: {
"cancel": {
label: "<i class='fa fa-check'></i> OK - I understand",
className: "btn btn-primary"
},
//Hide the required confirm button.
"confirm": { label: "", className: "hidden" }
},
callback: function(){
//Begin Callback
alert( "Finished" );
}
});
JsFiddle Example
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();
});
I am very dissapointed because I can't get rid of this issue! I have a product view and an "Add to Cart" button. If I click on the button, the form will be submitted (productAddToCartForm.submit(this)) and following function will be called:
var myAjaxify = function(button) {
button.prop('disabled', true);
if (this.validator.validate()) {
$(this.form).request({
onComplete: function(response) {
var responseData = JSON.parse(response.responseText);
if (responseData.success === 'true') {
Dialog.confirm(
responseData.message,
{
className: 'openit',
width: 385,
height: 220,
destroyOnClose: true,
id: 'ajax-add-result',
closable: true,
zIndex: 100,
title: 'Added to Your Cart',
okLabel: 'Continue Shopping',
cancelLabel: 'Proceed to Cart',
onCancel: function() {
window.location = '/checkout/cart';
},
buttonClass: 'action-btn'
}
);
...
But it takes a few seconds till the popup shows up. And if I click on the "Add to Cart" button multiple times in the meanwhile, the popup appears more than once. If I don't close the popup fast enough I also get the error "ajax-add-result is already registered in the DOM". I tried to disable the button ($(this).prop('disabled', true);), but all my solutions break the script :(
Can anyone help me?
Every help is much appreciated.
Best, Hannes.
Unset the button :)
$( "#yourbutton").unbind( "click" );
After everything is loaded you can bind the event back.