We Keep Coding

Use dangerMode and input in same time - sweetalert

I using Sweet Alert, so before perform a dangerous action I popup the dialog box. Example.
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) {
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
} else {
swal("Your imaginary file is safe!");
}
});
But user can enter any remarks if they want, is optional and not required. So it will become like this
So I modified the code like this
function RequestUpload(value) {
swal({
title: "Are you sure?",
text: "Are you sure want to request to upload?",
icon: "warning",
buttons: true,
dangerMode: true,
content: {
element: "input",
attributes: {
placeholder: "Any remarks?",
type: "text",
},
},
})
.then((willDelete,input) => {
if (willDelete) {
swal(`You typed: ${input}`);
//Call ajax here
}
else {
swal(`Is not delete`);
}
});
}
But I can't get the value from the input, it keep show undefined.
Any idea how to fix this?

The input value is provided as the first argument. When you click cancel, click outside of the popup or press ESC, you'll get null for the value which will close the alert (ie: trigger your else). Otherwise, if you click "Ok" it will hold your input value:
.then((input) => {
if (input !== null) {
swal(`You typed: ${input}`);
//Call ajax here
} else {
swal(`Is not delete`);
}
});
function RequestUpload(value) {
swal({
title: "Are you sure?",
text: "Are you sure want to request to upload?",
icon: "warning",
buttons: true,
dangerMode: true,
content: {
element: "input",
attributes: {
placeholder: "Any remarks?",
type: "text",
},
},
})
.then((input) => {
if (input !== null) {
swal(`You typed: ${input}`);
//Call ajax here
} else {
swal(`Is not delete`);
}
});
}
RequestUpload();
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Change default bootbox confirm modal buttons

I have following bootbox confirm modal:
bootbox.confirm(
"some inputs that I append to modal",
function (result) {
if (result) {
code...
}
});
How can I change default buttons to the following code?

Try to check out the documentation of bootbox.js
They even include an example of modifying the default buttons in a confirm dialog:
bootbox.confirm({
message: "This is a confirm with custom button text and color! Do you like it?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
console.log('This was logged in the callback: ' + result);
}
});

Sweet Alert is not taking two input area?

swal({
title: "Log In to Continue",
html: true,
text: "Username: <input type='text'><br>Password: <input type='password'>",
type:"input"
});

swal({
title: 'Multiple inputs',
html:
'<input id="swal-input1" class="swal2-input" autofocus>' +
'<input id="swal-input2" class="swal2-input">',
preConfirm: function() {
return new Promise(function(resolve) {
if (result) {
resolve([
$('#swal-input1').val(),
$('#swal-input2').val()
]);
}
});
}
}).then(function(result) {
swal(JSON.stringify(result));
})

$(document).ready(function() {
swal({
title: "Error!",
text: "Here's my error message!",
type: "error",
confirmButtonText: "Cool"
});
});

type:"input" makes .sweet-alert input to display block and to enable your own inputs add Id/class name to the inputs and make them "display:block !important" using css.
Example code snippet
$("#btnShowAlert").click(function() {
sweetAlert({
title: "Log In to Continue",
text: "Username: <input id='userName' type='text'><br>Password: <input id='password' type='password'>",
html: true
});
});
.sweet-alert #userName,
.sweet-alert #password {
display: block !important;
}
<link href="http://tristanedwards.me/u/SweetAlert/lib/sweet-alert.css" rel="stylesheet"/>
<script src="http://tristanedwards.me/u/SweetAlert/lib/sweet-alert.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="btnShowAlert">
Show Sweet Alert
</button>

As Per your comment , I think You forgot to include jquery.js in your code try to include it in script and than try this code
<style>fieldset{
display:none;
}
<style>
$(document).ready(function() {
swal({
title: "Log In to Continue",
html: true,
text: "Username: <input type='text'><br>Password: <input type='password'>",
type:"input"
});
});

I'm facing the same work around in R, part of the solution in a work around is doing this:
sweetalert(title : "test message",
text : "Username: <input type='text'><br>Password:",
html : TRUE,
type : "input",
confirmButtonColor : '#DD6B55',
confirmButtonText : 'Yes, merge the files!',
closeOnConfirm : FALSE)
I suppose. That would give you only 2 instead of 3 input fields

Autofocus a dxtextbox at page load And Showing a dxTooltip as validation message

