We Keep Coding

JS: Fail to obtain object after change of filter

So I have a list of items with anchor a that successfully listen to the following event:
$('body[data-link="media"] #media_content a').on('click',function(e){
e.preventDefault();
var page = $('.page.active a')[0].innerHTML;
var date = $('.year_sorting .filter_years').val();
var id = $(e.currentTarget).data('media');
window.location.href = 'http://'+basePath+'media/content/'+id+'?date='+date+'&page='+page;
})
However in the same page, there is a filter allowing the user to change the year filter and once changed, the following execute and append a list of items that has the exact same layout as the a above $('body[data-link="media"] #media_content a'), which supposes to listen to the above event as well. the filter event is below:
$('.activity.filter_years').on('change',function(){
$('.pagination_ul').remove();
r_year = $(this).val();
$.get("media/getActivity",{type:'0',key:r_year}).done(function(d){
if(d.length>0){
$('#media_content').html('');
var ul = '<ul class="ap pagination-sm pagination_ul"></ul>';
$('.pagination_menu').append(ul);
for(var i=0;i<d.length;i++){
var p = ['',''];
if(!d[i].event_period){
p = ['style="color:#8A8A8A;"','style="color:#C7C7C7;"'];
}
if(locale=='en'){
var event = $('<div class="div_media_content_f2 '+d[i].pagination+' pagination-tr"> <div class="div_media_content_f2_3"> <span class="font12_bold">'+d[i].event_date+'</span> <div>'+d[i].event_title+'</div></div></div>')
}else if(locale=='hk'){
var event = $('<div class="div_media_content_f2 '+d[i].pagination+' pagination-tr"> <div class="div_media_content_f2_3"> <span class="font12_bold">'+d[i].event_date+'</span> <div>'+d[i].event_title_zh+'</div></div></div>')
}else {
var event = $('<div class="div_media_content_f2 '+d[i].pagination+' pagination-tr"> <div class="div_media_content_f2_3"> <span class="font12_bold">'+d[i].event_date+'</span> <div>'+d[i].event_title_cn+'</div></div></div>')
}
$('#media_content').append(event);
}
pagination('.pagination_ul','.pagination-tr',Math.ceil(d.length/20),false);
}else{
$('#div_news_content_right').html('').append('<div class="not_available">No content available</div>');
}
})
})
in which you can see the list of items are being appended into the layout by JS. However, even with the same layout $('body[data-link="media"] #media_content a'), such appended list of items do not listen to the onclick event. the above js codes are together in a separate js file apart from the html file where I tried to put the first a event into the html file but the new appended list of items still do not listen.
Cannot think of other work around at the moment, please help to see what would be the cause of it. Thank you.

Maybe simple try this.
$(document).on('click', 'body[data-link="media"] #media_content a')
If your element is dynamic create you should bind the click event on document and target what's element should dispatch the event.This is different to bind click only on element because the event will unbind while you remove the element.
Updated:
I'm not sure I've understand all the script you have but I try to simplify the issue.
This is the jsbin and its work correctly.
JSBin

Jquery fires all element on click when I fire using the class name

I am trying to customize my basicDay view in fullcalendar like if I click on the event it will slide down a div tag with some content.
Here is my code.
eventRender: function(event, element, view,calEvent) {
if(view.name === 'basicDay') {
proj=event.title;
element.empty();
element.append('<div id="flip" class="flip1" onclick="slide()">'+proj+'</div>');
element.append('<div class="down" id="panel">\n\
Project Name: <input type="text" value="'+proj+'"/>\n\
Date: <input type="date" value="'+dt+'"/>');
element.append('</div>');
$(".fc-today").css("background", "white");
}
},
Here I am clearing task elements and add a custom div tag with the project name. If I have more than one event the Div tag will add dynamically.
The thing is, I need to slide down div with the class="flip1" and show the div with the class="down".
This is how I tried to do it.
function slide()
{
$('.down').slideToggle("fast");
}
The problem is if I have more than one event all the div tag is sliding down. But want to slide down the tag which I will click.Sorry for my bad English, please help me resolve this guys. Thanks in advance.

You are trying to open #panel on clicking the the #flip
You can pass the context using this and then select the next immediate #panel
In dynamically created element
onclick="slide(this)"
Change in js
function slide(elem){
var getNextPanel = $(elem).next("#panel");
getNextPanel.slideToggle("fast");
}
Not tested but you can try this. Also note id like panel & flip cannot be same for all the dynamically created element, id need to be unique

Add a dynamic id to your element and then use a function like below
//id is your dynamic id and call this function on that element like `slide(this.id);`
function slide(id)
{
$('#'+id).slideToggle("fast");
}

