Hi i got some problem with my sweet alert where i have redirected the user when click okay it be sent to the new page but if cancel they remain at the same page and close the alert boxhow can i do it ?
Here my code for the sweet alert
Swal.fire({
icon: 'success',
title: 'Insert Successfully!',
html: 'The information have inserted successfully!<br>By pressing <b>okay</b> this page will go to <b>manage user</b> page',
showCancelButton: true,
cancelButtonText: "Cancel",
confirmButtonText: 'Okay',
cancelButtonColor: '#d33',
confirmButtonColor: 'btn-success',
heightAuto: false,
})
// footer: '<label class="fixissue">How to fix this issue?</label><br>Try to change the username input and press add button again'
.then(Okay => {
window.location.href = 'manageUsers_api.html';
})
Hi i have fix it by creating a if and else if with a value confirm
.then(function(inputvalue){
if(inputvalue.isConfirmed){
window.location.href = 'manageUsers_api.html';
} else if(inputvalue.isCancel){
Swal.fire('')
}
})
Related
When the user clicks the confirm button in SweetAlert2 I'd like to redirect the user to another page and keep the modal open to show that the redirect is in progress.
I've managed to achieve using by re-initialising the modal after it closes and toggling the loading state. Is there a nicer built-in way? It was possible in the old v1.
var redirect = function () {
return Swal.fire({
type: 'warning',
title: 'Are you sure?',
confirmButtonText: 'Yes',
showLoaderOnConfirm: true,
allowOutsideClick: false,
preConfirm: function () {
window.location.href = 'https://dapurlindawaty.com';
}
});
};
redirect().then(function (result) {
if (result.value) {
redirect();
Swal.showLoading();
}
});
https://jsfiddle.net/bytestream/vfzgx10L/2/
I have this Kendo Confirm function here. What I want when click on OK it run this grid.dataSource.remove(data) grid.dataSource.sync(). Can anyone help me how to achieve this? Thanks in advance.
function(e) {
return $("<div></div>").kendoConfirm({
title: "My Title",
content: "Are you sure to delete this record?",
messages:{
okText: "OK",
cancel: "Cancel"
}
}).data("kendoConfirm").open().result;
// if click OK run this
// grid.dataSource.remove(data)
// grid.dataSource.sync()
}
Seem Kendo Confirm had limited resources here. So I need to change to Kendo Dialog to for this method.
function(e) {
return $("<div></div>").kendoDialog({
closable: false, // hide X
title: "My Title",
content: "Are you sure to delete this record?",
actions: [{
text: "OK",
action: function(e){
grid.dataSource.remove(data)
grid.dataSource.sync()
return true;
},
primary: true
},{
text: "Cancel"
}]
}).data("kendoDialog").open().center();
}
You can use the shortcut function kendo.confirm which returns a promise and execute your logic when it's resolved:
kendo.confirm("Are you sure to delete this record?").then(function () {
grid.dataSource.remove(data)
grid.dataSource.sync()
});
Here's a demo and overview: https://demos.telerik.com/kendo-ui/dialog/predefined-dialogs
I can't get Subscribe Form event tracking to submit button press on a site.
The relevant code is :-
Button Code
type="submit" and value="Subscribe"
<script>
document.addEventListener( 'submit', function( event ) {ga('Subscribe', 'event', 'Subscription Form', 'submit');}, false );
</script>
Your code's wrong, the Subscribe method should be replaced with send to send events:
What you have:
ga('Subscribe', 'event', 'Subscription Form', 'submit');
What it should be:
ga('send', 'event', 'Subscription Form', 'submit');
And while you're at it, you might want to leverage the label field to provide more info such as the form id:
var form_id = ...; // some custom code to fetch form id from submit event
ga('send', 'event', 'Subscription Form', 'submit', form_id);
See doc for more info: https://developers.google.com/analytics/devguides/collection/analyticsjs/events
You need to change your code to:
gtag('event', 'submit', {
'event_category' : 'Subscription Form',
});
I use a SweetAlert2 Popup with an AJAX request. Once the user clicks on submit I execute the request.
In the PHP file I then make some validation on the submitted data and depending on the result I want to give a feedback in SweetAlert2 for the user as information.
Here is my SweetAlert2 Code:
$('#sweet-ajax').click(function () {
swal({
title: "Sure?",
text: "Clicking on validated sends the data to our tool.",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
confirmButtonText: "Yes, submit!",
cancelButtonText: "Cancel",
showLoaderOnConfirm: true,
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger m-l-10',
preConfirm: function(givenData){
return new Promise(function(resolve, reject) {
setTimeout(function(){
//if statment only for test purposes filled with 2==1
if(2 == 1){
swal("Oops", "Sorry something strange happend!", "error")
}else{
resolve()
}
}, 2000)
})
},
allowOutsideClick: false
}).then(function(givenData){
$.ajax({
type: "post",
url: "/assets/php/checkTool.php",
data: {registration: "success", amount: ammountInput, email: "test#example.com"},
})
swal({
//only if the response from the AJAX is correct - but how?
type: 'success',
title: 'Correct!',
html: 'All safe! Here is the answer from the tool: ' //need to get the return value of the AJAX request and append it here
})
}, function(dismiss) {
if (dismiss === 'cancel') {
swal(
'Cancelled',
'The action have been cancelled by the user :-)',
'error'
)
}
})
});
And the checkTool.php file:
<?php
$registration = $_POST['registration'];
$ammountInput= $_POST['ammount'];
$email= $_POST['email'];
//only some demo things here. Implement it after the SweetAlert2 stuff works properly
if ($registration == "success"){
return response(json_encode(array("abc"=>'Success')));
}else{
return response(json_encode(array("abc"=>'Error')));
}
?>
How can I now determinate what is the response from the AJAX request in the Javascript Code of SweetAlert2?
Is it possible to handle the AJAX response in SweetAlert2?
Wrap your sweet alert inside the ajax .done(function(response){}) function
}).then(function(givenData){
$.ajax({
type: "post",
url: "/assets/php/checkTool.php",
data: {registration: "success", amount: ammountInput, email: "test#example.com"},
}).done(function(response) {
if(response['abc'] === 'Success') {
swal({
type: 'success',
title: 'Correct!',
html: 'All safe! Here is the answer from the tool: ' + response['answer']
})
}
});
})
}, function(dismiss) {
In my experience what made it work, keeping in mind the use of showLoaderOnConfirm: true is doing the ajax call inside the preconfirm, and getting from the json response the elements I need as follows:
swal({
title: "Sure?",
text: "Clicking on validated sends the data to our tool.",
type: "warning"
showLoaderOnConfirm: true,
preConfirm: function () {
return new Promise(function (resolve) {
$.ajax({
type: "POST",
contentType: "application/json; charset=UTF-8",
data: JSON.stringify(objectToPost),
url: "/assets/php/checkTool.php",
dataType: 'json', // in ,my case the absence of this was the cause of failure
})
// in case of successfully understood ajax response
.done(function (myAjaxJsonResponse) {
console.log(myAjaxJsonResponse);
swal(
"My title!",
"My response element is: " + myAjaxJsonResponse.selectedElement,
"success"
);
})
.fail(function (erordata) {
console.log(erordata);
swal('cancelled!', 'The action have been cancelled by the user :-)', 'error');
})
})
},
})
.catch(swal.noop)
The swal being invoked when clicking a button, on my scenario.I hope this helps someone, as it took me quite some time to make it work.
The modal isn't triggered by a link on the page which the user has clicked. The modal is triggered when the user arrives on the url.
Think of something like a disclaimer that pops up as soon as the user arrives on the url.
You can use the Drupal.dialog function for this.
For example:
var $myDialog = $('<div>My dialog text</div>').appendTo('body');
Drupal.dialog($myDialog, {
title: 'A title',
buttons: [{
text: 'Close',
click: function() {
$(this).dialog('close');
}
}]
}).showModal();
See node.preview.js for another example.
Update: To use this with an AJAX request/response:
Drupal.ajax({
url: 'some/path',
success: function(response) {
var $myDialog = $('<div>' + response.data + '</div>').appendTo('body');
Drupal.dialog($myDialog, {title: 'Some title'}).showModal();
}
}).execute();