I am facing some issue related to auto-focus for a particular text box I tried several things but none of them are working.
And also I want to show a dxtooltip for a checkbox containing message if validation fails,Since the default dxCheckBox is not showing any validation
message,and i don't want to show a summery for validation.
<div data-options="dxView : { name: 'home', title: 'Home' } " >
<div class="home-view dx-content-background" data-options="dxContent : { targetPlaceholder: 'content' } " >
<div class="dx-field">
<div class="dx-field-label">Password:</div>
<div class="dx-field-value"><div id="password"></div></div>
</div>
<div class="dx-field">
<div class="dx-field-label">Confirm Password:</div>
<div class="dx-field-value"><div id="repassword"></div></div>
</div>
<div class="dx-field">
<div class="account-header" id="cb_accept"></div>
</div>
<div class="btn-finish" data-bind="dxButton: {text: 'Finish', onClick: validateAndSubmit}"></div>
</div>
sampleproject.home = function (params, viewInfo) {
var openTabsAsRoot = viewInfo.layoutController.name === "split",
isReady = $.Deferred();
function validateAndSubmit(params) {
var result = params.validationGroup.validate();
if (result.isValid) {
handlefinish();
}
}
function handleViewShown() {
loadOptionData();
}
var comparisonTarget = function () {
var txtPassword = $("#password").dxTextBox('instance');
if (txtPassword.option('value')) {
return txtPassword.option('value');
}
}
function loadOptionData() {
//$('#password').focus();
//$("#password:text:visible:first").focus();
//window.onload = function () {
// $("#password").focus();
//};
//$('#password :input').focus();
//window.onload = function () {
// document.getElementById("password").focus();
//};
$("#password").focus();
$("#password").dxTextBox({
placeholder: 'Required',
}).dxValidator({
validationRules: [{
type: "required",
}]
});
$("#repassword").dxTextBox({
placeholder: 'Required',
}).dxValidator({
validationRules: [{ type: 'compare', comparisonTarget: comparisonTarget }]
});
$("#cb_accept").dxCheckBox({
value: false,
text: "Terms and condition "
}).dxValidator({
validationRules: [{
type: "compare",
comparisonTarget: function () { return true; },
message: "Please Accept the Terms and Conditions"
}]
});
}
function handlefinish() {
alert('Success');
}
return {
isReady: isReady.promise(),
viewShown: handleViewShown,
handlefinish: handlefinish,
validateAndSubmit: validateAndSubmit
}
};
please help me to sort this out

To focus a dxTextBox you can use the focus method of the dxTextBox instance:
$("#textbox").dxTextBox({/* some options */}).dxTextBox("instance").focus();
So, you can update the loadOptionData function like this:
function loadOptionData() {
//...
$("#password").dxTextBox({
placeholder: 'Required',
}).dxValidator({
validationRules: [{
type: "required",
}]
});
$("#password").dxTextBox("instance").focus();
//...
}
As for validation of a dxCheckBox, you can easily implement it using the following code:
$("#check").dxCheckBox({
value: false,
text: "I agree to the Terms and Conditions",
validationMessageMode: "always"
}).dxValidator({
validationRules: [{
type: "compare",
comparisonTarget: function() {
return true;
},
message: "You must agree to the Terms and Conditions"
}]
});
Here I use the compare validator. Also, I use validationMessageMode: "always" to show a validation tooltip always.
I've created the fiddle http://jsfiddle.net/gvx8q932/, as well.

record being deleted without confirmation?

I am using bootbox dialogs for confirming before deleting records.
here is my jQuery script for confirmation before deleting record.
<a class="btn btn-xs btn-danger" id="deleteContent" title="Delete">delete</a>
$('#deletec').click(function (e) {
bootbox.dialog({
message: "you data is save",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function () {
Example.show("great you save it");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function () {
Example.show("record deleted!");
}
}
}
});
});
it is showing correct dialog but the record being deleted without taking confirmation, can anyone please tell me how can i prevent deletion of record without confirmation ? Thanks in advance.

You can not do what you want because the modal dialog that you are using has no way of pausing the click action. You would need to have to cancel the click action and than make that call.
One way is just to unbind click and call it again
$('#deleteContent').on("click", function (e) {
e.preventDefault();
bootbox.dialog({
message: "you data is save",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function () {
Example.show("great you save it");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function () {
Example.show("record deleted!");
$('#deleteContent').off("click")[0].click();
}
}
}
});
});
As I said in my comments above, making a delete request with a get is a BAD idea. If a user has a plugin that prefetches pages, say goodbye to all your data in the database.
What happens in the code
e.preventDefault(); Cancels the click event so it will not go to the server
$('#deleteContent').off("click") //removes the click event so it will not be called again
[0].click() //selects the DOM element and calls the click event to trigger the navigation