this is my click function
$('.cal table tbody td').on('click', function () {
if($(this).hasClass('available'))
{
alert('asd');
}
});
the problem i am having is that after i have switched to the next or previous month, my clicking function on the calendar does not work.
For example in my JSFIDDLE, if u move to the previous month and then move back to the current month and do the click function, it wouldn't work anymore.
EDIT: I'm using an external library called date.js, check out my jsfiddle for a clearer idea of what is going on.
EDIT 2: updated jsfiddle link
jsfiddle
Use this
$(document).on('click','.cal table tbody td', function () {
if ($(this).hasClass('available')) {
alert('asd');
}
});
instead of this
$('.cal table tbody td').on('click', function () {
if ($(this).hasClass('available')) {
alert('asd');
}
});
Former is the correct replacement for delegate
one thing I notice immediately is that when you do things like:
$('#calendar tbody').append('<tr id = row'+i+'></tr>');
you need to remember that when you want to give an ID to an element the 'value' portion of the ID should be enclosed in quotations.
So you need to escape the string to include them so your browser can interpret the html properly.
ie
$('#calendar tbody').append('<tr id = \"row'+i+'\"></tr>');
that way your output looks like:
<tr id="rowx"></tr>
instead of:
<tr id=rowx></tr>
Your previous and next event handlers are recreating the DOM elements used for rendering the calendar. However, your click handler is only only attached to the elements that exist in the DOM at the time that handler is registered. The documentation of on() states:
Event handlers are bound only to the currently selected elements; they
must exist on the page at the time your code makes the call to .on()
You'll probably need to re-register that click handler as part of your calendarInit() function after the new rows in the calendar - the new elements - have been rendered.
You may view a working version here. Or take a look at the updated jQuery below.
var firstday = new Date();
var lastday = new Date();
var calendarmonth = new Date();
var CCheck;
$(document).ready(function () {
Date.today();
firstday.setMonth(Date.today().getMonth(), 1);
lastday.setMonth(Date.today().getMonth() + 1, 0);
calendarmonth.setMonth(Date.today().getMonth());
calendarInit();
$('#calendar-prev').on('click', function () {
if (CCheck > 35) {
//render 6 rows
for (i = 1; i < 7; i++) {
$('#row' + i).remove();
}
} else {
//render 5 rows
for (i = 1; i < 6; i++) {
$('#row' + i).remove();
}
}
$("#month").empty();
calendarmonth.addMonths(-1);
firstday.addMonths(-1);
lastday.setMonth(firstday.getMonth() + 1, 0);
calendarInit();
});
$('#calendar-next').on('click', function () {
if (CCheck > 35) {
//render 6 rows
for (i = 1; i < 7; i++) {
$('#row' + i).remove();
}
} else {
//render 5 rows
for (i = 1; i < 6; i++) {
$('#row' + i).remove();
}
}
$("#month").empty();
calendarmonth.addMonths(1);
firstday.addMonths(1);
lastday.setMonth(firstday.getMonth() + 1, 0);
calendarInit();
});
addRemoveClickTrigger();
});
function calendarInit() {
CCheck = lastday.getDate() + firstday.getDay();
var i;
var colNo;
var a = 1;
var days = new Array();
$("#month").append("Month: " + calendarmonth.toString("MMMM, yyyy"));
if (CCheck > 35) {
//render 6 rows
for (i = 1; i < 7; i++) {
$('#calendar tbody').append('<tr id = row' + i + '></tr>');
colNo = a + 6;
for (a; a <= colNo; a++) {
var datenum = a - firstday.getDay();
if (datenum < 1) {
$('#row' + i).append('<td></td>');
} else if (datenum > lastday.getDate()) {
$('#row' + i).append('<td></td>');
} else {
$('#row' + i).append('<td id = Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + datenum + '>' + datenum + '</td>');
days[datenum] = new Date();
days[datenum].set({
month: calendarmonth.getMonth(),
day: datenum,
year: calendarmonth.getFullYear()
});
}
}
}
} else {
//render 5 rows
for (i = 1; i < 6; i++) {
$('#calendar tbody').append('<tr id = row' + i + '></tr>');
colNo = a + 6;
for (a; a <= colNo; a++) {
var datenum = a - firstday.getDay();
if (datenum < 1) {
$('#row' + i).append('<td></td>');
} else if (datenum > lastday.getDate()) {
$('#row' + i).append('<td></td>');
} else {
$('#row' + i).append('<td id = Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + datenum + '>' + datenum + '</td>');
days[datenum] = new Date();
days[datenum].set({
month: calendarmonth.getMonth(),
day: datenum,
year: calendarmonth.getFullYear()
});
}
}
}
}
/*alert(Date.today().getMonth());
alert(calendarmonth.getMonth());*/
if (Date.today().getMonth() == calendarmonth.getMonth() && Date.today().getFullYear() == calendarmonth.getFullYear()) {
for (i = 1; i <= lastday.getDate(); i++) //Date highlight
{
if (Date.today().getDate() == i) //highlight today's date
{
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("today");
} else if (Date.today().getDate() > i) //highlight unavailable dates
{
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("unavailable");
} else if (Date.today().getDate() < i) {
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("available");
}
}
} else if (Date.today() > calendarmonth) {
for (i = 1; i <= lastday.getDate(); i++) //Highlight dates before today to unavailable
{
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("unavailable");
}
} else {
for (i = 1; i <= lastday.getDate(); i++) //Condition highlighting
{
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("available");
if (days[i].getDay() == 0 || days[i].getDay() == 6) // set weekends to unavailable
{
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).removeClass("available");
$('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("unavailable");
}
}
}
addRemoveClickTrigger();
} //calendarInit()
function addRemoveClickTrigger()
{
$('.cal table tbody td').off();
$('.cal table tbody td').on({
'click':
function ()
{
alert(jQuery(this).prop('class'));
if ($(this).hasClass('available'))
{
alert('asd');
}
}
});
} //addRemoveClickTrigger()
I hope this helps.
Related
I'm working on a table, that displays data from loop and the whole row is being appended. The code is working fine, its just when I inspect element I notice that the <td> is outside <tr>, how can I fix it.
hope you help me.
thanks.
var dataNum = 10;
for (let t = 1; t <= dataNum; t++) {
$('table tbody').append('<tr>');
for (var j = 0; j < 2; j++) {
if (j == 0) {
$('table tbody').append('<td>' + todayDate() + '-' + deci(t) + '</td>');
} else if (j == 1) {
$('table tbody').append('<td>' + (Math.floor(Math.random() * 10000) + 90000) + '</td>');
}
}
$('table tbody').append('</tr>');
}
function todayDate() {
var d = new Date(),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('');
}
function deci(number) {
var num = null;
if (number < 10) {
num = '000' + number;
} else if (number > 9 && number < 100) {
num = '00' + number;
} else if (number > 99 && number < 1000) {
num = '0' + number;
} else {
num = number;
}
return num;
}
table th, table td{
width: 150px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Num</th>
<th>Random</th>
</tr>
</thead>
<tbody></tbody>
</table>
In your code, you are appending tr and td both to tbody. You need to append td to tr
for (let t = 1; t <= dataNum; t++) {
$('table tbody').append('<tr></tr>');
for (var j = 0; j < 2; j++) {
if (j == 0) {
$('table tbody tr:last').append('<td>' + todayDate() + '-' + deci(t) + '</td>');
} else if (j == 1) {
$('table tbody tr:last').append('<td>' + (Math.floor(Math.random() * 10000) + 90000) + '</td>');
}
}
}
Your
$('table tbody').append('<td>'...
is appending tds to the tbody.
Try creating the tr first, appending it to the tbody, and then append tds to the tr:
var dataNum = 10;
for (let t = 1; t <= dataNum; t++) {
const $tr = $('<tr></tr>');
$('table tbody').append($tr);
for (var j = 0; j < 9; j++) {
if (j == 0) {
$tr.append('<td>' + todayDate() + '-' + deci(t) + '</td>');
} else if (j == 1) {
$tr.append('<td>' + (Math.floor(Math.random() * 10000) + 90000) + '</td>');
}
}
}
function todayDate() {
var d = new Date(),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('');
}
function deci(number) {
var num = null;
if (number < 10) {
num = '000' + number;
} else if (number > 9 && number < 100) {
num = '00' + number;
} else if (number > 99 && number < 1000) {
num = '0' + number;
} else {
num = number;
}
return num;
}
table th, table td{
width: 150px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Num</th>
<th>Random</th>
</tr>
</thead>
<tbody></tbody>
</table>
That is because of the following line.
$('table tbody').append('<tr>'); This actually appends the tr into the DOM. So basically, <tr></tr> gets autocompleted since browser is smart and tries to ensure valid HTML DOM structure. What you should ideally do is create a string that stores entire DOM structure you need and append it at the end since DOM manipulations are slow.
var dataNum = 10;
var str='';
for (let t = 1; t <= dataNum; t++) {
str += '<tr>';
for (var j = 0; j < 9; j++) {
if (j == 0) {
str += '<td>' + todayDate() + '-' + deci(t) + '</td>';
} else if (j == 1) {
str+= '<td>' + (Math.floor(Math.random() * 10000) + 90000) + '</td>';
}
}
str += '</tr>';
}
$('table tbody').append(str);
function todayDate() {
var d = new Date(),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('');
}
function deci(number) {
var num = null;
if (number < 10) {
num = '000' + number;
} else if (number > 9 && number < 100) {
num = '00' + number;
} else if (number > 99 && number < 1000) {
num = '0' + number;
} else {
num = number;
}
return num;
}
table th, table td{
width: 150px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Num</th>
<th>Random</th>
</tr>
</thead>
<tbody></tbody>
</table>
I would like to extract the value from a dynamically generated inputbox which is inside a tr tag . But for some reason, I am facing error and I am getting undefined as the value. What could I be doing wrong? I am relatively new to Jquery. So,please I would like to know where I am doing wrong.
index.js
function dynamic_children() {
$(function () {
var no = $('#number_children').val()
$('#id_children-TOTAL_FORMS').val = no
children_added = $('#children_td_table tr').length
remaining = 4 - children_added
//determine if the no of children input are more than those left
if (no > remaining) {
//show alert that max children reached
$('max-children').show()
setTimeout(function () {
$('max-children').hide()
}, 3000);
} else if (no < children_added) {
no_to_remove = children_added - no
for (i = 0; i < no_to_remove; i++) {
$('#children_td_table').children().last().remove();
}
}
else {
for (var i = 0; i < remaining && i < no; i++) {
no_ = i + 1
$('#children_td_table')
.append($('<tr>')
.append('<td>' + no_ + '</td>')
.append($('<td>')
.append($('<input>')
.addClass('Input-text')
.attr('name', 'children-' + i + '-child_name')
.attr('id', 'children-' + i + '-child_name')
)
)
.append($('</td>'))
.append($('<td>')
.append($('<input>')
.addClass('Input-text')
.attr('name', 'children-' + i + '-child_dob')
.prop('type', 'date')
.prop('class', 'children-' + i + '-child_age')
.change(function () {
d = new Date($(this).val());
var before = moment($(d, 'YYYY-MM-DD'));
var age = moment().diff(d, 'years');
age_id_name = "#" + $(this).attr('class')
$(age_id_name).val(age);
})
))
.append($('</td>'))
.append($('<td>')
.append($('<input>')
.addClass('Input-text')
.attr('id', 'children-' + i + '-child_age')
.attr('name', 'child')
.prop('type', 'text')
))
.append($('</td>'))
)
.append($('</tr>'))
}
}
//
// for (var i = 0; i < no && i < 4; i++) {
//
//
// $("#delete_row").click(function () {
// if (i > 1) {
// $("#addr" + (i - 1)).html('');
// i--;
// }
// });
// }
})
}
function savechildinfo(){
var numofchildren = $("#number_children").val();
console.log("CHildrennumber",numofchildren);
var tr = $("#children_td_table").closest('tr');
for(var i =0;i<numofchildren;i++){
var c = "children-"+i+"-child_name";
var d = tr.find(c).val();
console.log("childrenname",d);
}
}
It is hard to understand and read you code, but I highlight your issue down below.
First no need to use closest just use $("#children_td_table") alone for var tr. Second you forget to add # for var c if you want to find it by ID so should use var c = "#children-" + i + "-child_name";
var i = 1;
var no_ = '123' // just for fix the error
$('#children_td_table')
.append($('<tr>')
.append('<td>' + no_ + '</td>')
.append($('<td>')
.append($('<input type="text"/>')
.addClass('Input-text')
.attr('name', 'children-' + i + '-child_name')
.attr('id', 'children-' + i + '-child_name')
.val('test') // remove this later
))
.append('</td>')
.append('</tr>')
);
savechildinfo(); // I execute this on load
function savechildinfo() {
var numofchildren = 2; // just for fix the error
console.log("CHildrennumber", numofchildren);
var tr = $("#children_td_table");
// remove closest
for (var i = 0; i < numofchildren; i++) {
var c = "#children-" + i + "-child_name";
// -----^ add #
var d = tr.find("#children-" + i + "-child_name").val();
console.log("childrenname", d);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="children_td_table"></table>
I want to format the time from 24 hours to 12 hours with AM/PM and display it in popover.
This is my code:
eventMouseover: function (event, jsEvent) {
var t1 = event.start;
var t2 = event.end;
$(this).popover({
html:true,
placement: 'left',
trigger: 'hover',
content: t1 + ' - ' + t2,
container: '#calendar'
}).popover('toggle');
}
I search for the answers here but it doesnt work in popover. So i decided to ask for it.
This is the code i used.
It works on here, but not in popover.
eventRender: function(event, element) {
var t1 = event.time;
var t2 = event.time2;
var tmpArr = t1.split(':'), time12;
if(+tmpArr[0] == 12) {
time12 = tmpArr[0] + ':' + tmpArr[1] + 'P';
} else {
if(+tmpArr[0] == 00) {
time12 = '12:' + tmpArr[1] + 'A';
} else {
if(+tmpArr[0] > 12) {
time12 = (+tmpArr[0]-12) + ':' + tmpArr[1] + 'P';
} else {
time12 = (+tmpArr[0]) + ':' + tmpArr[1] + 'A';
}
}
}
var tmpArrs = t2.split(':'), time13;
if(+tmpArrs[0] == 12) {
time13 = tmpArrs[0] + ':' + tmpArrs[1] + 'P';
} else {
if(+tmpArrs[0] == 00) {
time13 = '12:' + tmpArrs[1] + 'A';
} else {
if(+tmpArrs[0] > 12) {
time13 = (+tmpArrs[0]-12) + ':' + tmpArrs[1] + 'P';
} else {
time13 = (+tmpArrs[0]) + ':' + tmpArrs[1] + 'A';
}
}
}
element.find('.fc-content').append(t1 + "-" + t2 +);
}
Assuming you have moment.js included in your webpage (as FullCalendar needs it in any case) use the following code in place of declaring var t1 and var t2
var t1 = $.fullCalendar.moment(event.start).format("h:mm A")
var t2 = $.fullCalendar.moment(event.end ).format("h:mm A")
P.S. You don't need to work out the 12 hour format manually, moment.js does this for you
The problem I am having is that nothing changes when the variable schmeckle goes over 49, the html doesn't update. (Line 13 in the code.)
$(document).ready(function() {
var schmeckle = 0;
$('#schmeckleAdder').click(function() {
$('#iAmTheBody').css("background-color", "orange");
if (schmeckle == 0) {
schmeckle = schmeckle + 1;
$('#iAmTheBody').append('<p id="howManyYouGot">You have ' + schmeckle + ' schmeckles!</p>');
}
else {
schmeckle = schmeckle + 1;
$('#howManyYouGot').html('<p>You have ' + schmeckle + ' schmeckles!</p>');
}
});
if (schmeckle > 49) {
$('iAmTheBody').append('<button type="button" id="mortyBuyer">Buy a morty!</button>');
}
else {
}
});
You missed the ID selector : change $('iAmTheBody') => $('#iAmTheBody') . And you should move your check inside the logic where you increase your counter: See
example
$(document).ready(function() {
var schmeckle = 0;
$('#schmeckleAdder').click(function() {
$('#iAmTheBody').css("background-color", "orange");
if (schmeckle == 0) {
schmeckle = schmeckle + 1;
$('#iAmTheBody').append('<p id="howManyYouGot">You have ' + schmeckle + ' schmeckles!</p>');
}
else {
schmeckle = schmeckle + 1;
$('#howManyYouGot').html('<p>You have ' + schmeckle + ' schmeckles!</p>');
if (schmeckle > 3) { //change to 49 as you wish
$('#iAmTheBody').append('<button type="button" id="mortyBuyer">Buy a morty!</button>');
} else { }
}
});
});
Fiddle: https://jsfiddle.net/fLfg7yqn/
JQuery:
$(function () {
$('.dvContentSlide').not(':eq(0)').addClass("dispNone");
$('.dvContentSlide:eq(0)').addClass("slideIsActive");
var g = parseInt($('div.slideIsActive').index()) + 1;
var u = $(".dvContentSlide").length;
$("#spCur").text("Current Index: " + g);
$("#spDVLen").text("SLIDE div length: " + $(".dvContentSlide").length);
for (var i = 0; i < u; i++)
$(".ulContentSliderNav").append('<li><span></span></li>');
$(".ulContentSliderNav :first-child a").addClass("ulContentSliderNavSel");
$(".cSlider").mouseover(function () {
clearInterval(po);
}).mouseout(function () {
po = setInterval(AutoSlide, 4000);
});
$(".ulContentSliderNav a").click(function (e) {
e.preventDefault();
$(this).parent().parent().find(".ulContentSliderNavSel").removeClass("ulContentSliderNavSel");
$(this).addClass("ulContentSliderNavSel");
GoToTheSlide($(this).parent().index());
});
function GoToTheSlide(t) {
$('.dvContentSlide').addClass("dispNone");
$('.dvContentSlide').removeClass("slideIsActive");
$('.dvContentSlide:nth-child(' + ++t + ')').addClass("slideIsActive").removeClass("dispNone");
}
$("#aContentSliderNext").click(function () {
var k = $('div.slideIsActive').index() + 1;
if (k >= $(".dvContentSlide").length) {
k = 1;
$('.dvContentSlide').not(':eq(0)').addClass("dispNone").removeClass("slideIsActive");
$('.dvContentSlide:eq(0)').addClass("slideIsActive").removeClass("dispNone");
}
else {
$(".dvContentSlide:nth-child(" + k + ")").removeClass("slideIsActive").addClass("dispNone");
$(".dvContentSlide:nth-child(" + ++k + ")").removeClass("dispNone").addClass("slideIsActive");
}
$("#spCur").text("Current Index: " + k);
$(".ulContentSliderNavSel").removeClass("ulContentSliderNavSel");
$(".ulContentSliderNav li:nth-child(" + k + ") a").addClass("ulContentSliderNavSel");
});
$("#aContentSliderPrev").click(function () {
var k = $('div.slideIsActive').index() + 1;
if (k <= 1) {
k = $(".dvContentSlide").length;
$('.dvContentSlide').not(':eq(' + k + ')').addClass("dispNone").removeClass("slideIsActive");
$('.dvContentSlide:nth-child(' + k + ')').addClass("slideIsActive").removeClass("dispNone");
}
else {
$(".dvContentSlide:nth-child(" + k + ")").removeClass("slideIsActive").addClass("dispNone");
$(".dvContentSlide:nth-child(" + --k + ")").removeClass("dispNone").addClass("slideIsActive");
}
$("#spCur").text("Current Index: " + k);
$(".ulContentSliderNavSel").removeClass("ulContentSliderNavSel");
$(".ulContentSliderNav li:nth-child(" + k + ") a").addClass("ulContentSliderNavSel");
});
function AutoSlide() {
var k = $('div.slideIsActive').index() + 1;
console.log(k);
if (k >= $(".dvContentSlide").length) {
k = 1;
$('.dvContentSlide').not(':eq(0)').addClass("dispNone").removeClass("slideIsActive");
$('.dvContentSlide:eq(0)').addClass("slideIsActive").removeClass("dispNone");
}
else {
$(".dvContentSlide:nth-child(" + k + ")").removeClass("slideIsActive").addClass("dispNone");
$(".dvContentSlide:nth-child(" + ++k + ")").removeClass("dispNone").addClass("slideIsActive");
}
$("#spCur").text("Current Index: " + k);
$(".ulContentSliderNavSel").removeClass("ulContentSliderNavSel");
$(".ulContentSliderNav li:nth-child(" + k + ") a").addClass("ulContentSliderNavSel");
}
var po = setInterval(AutoSlide, 4000);
});
Everything is working fine except how can I update the jquery/css so instead of showing the slide, it fades out the current slide and fades in the next slide with keeping the structure as is.
Have you tried fadeOut() fadeIn()? I didn't see it in your code, follow this link to see if it will meet your need.