We Keep Coding

JsGrid Custom Delete Confirmation Message

I am using jsGrid to show data. I want to replace the default delete confirmation message with that of "Alertify".
I tried to replace deleteConfirm:"Are you sure?" with a function below but it shows an empty alert box and When I click on OK or CANCEL, it shows custom "Alertify" box that I wanted to show.
deleteConfirm: function(item){
alertify.confirm("Do you want to delete this work experience?",
function(){
alertify.success('Ok');
},
function(){
alertify.error('Cancel');
});
},
delete from database
deleteItem: function(item){
return $.ajax({
url: "<?php echo base_url('admin/delWork');?>",
data: item
});
},
},
I want to show custom("Alertify") dialog box instead of default confirm dialog box.

You need to set confirmDeleting to false and use something like his in jsgrid configuration:
confirmDeleting: false,
onItemDeleting: function (args) {
if (!args.item.deleteConfirmed) { // custom property for confirmation
args.cancel = true; // cancel deleting
confirm.showConfirm('Are you sure?', function() {
args.item.deleteConfirmed = true;
$grid.jsGrid('deleteItem', args.item); //call deleting once more in callback
});
}
},

How to force submit - Asynchronous code in submit event

I'm trying to force submitting of my form, the problem is that I use bootboxjs
(that uses an asynchronous code) to make a confirmation dialog before submitting, this is exactly I want, also the required inputs are validated in that way.
This is the structure of my JS code:
$("#myForm").submit(function(e){
bootbox.confirm({
message: "Are you sure?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-danger'
},
cancel: {
label: 'NO, STOP!',
className: 'btn-primary'
}
},
callback: function (result){
if (result)
{
// Some code to set values to hidden inputs and another irrelevant stuff...
// The right command (that I didn't know) to force the form
}
}
});
return false;
});
How can I avoid this issue and preserve the validation of required inputs?

You can prevent the jquery event and use a native one to force a browser default submit when you are ready
$("#myForm").submit(function(e){
// store reference to form due to callback context
var form = this;
bootbox.confirm({
message: "Are you sure?",
buttons: {... },
callback: function (result){
if (result)
{
// Some code to set values to hidden inputs and another irrelevant stuff...
// Now use native submit
form.submit();
}
}
});
// prevents jQuery submit only
return false;
});

How can I set a checkbox to unchecked when I click cancel

I have a bootbox script that displays a custom alert. When clicking cancel I need the checkbox that fires the alert to go back to unchecked.
This is my checkbox when checked
<div class="checkbox">
<label>
<input type="checkbox" id="enroll-deposit" checked="" data-original-title="" title="" value="True"> I am not enrolling in Direct Deposit
</label>
</div>
and this is my bootbox script thats fired on click
$(document).on("click", "#enroll-deposit", function(e) {
var val = $(this).val();
if (val == "True") {
var url = "#Url.Action("waivetask", "OBProcess" , new { id=ViewBag.DocId, tid=ViewBag.TaskId })";
var desc = "Direct Deposit";
bootbox.dialog({
message: "Are you sure you want to waive " + "<strong>" + desc + "</strong>",
title: "Waive Direct Deposit",
buttons: {
main: {
label: "Cancel",
className: "btn-default",
callback: function() {
//NOT SURE WHAT TO PUT
}
},
danger: {
label: "Waive and Move On to Next Task",
className: "btn-danger",
callback: function() {
window.location.href = url;
}
}
}
});
}
});
I am not sure what to do when the user clicks the cancel button. I want to uncheck the enroll-deposit box.

There is another way to uncheck:
$('input[type=checkbox]').prop('checked', false);
And instead of using:
var val = $(this).val();
You could use:
var isChecked = $(this).is(':checked');
Maybe its best to refactor your code like this:
$(document).on("click", "#enroll-deposit", function() {
var isChecked = $(this).is(':checked');
if (isChecked) {
var url = '#Url.Action("waivetask", "OBProcess" , new { id=ViewBag.DocId, tid=ViewBag.TaskId })';
bootbox.dialog({
message: "Are you sure you want to waive <strong> Direct Deposit </strong>",
title: "Waive Direct Deposit",
buttons: {
main: {
label: "Cancel",
className: "btn-default",
callback: function() {
//NOT SURE WHAT TO PUT
}
},
danger: {
label: "Waive and Move On to Next Task",
className: "btn-danger",
callback: function() {
window.location.href = url;
}
}
}
});
}
});
Hope I was helpful.

