We Keep Coding

FullCalendar: remove events on button click

I am trying to remove a dynamically selected event from FullCalendar.
when this event is rendered it will be also displayed in the table with a delete button at the end of every row.
what i want to do is when I click the delete button, it will also delete the event on the calendar.
I can remove the row from the table but not in the calendar.
here is my code for selecting the event
var eventID = 0;
$('.calendar').fullCalendar({
select: function(start, end, event, view, resource) {
if(start.isBefore(moment())) {
$('.calendar').fullCalendar('unselect');
swal('Ooops!','You cannot select past date/time!','error')
}else{
$('#reserved_date').val(moment(start).format("YYYY-MM-DD"))
$('#end_time').val(moment(end).format("hh:mm A"));
$('#start_time').val(moment(start).format("hh:mm A"));
$('#newScheduleModal').modal({
show : true,
backdrop: 'static',
keyboard: false
});
eventData = {
id: eventID +1,
title: 'Lesson Schedule',
start: start,
end: end,
};
}
$(".fc-highlight").css("background", "red");
},
events: obj,
eventRender:function( ev, element ) {
eventID++;
$('#sched_data').append('<tr class="tb-row">'+
'<td>'+moment(ev.start).format('MMM. DD, YYYY')+'</td>'+
'<td>'+moment(ev.start).format('hh:mm A')+'</td>'+
'<td>'+moment(ev.end).format('hh:mm A')+'</td>'+
'<td><button class="btn btn-danger btn-del btn-xs" data-id"'+ev._id+'"><i class="fa fa-times"></i></button></td></tr>'
)
},
})
here's the code for rendering the event to calendar
$('#btn-reserve').click(function(){
$('.calendar').fullCalendar('renderEvent', eventData, true);
})
and here's my code for deleting an event
$('body').on('click','.btn-del',function(){
$(this).closest('.tb-row').remove();
$('.calendar').fullCalendar('removeEvents', $(this).data('id'));
})

If you to delete an event with the eventClick you can try like this :
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, /*OPTIONS*/);
calendar.on('eventClick', function (info) {
calendar.getEventById(info.event.id).remove();
});
});

I already did it,
My code:
$('body').on('click','.btn-del',function(){
$(this).closest('.tb-row').remove();
$('.calendar').fullCalendar('removeEvents', $(this).data('id'));
})
What it should be
$('body').on('click','.btn-del',function(){
var del_btn = $(this);
del_btn.closest('.tb-row').remove();
$(".calendar").fullCalendar('removeEvents', function(event) {
return event.id == del_btn.data('id');
});
})
the second parameter should be a function and not just the plain id.

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

miss button click event when button is added dynamically

have the following headache: there is a knockout viewmodel with initialize function
initialize: function () {
// bla bla
this.toolbar.addButton({ text: 'View All', label_key: 'view_all', click: 'viewAll' });
},
and some handler-functions
viewAll: function () {
this.toolbar.removeButton('#view_all');
this.toolbar.addButton({ text: 'View Users Projects', label_key: 'view_users_projects', click: 'viewUsersProjects' });
//some things to do
});
viewUsersProjects: function () {
localstorage.clear()// I need this here but this function doesn't work
this.toolbar.removeButton('#view_users_projects');
});
}
So, the problem is following - when button viewAll is clicked - the same function works BUT if button viewUsersProjects is clicked viewUsersProjects function doesn't work, it moves straight off to initialize, I even can delete viewUsersProjects function and nothing is changed but view_users_projects button is disappeared somehow... What I need actually to clear localstorage when view_users_projects button is clicked. Appreciate your answers.
the prototype functions for add/remove buttons:
_.extend(Toolbar.prototype, {
addButton: function (options) {
$('.navbar ul.nav:eq(0)').append(
'<li class="kkvw-button" id="' + options.label_key + '">' +
'<a data-bind="click: ' + options.click + '" href="">' +
'</a>' +
'</li>'
);
return this;
},
removeButton: function (text) {
$(text).remove();
},
});

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 () { });

Jquery UI dialog cannot call methods on dialog prior to initialization; attempted to call method 'isOpen'

I use my code as bellow. The function get_devcies_full is call ever 5times if the dialog opens already Don't opent it again just update the content Then i will code Bellow i the got the error in javascript
cannot call methods on dialog prior to initialization;
attempted to call method isOpen
function get_devcies_full(id,slno)
{
$.post("user/get_full_device/" +id + "/" +slno,
function(data) {
var NewDialog = $('<div id="MenuDialog"></div>');
if (NewDialog.dialog( "isOpen" )!==true){
NewDialog.dialog({
modal: true,
title: "Title",
width :940,
height:600,
});
}
NewDialog.html(data);
var t = setTimeout(function () {get_devcies_full(id,slno);},5000);
}
);
}
Please give solution where i got problem?

Try this:
function get_devcies_full(id,slno)
{
$.post("user/get_full_device/" +id + "/" +slno,
function(data) {
if(!($("#MenuDialog").length))//if this div created for first time
{
$(body).append('<div id="MenuDialog"></div>');//First time you have to append this in body
}
if (!$('#MenuDialog').dialog('isOpen'))
//Try if not works => if(!($("#MenuDialog").parents(".ui-dialog").is(":visible")))
{
$("#MenuDialog").dialog({
modal: true,
title: "Title",
width :940,
height:600
});
}
$("#MenuDialog").html(data);
var t = setTimeout(function () {get_devcies_full(id,slno);},5000);
}
);
}