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

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);

Related

Bootstrap table buttons firing onlick multiple times

Global.Js file
function operativeEvents() {
$('.tableButton').off().click(function (e) {
var $this = $(this),
tableId = $this.parents('table').attr('id'),
$table = $('#' + tableId),
index = $this.closest('tr').index(),
data = $table.bootstrapTable('getData');
//global variable to retrieve the data of the current row
window.currentRow = data[index];
buttonActions($this.attr('id'), $this.data('myid'));
});
The operativeEvents function binds when the bootstrap table body is rendered.
This is done with the onPostBody event. https://bootstrap-table.com/docs/api/events/
Local.cshtml
This contains a switch case to handle the button clicks
function buttonActions(id) {
switch (id) {
case 'bookButton':
bookMatch(currentRow.id);
break;
}
}
function bookMatch(currentRow) {
bootbox.dialog({
message: '<h4 class="text-center">Are you sure?</h4>',
buttons: {
cancel: {
label: 'Cancel',
className: "btn btn-danger"
},
confirm: {
label: 'Ok',
className: 'btn btn-success',
callback: function () {
alert('testing ' + currentRow);
return;
updateCall({
url: "/api/MatchesApi/BookMatch/" + currentRow.id,
tableRefresh: true,
serverSideMessaging: true,
});
}
}
},
});
}
For some reason when I click the button it opens the Bootbox.dialog multiple times.
I have tried using the off() method and also played around with event bubbling. Can someone please give me some advice? Thanks :)

Bootstrap confirmation (remove click function ?)

I've just started to study bootstrap and I'd like to ask a question about it.
I'm using "bootstrap confirmation" referenced with URL below.
https://github.com/mistic100/Bootstrap-Confirmation/blob/master/example/index.html
I'm trying to use custom button of bootstrap confirmation
and i have a click function for this button as well.
but the problem is when i clicked the button it automatically show confirm box.
I wanted to show it when i call the function,
$("#button_id").confirmation("show");
as before I show confirm box i have to check the validation and get the result first...
Is there any way to do it? ..
ex)
$("#button_id").confirmation({
rootSelector: '',
container: 'body',
buttons: [
{
class: 'class',
value: 'YES',
label: 'YES',
onClick:function(){
}
}
]
});
HTML
<button id="bt1" class="btn btn-default" >Confirmation 1</button>
JS
$("#bt1").click(function() {
var test = prompt("test");
if( test == "test" )
{
$('#bt1').confirmation("show");
}
});
Hope this helps. :)
function validate() {
return true;
}
$('#id').click( function() {
var valid = validate();
if(valid) {
$('#id').modal('show');
}
});

Boxy this submit does not work

I have several forms in my code, and I want to assign a Confirmation Box to show before it is submitted.
Hence, I use Boxy Jquery, however after the user confirms, $(this).submit() does not work. Is this because there are more than 1 form?
Here is my JS:
$("form").submit(function(ev) {
Boxy.confirm("Are you sure?", function() { $(this).submit(); }, {title: 'Confirm'});
return false;
});
$("form").submit(function(ev) {
var $this = jQuery(this);
Boxy.confirm("Are you sure?", function() { $this.submit(); }, {title: 'Confirm'});
return false;
});
If you have a submit button that triggers the form submit, you can do something like this:
$(".button").click(function(ev) {
ev.preventDefault();
Boxy.confirm("Are you sure?", function() { $('form').submit(); }, {title: 'Confirm'});
});