$('input:checkbox').removeAttr('checked');

write this
$("#enroll-deposit").prop('checked',false);

Checked is not an attribute. It's actually a property. Looks like you're using jQuery so in your "else" statement you could do
$(this).prop("checked",false);

transform in function javascript

Hello and I could do with this one function?
I am new to javascript.
I need to encapsulate the code below in a function like:
ConfirmDelete function () {
};
that does the same as this:
$('.btn-danger').on('click', function (e, confirmed) {
if (!confirmed) {
e.preventDefault();
bootbox.confirm("Are you sure?", function (response) {
if (response) {
$('.btn-danger').trigger('click', true);
}
});
}
});

I have been over your code and the jQuery version is your best bet. You can't get the same functionality from inline handlers connected to the button.
You will want to move to the submit event of the form as click on a single button is unreliable (e.g. when using keyboard). e.g. You would want to change it to something like:
$('form:has(.btn-danger)').on('submit', function (e, confirmed) {
var $form = $(this);
if (!confirmed) {
e.preventDefault();
bootbox.confirm("Are you sure?", function (response) {
if (response) {
$form.trigger('submit', true);
}
});
}
});

DELETE request outside of form Laravel

I am new to Laravel, and I am using this Jeffrey Way script to submit a DELETE request without a form.
My link:
<a class="btn btn-danger btn-sm delete" href="files/<?=$file->id?>" data-method="delete">
<i class="fa fa-check"></i> Yes I'm sure
</a>
The script, which for now is in the view file is as follows:
$(document).on("click", ".delete", function() {
var laravel = {
initialize: function() {
this.methodLinks = $('a[data-method]');
this.registerEvents();
},
registerEvents: function() {
this.methodLinks.on('click', this.handleMethod);
},
handleMethod: function(e) {
var link = $(this);
var httpMethod = link.data('method').toUpperCase();
var form;
// If the data-method attribute is not PUT or DELETE,
// then we don't know what to do. Just ignore.
if ( $.inArray(httpMethod, ['PUT', 'DELETE']) === - 1 ) {
return;
}
// Allow user to optionally provide data-confirm="Are you sure?"
if ( link.data('confirm') ) {
if ( ! laravel.verifyConfirm(link) ) {
return false;
}
}
form = laravel.createForm(link);
form.submit();
e.preventDefault();
},
verifyConfirm: function(link) {
return confirm(link.data('confirm'));
},
createForm: function(link) {
var form =
$('<form>', {
'method': 'POST',
'action': link.attr('href')
});
var token =
$('<input>', {
'type': 'hidden',
'name': 'csrf_token',
'value': '<?=csrf_token();?>' // hmmmm...
});
var hiddenInput =
$('<input>', {
'name': '_method',
'type': 'hidden',
'value': link.data('method')
});
return form.append(token, hiddenInput)
.appendTo('body');
}
};
laravel.initialize();
});
This is the exact script as pulled from the Gist, the only change I made is that I added the trigger $(document).on("click", ".delete", function().
The problem that I am running into is that when I click on the link to delete, I get sent to another page (like /files/6 or whatever the file id is). It is treating the <a> tag like a regular link as opposed to a DELETE request, as I would like to happen. Does anyone know why this is happening?

The default action for an anchor is to navigate, you will need to prevent it inside your click handler.
$(document).on("click", ".delete", function(e) {
e.preventDefault();
...

I found a solution - I had two issues.
First - you may need to include an additional slash in your href, for me I had to change
href="files/<?=$file->id?>" to href="/files/<?=$file->id?>"
Secondly, I was running into problems because my link was inside of a Bootstrap popover (within data-content) and this was further complicating matters. I reverted the script to the original one as provided by Jeffrey Way (using $(function() { instead of $(document).on("click", ".delete", function() {). Then I created a hidden link element outside of the popover:
And then I triggered a click on that link using jQuery (both elements were under parent <div class="panel-body">:
$(document).on("click", ".delete", function(){
$(this).closest(".panel-body").find(".delete-file").trigger("click");
});