I finally managed to do this by the below code.
var x=0;
eventRender: function(event, element, view,calEvent) {
if(view.name === 'basicDay') {
x++;
element.removeClass("fc-event");
element.addClass("day-event");
element.children().addClass("day-event");
proj=event.title;
dt=new Date();
dt=event.date;
element.empty();
element.append('<div id="'+x+'" class="flip1" onclick="slide(this.id)">'+proj+'</div>');
element.append('<div class="'+x+'" id="panel">\n\
Project Name: <input type="text" value="'+proj+'"/>\n\
Date: <input type="date" value="'+dt+'"/>');
element.append('</div>');
$(".fc-today").css("background", "white");
}
},
and I wrote the function like this.
function slide(id)
{
$('.'+id).slideToggle("fast");
}
And this function also working fine.
function slide(id)
{
// $('.'+id).slideToggle("fast");
var getNextPanel = $('#'+id).next("#panel");
getNextPanel.slideToggle("fast");
}
If I need to improve my code further please suggest me guy's.Thank you for all your support guys.

You were right. So here is your working example:
function slide(id)
{
$('#'+id).slideToggle("fast");
}

Fullcalendar (v2.x) Getting day-cell from an eventClick?

I'm struggling to retrieve the day clicked when clicking on a multi-days (period) event (eventClick).
Whe clicking on the background cell, it's easy :
function dayClick(date, jsEvent, view) {
//todo: store related day
$scope.selectedDay = date;
}
But when clicking on an event (which is on a period of days), I can't retrieve which day exactly the user was on. (I need to perform a different action depending on the background day) :
function alertEventOnClick(event, jsEvent, view) {
// "event" stores only start and end date without any reference to the current day
// "jsEvent" retrieve the "td" element but fullcalendar HTML structure is complex and it's impossible to go-up to find the day-cell
// $scope.selectedDay = ??
};
I tried playing with "selectable" but "eventClick" JS Event doesn't propagate, and doesn't "select" the day
Thanks

