I want to be able to find the parent "td" of a day on a datepicker calendar, but can't find a way to do this.
Example of the outpout of a datepicker :
<td class=" " data-year="2013" data-month="6" data-event="click" data-handler="selectDay">
<a class="ui-state-default" href="#">22</a>
</td>
There is a "data-year", "data-month" but no "data-day".. why ? I don't want to have to fetch each element to find the good one for every day object i want to get.. i should be able to access a day element directly...
The purpose is to add a class to the days i want (like an highlight class for example). I can't use "beforeShowDay"...everyone is talking about this, but it don't work for me since i need to add the class after the page load (example: booking a specific date by ajax and updating the calendar by highlighting the selected days without reloading the whole calendar or page)
I don't want to use "onselect" too, i need to be able to highlight my dates (by adding a class) without this AND be able to do it after the calendar is loaded.
To be more simple, i would like to access a day element like i access a div with
$('#divname").css(...)
for example. Or a similar way to change directly a day element.
Thanks for the help
Related
I am working on Web Accessibility. Our client test the site with web accessibility expert and give us a manual that the site needs to be fixed or modified.
On Date Picker, expert comments as follows
Use ARIA roles and properties to define the date picker.
See Appendix A, "Accessible date picker requirements" for detailed information.
NOTE: If a month or date is disabled, user aria-disabled="true" on the active element to indicate the disabled state.
Here is the code example
<lable>
Date:
<input id="dp" type="text" />
</lable>
/** JS CODE **/
$(function() {
$('#dp, #dp1').datepicker({
defaultDate: new Date(),
minDate: new Date()
});
});
My fiddle: https://jsfiddle.net/q68jyebL/17/
I am using jQuery Date Picker. Keyboard user can not move the cursor before the minDate. For example, if the minDate is set to today keyboard user can not select or move the cursor before today. Now is it necessary to mark the previous day(that are disabled) with aria-disabled = 'true' ?
My understanding is if the user are not allow to move before the minDate it makes no sense to mark the disabled date with aria-disabled.
Any kind of suggestion appreciated :).
The short answer is 'yes'. The unselectable dates must have aria-disabled='true'.
While you are correct that the unselectable dates are not focusable using the keyboard, a screen reader user can navigate to those dates using screen reader shortcut keys. Since the month is a <table>, a screen reader user can use ctrl+alt+arrowkey to navigate around the table as if it were a spreadsheet. The visual focus is not moving while using the screen reader shortcut key, but the screen reader will read the data in the table cell. It looks like jquery is using a style sheet (class='ui-datepicker-unselectable ui-state-disabled') to visually make the unselectable dates look different from regular dates, but screen readers don't know the intent of style sheets. You need to tell the screen reader that the cell is disabled via aria-disabled='true'.
This is what the generated html should look like for the disabled dates:
<td class="ui-datepicker-unselectable ui-state-disabled" aria-disabled="true">
<span class="ui-state-default">4</span>
</td>
I don't know how much control you have over the generated jquery date picker and whether you can inject aria-diabled='true' into it. If you do have some control, there's another change you should make too. The table headers just have 'su', 'mo', tu', etc for the days of the week. A screen reader is just going to read that text as is. You should have screen reader friendly text such as 'sunday', 'monday', tuesday', etc. There is a title property on each table header but the title is not going to be read. You should have two pieces of text for each table header cell. A visible label that is hidden from screen readers ('su', 'mo', 'tu') and a visually hidden label that is available to screen readers ('sunday', 'monday', 'tuesday').
The current html that jquery generates looks like this:
<th>
<span title="Monday">Mo</span>
</th>
What you want is:
<th>
<span aria-hidden='true'>Mo</span>
<span class='visually-hidden'>Monday</span>
</th>
The visually-hidden class should be defined in Appendix A of your report, near the beginning of the Appendix (if I recognize the style of the report correctly). For those reading this answer that don't have the report, you can see WebAIM's guidance on hiding content and the not-yet-approved W3C article on hiding content.
I have a page that is a report from a database and I'm working on modifying how the filtering works. The intention is to allow the user to select possible values form a list that will be used to filter the resulting report. There are too many values to do this with checkboxes. I'm defining a multiple selection list box with this:
<g:select name="country" from="${countryDataList.KOUNTRY}" value="${params.country}" multiple="true" />
countryDataList is a List<> of objects with a name and a value which I create in the controller. I'm able to get the selected counties and process them without an issue.
But when the page returns from the controller with the filtered report, only the first selection in the list is selected. It doesn't re-select all of the items that the user selected. I am passing the params.country object back from the controller as
country:params.country
I saw some posts about this not working, but they are all from several years ago. Am I missing a vital step?
Ahh sorry, I was reading it on the phone initially and missed the point.
So what you want is a way of sending a multiple select box to a confirmation page. If I understand correctly?
Anyways how many objects in the select are we talking massive or a dozen couple of dozen or so ?
What I did was use check boxes and did a confirmation which shows the selection ticked in check boxes.. So this is the confirmation page that loads in https://github.com/vahidhedayati/mailinglist/blob/master/grails-app/views/mailingListEmail/confirmcontact.gsp
this page which is where multiple attachments selected from the schedule re-appear...
https://github.com/vahidhedayati/mailinglist/blob/master/grails-app/views/mailingListAttachments/_mailerAttachmentsDisplay.gsp.
Please note advice below is all conceptual stuff and there may be easier ways than this
Other than that You could create a taglib call on the confirmation page https://github.com/vahidhedayati/ajaxdependancyselection/blob/master/grails-app/taglib/ajaxdependancyselection/AutoCompleteTagLib.groovy#L55 which takes in your arrayList you could probably convert it to JSON pass it into the javascript that you load in within the taglib (on mine further down it loads this page in)
https://github.com/vahidhedayati/ajaxdependancyselection/blob/master/grails-app/views/autoComplete/_selectJs1.gsp#L23
and look to reselect them using javascript... as I say I haven't tested the last bit, the first bit i.e. checkbox works it is/has been in use.
Years later from you I just had the same problem. What I figured out is: it happens when params.country is an array instead of a Collection (i.e. an ArrayList).
A workaround for this if you want to stick to the array type is at the value attribute of the tag doing this: params.country?.findAll().
I have implemented a Fullcalendar on a RoR page.
I would like to add a list (index) below the calendar showing events for the day the user selects. Click on a day and that days events list below the calendar. I'd like it to be dynamic (don't reload the whole page).
Please point me in the right direction to learn how to do this.
I have a subscription to Railscast. But, I'm not sure what to look for.
Thanks
You can use the dayClick callback to call an ajax function which populates your index/list
I think you should make a javascript function , that listens to the click event of 'tb' in Fullcalendar . It should trigger ajax call to fetch events from the database , filtered by date . This Railscast is a very nice example how ajax calls refresh some page content without reloading the whole page .
I'm using event calendar plug-in on rails 2.3.8 and I need to know whether I can change the calendar size dynamically. For example in one page I need to show calendar in full page in another page I need to put that same calendar in small div. Is it possible with the event calendar plug-in ?
Without the real example, I can only give a sketch how it could possibly work:
Include the view in something like:
<div id="smallcal">
<%= event_calendar %>
</div>
Add then a stylesheet that copies the rules of event_calendar.css, but modifies them like in the following example:
#smallcal > .ec-calendar { ... modified rules here ... }
So your modified rules will match better only for your variant where you want to make the calendar smaller. Perhaps it is possible to ensure that the calendar is smaller by including:
div#smallcal {
width: 200px;
...
}
thanks in advance for any input. I am using struts2 and jquery in this app.
I tried to use displaytag for pagination but my tables have images and there wasn't a way I could make displaytag work with images.
So now I have custom coded pagination which uses <s:subset> which works great so far except that I don't know how to make it go to another page.
Basically in <s:subset> I just want to change the start attribute and then refresh my JSP. My code evaluates the start attribute correctly with a given page number.
My s:subset tag is like below,
<s:subset source="pageableList.pagedList" count="pageableList.pageSize" start="pageableList.start" >
<s:iterator>
I think I want to use <s:url> to display my clickable page numbers but I'm having trouble there.
I have my page numbers in a list (which I evaluate in my action class right after my search completes), then in my JSP where I need to display the clickable page numbers, I iterate through the list, displaying the page numbers like below -
<s:iterator value="pageNumList" > | <a href='#'> <s:property/> </a> </s:iterator>
I guess I need to pass the clicked value of page number to the action class, then since the search results are in a list in the action class, without hitting the database again just display the results page with the new value of start attribute.
Any ideas how I might do that? I have been considering using a Decider attribute with <s:subset> but maybe there is a simpler way?
Thanks again for any input.
Regards,
veeCan
If you do not want to hit your DB again, cache the results of the initial query in RAM in your Action class (reference a static cache somewhere). Also, you don't have to go with a cache-all-or-nothing approach -- you can cache the first N pages and then when you near the end of the cache, fetch the rest. If you do it right, you can maintain minimum RAM footprint but preserve a snappy user experience that leverages user think time (depends on your app).