I'm working on a php-html-javascript project and I'm really going crazy with this problem.
The project uses jquery datetime picker and everything is fine (the datetime picker works on other pages and also in the "affected ones"), but when I'm trying to use it on a dynamically created element the date time picker loses interactivity: can't click it or change year/month, it only closes when there's a click on another element. It doesn't even trigger the "onSelect" event so I can't use it.
OTHER INFORMATIONS:
- The div associated is in the page (DOM element) but is cloned as a new div ($.clone())
- The datetime picker is associated with the element when the div is fully created (callback), so there is no possibility of not-loaded element
- The datetime picker displays on click but isn't interactive.
I tried for days but I can't solve this. Hope you all can help... Thanks!
As far i know the problem is occurring because of clone.If we use clone with true as the argument then the events and properties associated with the old element copies to cloned element. May be when you click on the calendar check whether the date is been displayed on the first text box. If it is so then there must be problem with the cloning.
Related
I wrote a custom Polymer element that lets the user pick a month. You can look view the code at https://github.com/HoverBaum/month-picker
No I want to use this to select a range of dates. So the user should select a start and and end.
I added two of my elements to a page, to try this out. However for some reason I can only change the selection of the second element. This looks like the two are somehow interfering with each other. Usually I would say "of cause they use the same ids etc." but I was thinking Polymer would take care of these things.
Here is my little demo page:
<div id="timespan">
<span>Start <month-picker></month-picker></span>
<span>End <month-picker></month-picker></span>
</div>
The way the works is that it shows the selected date and when you click it a dialog is opened that lets you change the selected month. But for some reason both element only open the dialog for the second .
Was able to solve this problem by sticking more closely to the Polymer syntax. I was trying to not define everything in the options object handed the Polymer function. As it turns out that prevented me from accessing the right dialog.
We are making a web application where users can create theire own calendars. They should be able to create multiple calendars (all in view agendaDay) on one page. There are external events that have to be dropped on the calendars to make appointments. Everything we want to do is working like a charm!
But we have 1 problem and we can't seem to get a solution for it.
We have a second (month) calendar (dynamicly created) and we are using this calendar to navigate between days. When a user clicks on a day we use gotoDate to change the FullCalendars day.
This is where the problem comes in. When we use gotoDate on all the calendars on the page it's not possible drop the external events on the first calendar. Dropping the events on de second or third calendar is not giving any problems.
What i have seen is that the fullCalendar gets destroyed in the renderView function in the fullcalendar.js on line 724 (version 2.2.6). After this the fullcalendar has been rendered again.
When i uncomment the destroy the problem is solved but then ofcourse the drop event gets initialized for second time (or third, or fourth).
I'm unable to find a solution so trying to find some help for this.
See my code on: http://jsbin.com/pubelo/1/
I have also submitted this to the FullCalendar issue tracker but i'm trying to find a fast solution for now.
Update 1
Still looking into the FullCalendar.js code. I have noticed that the problem is solved when i remove line 6414 in the destroy function.
this.el.empty();
But removing that line results in double javascript events.
Update 2
Changed the jsbin link.
Update 3
I have noticed that the handler 'documentDragStart' isn't called on the first calendar when using the gotoDate.
Update 4
Problem turns out to be in "var Grid = fc.Grid = RowRenderer.extend({" unbindHandlers function.
Because the seconds calendar is calling the unbindHandler after the first calendar called the bindHandlers the dragstart has been removed and only applied once (to the last calendar).
Haven't found a solution tho...
Workaround / solution
Got a work around for the problem.
I'm destroying both calendars. After that i initialize both calendars again with defaultDate paramater set to the correct date.
This seems to work fine for now.
Got a work around for the problem.
I'm destroying both calendars. After that i initialize both calendars again with defaultDate paramater set to the correct date.
This seems to work fine for now.
Update
Problem had been fixed by Arshaw and released in the newest version 2.3.0.
I am using the Anytime datepicker on some input elements.
This is how it's set on an element:
AnyTime.picker(element_id)
With element_id being a string containing the id of the element.
When the element is clicked, it brings up the Anytime datepicker control.
It works OK, but I want to prevent it from firing in some situations, if some conditions are met. I can't seem to find a decent way to do that.
More specifically, I want to inhibit it when browsing from a mobile device, and use the HTML5 date dialog instead (or just a text input, if it's not available). I've found a way to have the HTML5 date dialog show up when the site is in "mobile layout", using media queries in JavaScript (window.matchMedia()), but I end up with both Anytime and the HTML5 date dialog tied to to the element, and clicking it will bring up both. I want Anytime to not show up in this case...
I can't find anything that works, short of modifying the Anytime source to fire only conditionally...
I've tried removing the datepicker with Anytime_noPicker(), but it doesn't work, and it would be a very un-elegant solution anyway, if it did work.
Instead calling AnyTime.picker() every time, you can put it inside the else condition for your window.matchMedia() test. For example:
if ( window.matchMedia(...) )
// use input type="date" here
else
AnyTime.picker('element-id');
Another answer that might be a better solution for you is to test whether the browser is actually supporting the type="date", and only invoke AnyTime.picker() or $().AnyTime_picker() if it does not. For example:
if ( document.getElementById('my-date').type != 'date' )
AnyTime.picker('my-date',{...});
I'm testing TagDragon jQuery plugin, it's exactly what I need, but is has one annoying "feature", when I click the scrollbar in the suggestion list, it hides it's results. On the other hand jQuery autocomplete plugin doesn't lose the focus on the input field and that's why it doesn't hide its results. But that plugin doesn't provide the functionality I need, so I can't just replace tagdragon.
I've studied jQuery autocomplete code and I can't understand how they keep the focus on the input field, I just can't find the code responsible for that!
So the question of the day is: How to keep the focus on the input when using the scrollbar in the result suggest list?
P.S. Also I have a question of how jQuery autocomplete plugin does it, because it looks like magic to me after studding the code for an hour.
I just asked a similar question, and nobody answered it, so I basically tweaked my own code until I figured out a working solution.
After investigating some of the other pickers out there, I realized that the trick is not to add an event that closes the list on blur, instead simulate a blur event by checking other possibilities by doing the following:
upon the opening of the list, add a click event to the document that
checks to see if the click is not on in the active input, and not on
the active list. If this is true and the click is in fact on a non-listy
part of the document, then close it.
add an event to each list item in the suggest list (when the list is
open only) that selects the value and closes the list.
add an keydown event to the input itself so if the user hits enter,
it changes the value and closes the list.
I am looking for javascript for enabling/disabling two date range/date
prompts in Cognos.
Does anyone have any javascript for disabling/enabling two date range prompts? If I select the Date1 prompt, then the Date2 prompt has to be greyed out and vice versa.
I am using Cognos 8.3 SP2.
How about taking the approach of conditionally rendering one date prompt or another based upon a selection from a radio button or combo box? Doing this would ensure that only one prompt is selected, and would not require javascript.
First off, I'll admit I usually put jQuery into my Cognos reports nowadays. If you don't have the ability to put it into a local library, you can link to the Google hosting of it. You do this using an HTML Element with a script tag inside it (detailed explanation here).
Second, you can put HTML Element (div or span tags with an id) around the prompts. This gives you a way to easily select them.
Third, you bind a function to each one (using .click() ) which uses the .hide() jQuery function on the other.