If you don't need to catch event clicks at all, you can just add a class to all events with pointer-events: none;
JSFiddle Demo
eventRender: function (event, element) {
$(element).addClass('clickThrough');
},
IE8
Bleh. There is a hacky method to simulate pointer-events: none; on IE8 but while trying to implement it I found a simpler way to achieve the goal. (The simulated pointer-events hack is described here.)
To get the date at the cursor:
Hide the event table
Get element under cursor
Show the event table
JSFiddle Demo
eventClick: function (calEvent, jsEvent, view) {
var topLayer = $(jsEvent.currentTarget).closest("tbody");
topLayer.hide(); //hide the entire event layer (makes it work with multiple events)
var dayElement = document.elementFromPoint(jsEvent.pageX, jsEvent.pageY); //get the element under the cursor (should be a day cell)
topLayer.show();
alert($(dayElement).data("date"));
}
Better IE8 workaround
(this doesn't seem to work)
So it turns out that anchor tags have a better pointer-events: none; workaround. https://stackoverflow.com/a/18118092/728393
You simply add the attribute disabled="disabled" to the <a> and it can be clicked through.
JSFiddle Demo
eventRender: function (event, element) {
$(element).addClass('clickThrough').attr("disabled","disabled"); //disabled attribute is a IE workaround for pointer-events
},

So I finally found a quick(&dirty ?) solution relying on parsing close DOM Table elements.
From eventClick js event, I can retrieve the currentTarget clicked and go back in the table headers : the first row contains thead headers definition containing cell date mapping.
$scope.alertEventOnClick = function(event, jsEvent, view) {
var columnIndex = $(jsEvent.currentTarget).parent('td').get(0).cellIndex + 1;
var parentTable = $(jsEvent.currentTarget).closest('table');
var dateString = $('thead td:nth-child('+ columnIndex +')', parentTable).attr('data-date');
$scope.selectedDay = moment(dateString);
};
edit: solution OK for 1 event by day. but KO for more than one event by day ...
Another solution can be to determine x/y position of the clicked cell (by counting div/td childs) and map it with view.coordMap.grid.cellDates[position]

Here is my solution:
eventClick: function(event, jsEvent, view) {
var day=$(this).closest('.'+(view.type=='month'?'fc-row':'fc-time-grid')).find('.fc-bg td:eq('+$(this).closest('td').index()+')').data('date');
console.log(day);
}

Here is slicedtoad's solution modified to work with v4 of fullcalendar and also taking into account the window's current scroll position:
eventClick: function(ev) {
var topLayer = $(ev.el).closest(".fc-row");
var eventLayer = topLayer.find(".fc-content-skeleton");
eventLayer.hide();
var dayElement = $(document.elementFromPoint(ev.jsEvent.pageX - window.pageXOffset, ev.jsEvent.pageY - window.pageYOffset));
eventLayer.show();
var current_day = dayElement.attr("data-date");
console.log(current_day);
}

I updated Dane Iracleous's solution slightly to make it work with 1. click on multi-day events when there is more than one on the same day. and 2. this works in month/week/day views.
Using visibility/z-index solved my issue of the 'all day' container shrinking temporarily when the event layer was hidden.
getClickedDate(event) {
//used to get specific date clicked on multiple day event
let topLayer = $(event.el).closest(".fc-row");
let eventLayer = topLayer.find(".fc-content-skeleton");
let initialZIndex = $(eventLayer).css('z-index')
$(eventLayer).css({ 'visibility': 'hidden', 'z-index': '-1'});
let dayElement = $(document.elementFromPoint(event.jsEvent.pageX - window.pageXOffset, event.jsEvent.pageY - window.pageYOffset));
$(eventLayer).css({ 'visibility': 'visible', 'z-index': initialZIndex });
let clickedDate = dayElement.attr("data-date");
console.log('clicked date', clickedDate)
return clickedDate;
}

Execute function on second click in jquery

I have a calendar button that on click opens up a date picker and places the date into an input text box. What I want to happen, is have a second text box auto-fill with the date 30 days into the future. What I am having trouble with is getting this to work with jquery.
HTML:
<tr>
<td align = "center">Entry Date From: <input id="ENTRYDATEFROM" name="ENTRYDATEFROM" type="text" maxLength="10" size="12" value="">
<img height="20"src="calendarsrc" id="entrySrc"></td>
<td align = "center">Entry Date To: <input id="ENTRYDATETO" name="ENTRYDATETO" type="text" maxLength="10" size="12" value="">
<img height="20"src="calendarsrc" id="entrySrc2"></td>
</tr>
JQUERY:
$(document).ready(function() {
$("#entrySrc").click(function(){
gAnytime.fPopCalendar(document.myform.ENTRYDATEFROM);
});
$("#entrySrc2").click(function(){
gAnytime.fPopCalendar(document.myform.ENTRYDATETO);
});
//Tried this but had no success
//$(document).on("change", "#entrySrc", populate);
});
function populate(){
var q = $("#ENTRYDATEFROM");
var dateTo = new Date(q.val());
var newDate = new Date(dateTo.setDate(dateTo.getDate() + 30));
var formatted = padNumber(newDate.getUTCMonth() + 1) + '-' + padNumber(newDate.getUTCDate()) + '-' + newDate.getUTCFullYear();
$("#ENTRYDATETO").val(formatted);
}
function padNumber(number) {
var string = '' + number;
string = string.length < 2 ? '0' + string : string;
return string;
}
This is what my GUI looks like before anything is clicked:
This is what happens when I click the #entrySrc calendar button located to the right of the input text box
I can then click on any date that I wish within that calendar box. This will populate the input text box to the left of it.
How can I execute my populate function on/against that second click located within the calendar box?

There may be a very simple solution to this: simply fire the populate() method when #entrySrc changes.
$(document).on("change", "#entrySrc", populate);
or one of these alternatives:
$("#entrySrc").on("change", populate);
$("#entrySrc").change(populate);
note you're passing populate, not populate().

Based on the very poor documentation here: http://calendarxp.net/tutorials/flat/tutorials/PluginsSDK.htm I would guess you need to do the following:
Open your plugins.js file, which is apparently where to hook into a load of global functions (this control is sooooooo old).
Put your code into the fOnChange template (which I gather will be a nearly empty function):
///////////// Calendar Onchange Handler ////////////////////////////
// It's triggered whenever the calendar gets changed to y(ear),m(onth),d(ay)
// d = 0 means the calendar is about to switch to the month of (y,m);
// d > 0 means a specific date [y,m,d] is about to be selected.
// e is a reference to the triggering event object
// Return a true value will cancel the change action.
// NOTE: DO NOT define this handler unless you really need to use it.
////////////////////////////////////////////////////////////////////
function fOnChange(y,m,d,e) {
.... put your code here ....
return false; // return true to cancel the change.
}
What you put in there should be something of practical use. I would suggest generating a custom event like this:
function fOnChange(y,m,d,e) {
var $e = $(e.target); // (or e.originalTarget or whatever you can find with a debugger!)
$e.trigger("calchange");
return false; // return true to cancel the change.
}
This will require that jQuery is included before their js file.
In your code, listen for it like this for all calendars:
$(document).on('calchange', populate);

Enable Datepicker only when first field has a value

Right now, the End Date selection is disabled. I want to only enable this when a Start Date is selected.
if( $('#datepicker1').val().length === 0) {
$('#datepicker2').datepicker("disable");
} else {
$('#datepicker2').datepicker("enable");
}
This clearly does not work. If I insert value = 'random date' into my first input field, it works fine. I'm not too sure on how do this. Clearly not as easy as I had hoped.
My other problem, or hope, is to disable the dates including and before the first selection.
You know, pick Start Date, and every date before and said date for the next picker would be disabled. But that is a whole other problem.

You can use something like this:
var end = $('#end').datepicker();
// Defining a function, because we're binding this to two different events
function enableEnd() {
end.attr('disabled', !this.value.length) // Enable the end input element if the first one has anything in it
.datepicker('option', 'minDate', this.value); // Set the minimum date to the date in the first input
}
$('#start').datepicker({
onSelect: enableEnd // Call enableEnd when a date is selected in the first datepicker
}).bind('input', enableEnd); // Do the same when something is inputted by the user
It's not really a good idea to enable the datepicker in the second field only after the first has been filled in, because the user can still add things into the second field manually, and you lose the format validation usually offered by jQuery UI datepicker. Instead, we disable the second input element directly.
See it working here: http://www.jsfiddle.net/yijiang/KwhLw/
Also note that we're using the input event here, because although it has less broad compatibility, is better than the usual methods used for keyboard event capturing. See a full discussion on this here: http://whattheheadsaid.com/tag/oninput

Just try this approach -
$('#datepicker1').datepicker({
//your other configurations.
onSelect: function(){
//enable datepicker 2 over here.
}
});

I would use the getDate method and see if it's null (nothing selected/entered), like this:
if($('#datepicker1').datepicker("getDate") === null)
For the other issue, check out the date range demo for the datepicker, it has a start/end date like you're aiming for.

Well, question is answered. For those who want to know what I have, here it is.
To change a Start Date and an End Date (A date range if you will) into an array of individual dates, I used this:
function createDateRangeArray($strDateFrom,$strDateTo) //Changes a Range of Dates to Specific Dates
{
static $aryRange = array(); //Creates an Array
$iDateFrom = mktime(1,0,0,substr($strDateFrom,5,2), substr($strDateFrom,8,2),substr($strDateFrom,0,4));
$iDateTo = mktime(1,0,0,substr($strDateTo,5,2), substr($strDateTo,8,2),substr($strDateTo,0,4));
if ($iDateTo >= $iDateFrom)
{
array_push($aryRange,date('Y-m-d',$iDateFrom)); // first entry
while ($iDateFrom<$iDateTo)
{
$iDateFrom += 86400; // add 24 hours
array_push($aryRange,date('Y-m-d',$iDateFrom));
}
}
return $aryRange; //Returns to step 1 and adds another value into the array
}
To get every date from my SQL Database and push them into a single array, this was used:
$query = "SELECT startdate, enddate FROM classdetails";
$results = mysql_query($query);
while ($arrays = mysql_fetch_array($results))
{
$aryDates = createDateRangeArray($arrays['startdate'],$arrays['enddate']);
echo "<br />";
}
So now I have managed to get every date range from an entire list of classes and made one huge array.
Now I had to use this array to actually disable the dates. Using the functions of which Yi Jiang has no generously wrote (thank you to everyone who helped me), the next step is:
$(function()
{
//To enable End Date picker only when Start Date has been chosen (And to disable all dates prior of said date)
var end = $('#enddate').datepicker( {numberOfMonths: 3, beforeShowDay: checkAvailability,});
// Defining a function, because we're binding this to two different events
function enableEnd() {
end.attr('disabled', !this.value.length) // Enable the end input element if the first one has anything in it
.datepicker('option', 'minDate', this.value); // Set the minimum date to the date in the first input
}
//End of function
// Datepicker
$('#startdate').datepicker({
numberOfMonths: 3,
beforeShowDay: checkAvailability,
onSelect: enableEnd // Call enableEnd when a date is selected in the first datepicker
}).bind('input', enableEnd); // Do the same when something is inputted by the user
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() {$(this).toggleClass('ui-state-hover');}
);
});
//End of Function
//Disabling all dates where selected room and speaker is unavailable
var $myBadDates = new Array (<?php foreach($aryDates as $disabledate) { echo " \"$disabledate\","; } echo " 1"; ?>); //Creates the array (The echo " 1"; is merely to close the array and will not affect the outcome
function checkAvailability(mydate){
var $return=true;
var $returnclass ="available";
$checkdate = $.datepicker.formatDate('yy-mm-dd', mydate);
for(var i = 0; i < $myBadDates.length; i++)
{
if($myBadDates[i] == $checkdate)
{
$return = false;
$returnclass= "unavailable";
}
}
return [$return,$returnclass];
}
//End of function
The only thing in my body right now, for testing purposes, are:
<!-- Datepicker -->
<h2 class="header">Datepicker</h2>
<span>
Start Date: <input type="text" id="startdate" />
</span>
<span>
End Date: <input type="text" id="enddate" disabled="disabled" />
</span>
It's long, yes, but it works. Thank you to everyone who helped me get this working.
The edit was me changing a function to a JQuery function that exists (of which for some reason I did not use in the first place); toggleClass. Thanks for picking that out.