Okay so I want to get the jQuery variable value in my alert box. I tried something but this is not giving me the result as expected.
$(document).ready(function() {
$("#submit").click(function() {
var dataString = {
amount: $("#amount").val()
};
var getamt = dataString.amount;
$.confirm({
title: 'Confirm!',
content: 'Are you sure you want to transfer $"'.getamt.'" to wallet?', // not getting the result
buttons: {
confirm: function () {
$.ajax({
type: "POST",
dataType : "json",
url: "add-funds-process.php",
data: dataString,
cache: true,
beforeSend: function(){
$("#submit").hide();
$("#loading-rent").show();
$(".message").hide();
},
success: function(json){
setTimeout(function(){
$(".message").html(json.status).fadeIn();
$('#wallet').html('$' + json.wallet);
$('#balance').html('$' + json.balance);
$("#submit").show();
$("#loading-rent").hide();
},1000);
}
});
},
cancel: function () {
$.alert('<span style="font-size: 23px">Upgrade Cancelled!</span>');
}
}
});
return false;
});
});
Can any of you expert guys help me with this? I will be thankful.
You are using php operater.with javascript. in javascript + is use for concating the variable with string.
Run this example it may help you....
$("#submit").click(function() {
$.confirm({
title: 'Confirm!',
content: 'Are you sure you want to transfer "' + $("#amount").val() + '" to wallet?', // not getting the result
buttons: {
confirm: function () {
$.alert('confirm');
},
cancel: function () {
$.alert('<span style="font-size: 23px">Upgrade Cancelled!</span>');
}
}
});
return false;
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.0/jquery-confirm.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.0/jquery-confirm.min.js"></script>
<button id="submit">Hello</button>
<input type="text" id="amount" placeholder="Enter the amount">
Related
I'm working in PHP LARAVEL , what i want is a toastr to delete an item from database.
So when the button is clicked to delete, the toastr should ask "Are you sure to delete?" in ajax.
If selected "OK" the data should be deleted, if selected "Cancel" the data should not be deleted.
How to accomplish this?
Below is my ajax code:
//to unfollow feed
$('#following').click(function (e) {
e.preventDefault();
var formData = $("#unfollowFeed").serialize();
$('.error-msg').html('');
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: baseUrl + 'unfollow',
type: 'POST',
data: formData,
success: function (data) {
var id=$('#feed_id').val();
$("#feedId li[feed-id=" + id + "]").remove(); //to remove <li> of removed feed from sidebar.
toastr.error('The feed was removed.');
$('#follow').show();
$('#following').hide();
}
});
});
This is my view part:
<a href style="{{ $status == 0 ? 'display:none;' : '' }}" class=" btn btn-sm btn-primary following" id="following" >{{ __('Following') }}</a>
Can anyone help me with this?
You can use Sweetalert of bootstrap
$('#following').click(function (e) {
e.preventDefault();
var formData = $("#unfollowFeed").serialize();
$('.error-msg').html('');
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function() {
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: baseUrl + 'unfollow',
type: 'POST',
data: formData,
success: function (data) {
var id=$('#feed_id').val();
$("#feedId li[feed-id=" + id + "]").remove(); //to remove <li> of removed feed from sidebar.
toastr.error('The feed was removed.');
$('#follow').show();
$('#following').hide();
}
});
});
});
<!DOCTYPE html>
<html>
<body>
<p>Example: Click the button to display a confirm box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt;
var r = confirm("Press a button!");
if (r == true) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
You can use the inbuilt confirm box:
$('#following').click(function (e) {
var response = confirm("Are you sure to delete?");
if (response == true) {
e.preventDefault();
var formData = $("#unfollowFeed").serialize();
$('.error-msg').html('');
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: baseUrl + 'unfollow',
type: 'POST',
data: formData,
success: function (data) {
var id=$('#feed_id').val();
$("#feedId li[feed-id=" + id + "]").remove(); //to remove <li> of removed feed from sidebar.
toastr.error('The feed was removed.');
$('#follow').show();
$('#following').hide();
}
});
} else {
/* do anything on Pressed cancel*/
}
});
You can use sweetalert for this purpose.
Sweet alert docs
Add this cdn <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
then
<script>
$('#following').click(function (e) {
e.preventDefault();
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this imaginary
file!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
ajaxcall(); //calling ajax function
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
} else {
swal("Your imaginary file is safe!");
}
});
});
function ajaxcall()
{
$('.error-msg').html('');
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: baseUrl + 'unfollow',
type: 'POST',
data: formData,
success: function (data) {
var id=$('#feed_id').val();
$("#feedId li[feed-id=" + id + "]").remove(); //to remove <li> of removed feed from sidebar.
toastr.error('The feed was removed.');
$('#follow').show();
$('#following').hide();
}
});
}
</script>
Here is my code:
$(function () {
$(document).on('click', '.fa-times', function(e){
e.stopPropagation();
var result = ConfirmDialog('Are you sure?');
if (result) {return false}
var row = $(this).closest('tr');
row.css('opacity','0.3');
var word = $(this).closest('td').siblings('.word').text();
$.ajax({
url : '../../te_addStopWord',
type : 'GET',
data: {word : word},
dataType : 'JSON',
success : function () {
row.remove();
}, // success
error : function ($a,$b,$c) {
alert($b);
row.css('opacity','1');
}
}); // ajax
})
function ConfirmDialog(message) {
$('<div></div>').appendTo('body')
.html('<div><h6>'+message+'?</h6></div>')
.dialog({
modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
$(this).remove();
return true;
},
No: function () {
$(this).remove();
return false;
}
},
close: function (event, ui) {
$(this).remove();
}
});
};
})
But my code run that ajax request without waiting for the response of ConfirmDialog(message) function. How can I force it to wait?
You have 2 functions which get triggered depending on which confirm button is selected. Handle your ajax code from there.
I liked how Abhijit's answer abstracted out the code, but I think he missed something.
$(function() {
$(document).on('click', '.fa-times', function(e) {
e.stopPropagation();
function getConfirmHandler(element){
return function handleConfirm(result) {
if (result) {
return false
}
var row = element.closest('tr');
row.css('opacity', '0.3');
var word = element.closest('td').siblings('.word').text();
$.ajax({
url: '../../te_addStopWord',
type: 'GET',
data: {
word: word
},
dataType: 'JSON',
success: function() {
row.remove();
}, // success
error: function($a, $b, $c) {
alert($b);
row.css('opacity', '1');
}
}); // ajax
}
}
ConfirmDialog('Are you sure?', getConfirmHandler($(this)))
});
function ConfirmDialog(message, callback) {
$('<div></div>').appendTo('body')
.html('<div><h6>' + message + '?</h6></div>')
.dialog({
modal: true,
title: 'Delete message',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
buttons: {
Yes: function() {
$(this).remove();
callback(true);
},
No: function() {
$(this).remove();
callback(false);
}
},
close: function(event, ui) {
$(this).remove();
}
});
};
})
Try move ajax into your ConfirmDialog:yesfunction. Or Try to use promise.
buttons: {
Yes: function () {
var row = $(this).closest('tr');
row.css('opacity','0.3');
var word = $(this).closest('td').siblings('.word').text();
$.ajax({
url : '../../te_addStopWord',
type : 'GET',
data: {word : word},
dataType : 'JSON',
success : function () {
row.remove();
}, // success
error : function ($a,$b,$c) {
alert($b);
row.css('opacity','1');
}
}); // ajax
$(this).remove();
return true;
},
No: function () {
$(this).remove();
return false;
}
},
I have a bootbox.dialog with a textarea. I want to save the value of the textarea with rowbrakes in the same place as it was written to the database. So I need to create a string with /n or <br>.
Right now is my value undefined.
Here is my code:
$('#btnComment').click(function () {
var comment = $("#lblComment1").html();
popup.dialog({
title: translator.get('EditComment'),
message: "<textarea cols='60' rows='6' name='editComment'>" + comment + "</textarea>",
buttons: {
confirm: {
label: translator.get('EditComment'),
className: "btn-success",
callback: function (result) {
if (result === null) {
} else {
$("#editComment").val(result);
$("#lblComment1").html(result);
var ajaxData = {
Type: "Comment",
OrderId: $("#lblOrder").html(),
newValue: $("#editComment").val(),
MiddocID: $("#hidMiddocID").val()
}
$.ajax({
type: 'post',
url: configuration.baseUrl + '/api/OrdersPostback', //
dataType: "json",
data: JSON.stringify(ajaxData),
contentType: "application/json; charset=utf-8"
}).then(function (bResult) {
if (bResult) {
$("#editComment").val(result);
$("#lblComment1").html(result);
}
});
//$("#hidBtnComment").click();
}
}
},
cancel: {
label: translator.get('Cancel'),
className: "btn-default"
}
},
})
});
Any suggestions of what I can do?
Change your <textarea> into this:
message: "<textarea id='editComment' cols='60' rows='6' name='editComment'>" + comment + "</textarea>",
Note that I've added the id="editComment" which you didn't do in the first place. Now that element will be fetchable by $('#editComment') and you can use .val() and other jQuery methods/plugins.
var dialog = bootbox.prompt({
title: "This is a prompt with a textarea!",
inputType: 'textarea',
callback: function (result) {
if (result ) {
console.log (dialog.find('textarea.bootbox-input-textarea').val());
}
}
});
you can get the value by textarea class "bootbox-input-textarea"
http://bootboxjs.com/documentation.html#prompt-option-input-type
I have two different jquery plugins loaded, one is UI related which allows me to display message popups and the other is the ajax fileDownload plugin. They both work fine. However, when I seem to run one function, it then starts conflicting with the other function.
I have a function called Export which initiates the fileDownload ajax request when a button is clicked. But then after the fileDownload is over, if I click on the button that launches the ExitAlert function, I end up getting the fileDownload re-initialising with the exit message. Below are the two functions.
Any idea what is going wrong?
Thanks
function Export() {
$("#Form").submit(function (e) {
e.preventDefault();
$.fileDownload('export.php?'+ Math.random(), {
httpMethod: 'POST',
dataType: 'text',
contentType: 'application/x-www-form-urlencoded',
data: $('#Form').serialize(),
successCallback: function (url) {
$("#ExportButton").prop("disabled", true);
$(pleaseWait).remove();
},
failCallback: function (responseHtml, url) {
$(pleaseWait).remove();
}
});
});
}
function ExitAlert() {
$("#Form").submit(function (e) {
e.preventDefault();
$.msgBox({
title: "Are You Sure?",
content: "<font size=2><b>Exit without saving? </b><br><br>All changes will be lost!</font>",
opacity:0.8,
type: "confirm",
buttons: [{ value: "Yes" }, { value: "No" }],
success: function (result) {
if (result == "Yes") {
document.Form.submit();
}
}
});
});
}
I seemed to have got it to work by changing the e.preventDefault and the functions now look like this (seems to work now):
function Export() {
$("form").submit(function (e) {
e.preventDefault();
});
$.fileDownload('export.php?'+ Math.random(), {
httpMethod: 'POST',
dataType: 'text',
contentType: 'application/x-www-form-urlencoded',
data: $('#Form').serialize(),
successCallback: function (url) {
$("#ExportButton").prop("disabled", true);
$(pleaseWait).remove();
},
failCallback: function (responseHtml, url) {
$(pleaseWait).remove();
}
});
}
function ExitAlert() {
$("form").submit(function (e) {
e.preventDefault();
});
$.msgBox({
title: "Are You Sure?",
content: "<font size=2><b>Exit without saving? </b><br><br>All changes will be lost!</font>",
opacity:0.8,
type: "confirm",
buttons: [{ value: "Yes" }, { value: "No" }],
success: function (result) {
if (result == "Yes") {
document.Form.submit();
}
}
});
}
Okay, what I have here is a Ajax delete record. I've tried to add jquery dialog-confirm instead of using javascript confirm. The delete function works but the problem is the animation of deleting row was not working.
Here's what I have right now. http://jsfiddle.net/altaire/YJC44/
Any help will appreciate. Thanks!
Php
while($row = $result->fetch_assoc()){
echo'<tr class="records">';
echo'<td>'.$i++.'</td>
<td align="center"><img src="images/del.png" border="0" width="10" height="10" title="Delete"></td>
<tr>;
Jquery/Ajax
$(".delbuttons").click(function () {
//e.preventDefault();
var element = $(this);
var del_id = element.attr("name");
var info = 'prdelete=' + del_id;
$("#dialog").dialog({
buttons: {
"Confirm": function () {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".records").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow", function () {
setTimeout(function () {
window.location.reload();
}, 1000);
});
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
You have to add a js as "//code.jquery.com/ui/1.11.0/jquery-ui.js". see below demo.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$( "#effect" ).animate({backgroundColor: "#aa0000",color: "#fff",width: 500},5000);
});
</script>
</head>
<body>
<div id="effect"style="border:1px solid red;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
Try this
$('a[name="'+del_id+'"]').parents(".records")...
instead of $(this).parents(".records")...
You are trying to animate the $("#dialog") if you use $(this).
DEMO : http://jsfiddle.net/yeyene/YJC44/1/
$(".delbuttons").click(function () {
//e.preventDefault();
var element = $(this);
var del_id = element.attr("name");
//alert(del_id);
var info = 'prdelete=' + del_id;
$("#dialog").dialog({
buttons: {
"Confirm": function () {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {
// $(this).parents(".records")
$('a[name="'+del_id+'"]').parents(".records")
.css({'background': '#fbc7c7'})
.animate({
opacity: 0
}, 1000, function () {
setTimeout(function () {
window.location.reload();
}, 1000);
});
$(this).dialog("close");
}
});
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});