override jqueryUI dialog buttons (save, cancel and etc to user's choice) text dynamically

I am passing some predefined values to jquery dialog but unable to pass buttons text. When user calls jquery dialog, he can be able give his own buttons text. For example: Save, cance, MyButton and etc.
var options = {
autoOpen : true,
dialogClass: 'ui-dialog-osx',
draggable: false,
height : 370,
maxHeight : 600,
maxWidth : 600,
minHeight : 340,
minWidth : 400,
resizable : false, // also requires ui.resizable.js
title: "Add New Address",
modal: true,
width: 400,
buttons: [{
text : "Yes Yes"
}, {
"cancel": "No"
}]
};
and calling dialog as shown below:
dialog1(options);
And dialog1 is looks like :$("#dialog").dialog(options, {})
Finally, the problem is how can I get the buttons text in dialog?
Update:
$("#dialog").dialog(options, {
showTitlebar : true,
buttons: {
SAVE : function() {
console.log($('.ui-button-text'));
var add1 = $("#txtadd1").val();
var add2 = $("#txtadd2").val();
var landmark = $("#landmark").val();
var city = $("#city").val();
var pincode = $("#pincode").val();
var state = $("#state").val();
console.log(add1 + ' ' + add2 + ' ' + landmark + ' ' + city + ' ' + pincode + ' ' + state );
var newModel = new Record();
console.log(newModel);
console.log(that.collection);
console.log('Govindha Govindhaaaaaaaaaa');
newModel.set({
add1 : add1,
add2 : add2,
landmark : landmark,
city : city,
pincode : pincode,
state : state
});
console.log(newModel);
newModel.save({wait:true}, {
success : function(model, resp, options){
console.log('Model saved');
console.log(that.collection);
that.collection.add(resp[0]);
$(".elems").each(function(){
$(this).val('');
});
$(".errmsg").html('');
//console.log('Govindha Govindhaaaaaaaaaa');
$("#dialog").dialog('close');
},
error : function(model, xhr, options){
console.log("Something went wrong while saving the model");
}
});
},
CANCEL : function(){
$(".elems").each(function(){
$(this).val('');
});
$(".errmsg").html('');
$("#dialog").dialog('close');
}
},
close: function(){
$(".elems").each(function(){
$(this).val('');
});
}
});
Try this:
$.each( $('#dialog').parent().find('.ui-button-text'), function(i, btn) {
var label = options.buttons[i];
btn.text(label);
});
JSFiddle Demo
The basic idea is to iterate through each of the button-text in the dialog and get the text for the button from the options.buttons object and set it as the text for the button.
Depending on your DOM/Markup, you might require to tweak the code slightly to get it right. Please post your code/markup, in case you aren't able to get it fine. :)
Here's a function you can call to change any of the button-texts you want to update:
function changeBtnText(container, from, to) {
var buttons = container.parent().find('.ui-button-text');
$.each(buttons, function (i, btn) {
if($(btn).text() == from) {
$(btn).text(to);
return false;
}
});
}
You can call it like this:
changeBtnText( $('#dialog'), 'Save', 'Dont Save' );
That will change the button whose text is 'Save' to 'Dont Save'.
You should select the spans with the ui-button-text class, these are containing the dialog button labels. For finding their exact location in the DOM you should use the developer tools of the web browser. Though I guess if you make this selection:
$('.ui-button-text')
This will give the list (array) of the button texts in the order you have defined in the configuration object of your dialog method.

How to add event listener to an element when it created with jquery

I'm trying to create and add event listener to a button in jquery. I'm able to achieve this, but What is my problem is that when I click any of the button in the form, this event is triggering.
here is my code:
$('#submitPh').on('click',function(e){
e.preventDefault();
secCheck($(this).attr('id'));
});
function secCheck(invoker) {
console.log('called');
var id = 'secModal', title = '<h3>Security Verification</h3>',
body = $('<form/>').attr({'method': 'post', 'action': '', 'id': 'secCheck'}).append($('<div/>').addClass('form-group')
.append($('<div/>').addClass('controls')
.append($('<label/>').attr({'for': 'verPass'}).addClass('control-label').text('Please enter your password'), $('<input/>').attr({'type': 'password', 'id': 'verPass', 'name': 'verPass', 'value': '', 'placeholder': 'Enter your password'})
.addClass('form-control'))), $('<div/>').addClass('form-group').append($('<div/>').addClass('col-lg-10 warning-mes')),$('<div/>').addClass('form-group').append($('<button/>').click(confCheck()).attr({'type': 'button', 'id': 'secCheckSubmit'}).addClass('btn btn-default').text('Submit')));
createModal(id, title, body, invoker);
}
function createModal(id, title, body, invoker) {
var modal = $('<div/>').attr('id', id).addClass('modal fade')
.append($('<div/>').addClass('modal-dialog')
.append($('<div/>').addClass('modal-content')
.append($('<div/>').addClass('modal-header')
.append($('<button/>').attr({'data-dismiss': 'modal', 'area-hidden': true}).addClass('close').html('&times'), title), $('<div/>').addClass('modal-body').html(body), $('<div/>').addClass('modal-footer')
.append($('<button/>').attr({'type': 'button', 'data-dismiss': 'modal'}).addClass('btn btn-default').text('Close')))));
if (!$('div#' + id).length) {
$('body').append(modal);
}
showModal('#' + id, invoker);
}
function showModal(sId, invoker) {
var $this = invoker;
var id = sId;
var $target = $(sId || (id && id.replace(/.*(?=#[^\s]+$)/, ''))); //strip for ie7
var option = $target.data('modal') ? 'toggle' : $.extend({remote: !/#/.test(id) && id}, $target.data());
this.modal = $target
.modal(option, this)
.one('hide', function() {
$this.is(':visible') && $this.focus();
});
}
function confCheck() {
alert();
}
This is how I did. But this was not producing the expected result as I stated above.
Please anyone help me to solve this problem...
Edit
Fiddle
it should be
$('<button/>').click(confCheck)
You need to pass a function reference as the parameter to click(), don't invloke it ans sent the result
You can use .appendTo() in this context
Try,
$('<button/>').appendTo('#button').click(sp.confCheck(func,data));
better you should give a class name for the newly created button and provide deligate for event listening
$('#button').append($('<button/>', { class: "test" }));
$("body").on("click", ".test", function () { });

Categories