Hello I have a code using sweetalert
swal("Good job!", "You clicked the button!", "success")
this code will pop-up a message and has a button okay, what I like to do is I want to refresh the page after I click the okay button.
Can I do that?
You can try this, it works for me.
swal({
title: "Good job",
text: "You clicked the button!",
type: "success"
},
function(){
location.reload();
}
);
The answer from Yoshioka did not work for me, I did this and it worked perfectly:
swal({title: "Good job", text: "You clicked the button!", type:
"success"}).then(function(){
location.reload();
}
);
Use the callback function...
Swal.fire({
// Swal Setting's
}).then((result) => {
// Reload the Page
location.reload();
});
For Sweet Alert 2, this will work.
swal("Good job!", "You clicked the button!", "success").then(function(){
location.reload();
});
As you can see migration guide
Sweet Alert 2 uses Promise
You can check confirm by this:
swal({
title: "Good job",
text: "You clicked the button!",
icon: "success",
buttons: [
'NO',
'YES'
],
}).then(function(isConfirm) {
if (isConfirm) {
location.reload();
} else {
//if no clicked => do something else
}
});
I use sweet alert 2 and this works for me
swal("Good job!", "You clicked the button!","success").then( () => {
location.href = 'somepage.html'
})
‘’’
The answers making use of location.reload() is going to trigger your form to attempt to resubmit over and over again, thats why you should use location.href instead.
In Sweet Alert 2, there is callback function where you can implement your logic :
Swal.fire({
title: 'Great job',
text: "You clicked the button!",
type: 'success',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes'
}).then((result) => {
if(result){
// Do Stuff here for success
location.reload();
}else{
// something other stuff
}
})
You can find the reference on SweetAlert2.
Swal.fire(
{
title: "Good job",
text: "You clicked the button!",
type: "success",
showDenyButton: true, // In case you want two scenarios
denyButtonText: 'ABC',
showCancelButton: true, // In case you want two scenarios
cancelButtonText:'XYZ'
}
).then(function (result) {
if (result.isConfirmed) {
//You can add code here if user pressed ok button
} else if (result.isDenied) {
//You can add code here if user pressed deny button
} else if(result.isDismissed) {
//You can add code here if user pressed cancel button
}
)
this worked for me.
Swal.fire('Deleted !!', data.message, 'success').then(() => {
location.reload();
});
swal({
title: "Process Completed",
text: "Data Recorded successfully",
buttons: true
}).then(function(){
location.reload();
});
i solved it with this :
swal({title: "Updated!", text: "yourText", type: "success"},function() {
location.reload();
}) // swal end
Another way :
swal("Updated!","yourText","success",function() {
location.reload();
}) // swal end
Related
I'm trying to create a page named 'list of users' where I have a sweetalert with input text form and user enters a name in sweetalert and then using a POST method like a form to redirect to mywebsite.com/search and show results with that name.
Sweetalert is putted on homepage.
<script>
function searchp()
{
Swal({
title: 'Search',
input: 'text',
inputPlaceholder: 'enter_name',
inputAttributes: {
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonText: 'Search',
confirmButtonColor: '#ffffff',
cancelButtonColor: '#d33'
}).then(result => {
if (result.value) {
$.ajax({
type: "POST",
url: '<?php echo base_url("search"); ?>',
data: {
//here 1
},
success: function(data)
{
//here 2
}
});
} else {
Swal(
'Ops!',
'You canceled.',
'error'
)
}
})
}
</script>
As you saw I don't know how to apply POST method on ''. I'm using Codeigniter 3 as php framework.
is equal to mywebsite.com/search.
I want after a user entered name in input form and pressed submit to apply post method on search page and show results there. The backend for search page is already made and is working with a normal tag.
Hey if you want to redirect the page then you don't need ajax request at all. First get the input value and then use it as a parameter in your wanted URL. I've created a demo, see if this works for you. ↓↓
function searchp() {
Swal.fire({
title: 'Search',
input: 'text',
inputPlaceholder: 'Enter Name',
inputAttributes: {
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonText: 'Search',
//confirmButtonColor: '#eee',
cancelButtonColor: '#d33',
preConfirm: (data) => {
if (data != "") {
// window.location = '<?php echo base_url('search')?>' + data;
// or(whichever works for you)
// window.location = '<?php echo base_url('search')?>' + '/' + data;
console.log(`Your name: ${data}`)
} else {
Swal.showValidationMessage(`Please enter name`)
}
},
})
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#9.10.12/dist/sweetalert2.all.min.js"></script>
<button onclick="searchp()" >Fire Sweet Alert</button>
This question already has an answer here:
Display Successful Message Notifications at Sweetalert
(1 answer)
Closed 4 years ago.
I want to display the message "successfully deleting data" with Sweet alert, and the beginning of the script:
Delete
javascript :
jQuery(document).ready(function($) {
$('.delete-link').on('click', function() {
var getLink = $(this).attr('href');
swal({
title: 'Alert',
text: 'Delete?',
html: true,
confirmButtonColor: '#d9534f',
showCancelButton: true,
}, function() {
window.location.href = getLink
});
return false;
});
});
The data has been successfully deleted, but the way i want to display the data message has been deleted like this, where is it put in?
swal("Success!", "Successfully Deleted Data!", "success");
I don't know much about Sweetalert but as far as I guess the 2nd parameter of the swal function is confirm action!!
So you can delete this using jquery ajax after confirming true:
jQuery(document).ready(function($) {
$('.delete-link').on('click', function() {
var getLink = $(this).attr('href');
swal({
title: 'Alert',
text: 'Delete?',
html: true,
confirmButtonColor: '#d9534f',
showCancelButton: true,
}, function() {
// window.location.href = getLink // no redirection or page reload
$.ajax({
url: getLink, // link where your href is
success: function(result) {
swal('Successful!!', 'Successfully deleted!!'); //sweet alert
}
});
});
return false;
});
});
I Have Used The Sweet Alert For Delete using AJAX, And I set Page redirection after Deleteing. Whenever I Click delete, It asks Confirm or not buttons,
If i click Yes-Confirm it will delete,and the Page Was Redirected. I Want
like After deleteing success message "OK Successfully Deleted" That time only page Was Refreshed,
function delete_confirm(id) {
swal({
title: "Are you sure?",
text: "You will not be able to recover this Product Attribute!",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: "No, cancel please!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
$.ajax({
url: "cart-delete.php",
type: "POST",
data: {
id: id,
},
success: function(data) {
console.log(data);
swal("Done!", "It was succesfully deleted!", "success");
$('[remove_attr_' + id + ']').parents('.demo-card-wide').remove();
window.location.href = 'add-to-cart.php';
}
});
} else {
swal("Cancelled", "Your Product Attribute! is safe :)", "error");
}
});
};
Remove this line On Success
window.location.href = 'add-to-cart.php';
Write in some other action
ex. On sweet alert close action
I have made a delete modal with Sweet Alert in Laravel and it is deleting user I choose. I would however after deletion like to redirect back to users list as my destroy() method says.
<script>
$('a#delete_user').on('click', function () {
var url = $(this).attr("data-href");
swal({
title: "Delete user?",
text: "Submit to delete",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Delete!"
},
function () {
setTimeout(function () {
$.ajax({
type: "POST",
url: url,
data: {
_method: 'DELETE',
_token: csrf_token
},
success: function (data) {
if (data)
swal("Deleted!", "User has been deleted", "success");
else
swal("cancelled", "User has not been deleted", "error");
}
}), 2000
});
});
})
</script>
Here is the controller:
public function destroy($id)
{
User::destroy($id);
return redirect('users')->with('status', 'User Deleted!');
}
I would like to redirect to users list with message, and I have trouble doing so
In your main template file or in view file, you have to check if there is status data in session, if yes so you call sweet alert. Example code:
#if (session('status'))
<script>
$( document ).ready(
swal("{{ session('status') }}")
});
</script>
#endif
Edit js file like this:
success: function (data) {
if (data == 'success')
swal("Deleted!", "User has been deleted", "success");
window.location('Your URL');
else
swal("cancelled", "User has not been deleted", "error");
}
and the controller:
if(User::destroy($id)){
return 'success';
}else{
return 'fail';
}
Hello guys just want to ask about how can i process a form submission using the jquery dialog button. In my code I have a button that when you click. It will pop up a form in a dialog box. Below is the jquery buttons for OK and CANCEL. My problem is I can't submit my form the only option that I have is to create a submit button inside my form. But i want to use the jquery button instead. Im using CodeIgniter I hope you can help me.
My view (showAllSuppliers.php)
/* FOR ADD PAGE */
$(".hero-unit input[name=add_supplier]").on('click',function(){
$('#popup').load("<?php echo site_url("supplier_controller/addNewSupplier/"); ?>").dialog({
title: "Add New Supplier",
autoOpen: true,
width: 800,
modal:true,
position: "center",
buttons: {
OK: function(){
$("#addSupplier").submit(); //HOW CAN I SUBMIT MY FORM USING THIS?
},
CANCEL: function() {
$(this).dialog( "close" );
}
}
});
});
my form (addNewSupplier.php)
<?php
$attr = array('id'=>'addSupplier');
echo form_open('supplier_controller/insertNewSupplier');
..
..
..
... MY TEXTBOX FIELDS HERE
..
..
//echo "<input type='submit' value='ADD' />"; ANOTHER OPTION FOR SUBMISSION
echo form_close();
?>
my controller function(supplier_controller.php)
public function insertNewSupplier(){
$this->supplier_model->insertNewSupplierDetail();
redirect('supplier_controller/index','refresh');
}
Try by just changing this line and your usual js:
$attr = array('id'=>'addSupplier');
echo form_open('supplier_controller/insertNewSupplier', $attr);
If still does not submits the form then try to submit by ajax call.
$(".hero-unit input[name=add_supplier]").on('click',function(){
$('#popup').load("<?php echo site_url("supplier_controller/addNewSupplier/"); ?>").dialog({
title: "Add New Supplier",
autoOpen: true,
width: 800,
modal:true,
position: "center",
buttons: {
OK: function(){
$.ajax({
url : '<?=base_url()?>supplier_controller/insertNewSupplier',
type : 'POST',
data : $("#addSupplier").serializeArray(),
success : function(resp){
alert("Submitted !!!");
$(this).dialog( "close" );
},
error : function(resp){
//alert(JSON.stringify(resp));
}
});
},
CANCEL: function() {
$(this).dialog( "close" );
}
}
});
});
You need ajax call
$('#submit').click(function (){
var first_name = $('#first_name').val();
$.ajax({
url : '/supplier_controller/insertNewSupplier,
type : 'post',
data : first_name,
success : function(){
//do something;
console.log(first_name);
}
})
return false;
});
That's gonna work if you ad id to submit button and to your input. But you can also call them via html tags. It's just an idea or example for you.
If you want to use classic form submission instead of ajax call, write these code lines for the buttons parameter:
buttons: {
OK: function(){
$(this).dialog().find('form').submit();
},
CANCEL: function() {
$(this).dialog( "close" );
}
}