I have fullcalendar setup to grab the html5 data attribute "event" from external events. For reasons unnecessary to get into, I am needing to access that data in the drop event handler in fullcalendar, but when I use var foo = $(this).data(event);, it seems to stop the script at that point, but only in Firefox, and no errors show in the console.
Here is a jsfiddle showing it. For some reason, the calendar isn't working right, but that is not my problem. The problem shows itself when you drop the event anywhere on the calendar. In chrome, you will see a total of 3 alert boxes. In Firefox, only two.
You are using the wrong method here.
.data() is for storing arbitrary data,
Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.
[…]
The .data() method allows us to attach data of any type to DOM elements
This "data store" has little to do with HTML5 data attributes.
To read those, you should simply use: $(this).attr('data-event')
Related
I'm getting this strange behaviour in a very specific set of inputs on one my applications. I create some inputs and I can see them as I created them on the Elements panel (google chrome), but the way the browser renders it is different.
Note how the input is renders with comma instead of a point, but the value attribute uses a point
When I get a referente to that element using the selector API, I get this:
A direct reference to the Dom Element will return 11,00. The tag has 11.00 and jQuery returns the 11,00. I've removed all js that interacts with this element (masks, events, etc) and the issue still happens.
I've been swearing at the DOM for a day and a half, but I know this is most probably an issue with my application. What bothers me the most is that the browser does not honor what I see in the elements panel.
This is the small piece of code that creates the element, stopped right before the tag is created. Note the variables values in the right panel:
Could someone give me a hint about what could be causing this difference in between element, view and attributes? If possible, I'd like to know what/how this is happening in depth.
Thank you in advance
I've been using dynamic actions based on custom events in one of my Oracle Apex pages. I am binding my event to the document and then using a 'DOM Object' selection type (of document) in order to specify the context for the event.
This works in Apex 4.2, however I have just come across this in relation to Apex 5:
https://docs.oracle.com/cd/E59726_01/doc.50/e39143/toc.htm#BAJDAGJG
5.10 Deprecation of Dynamic Actions Based on DOM Objects
Dynamic actions based on DOM Objects have been deprecated. Change your
dynamic actions to use a jQuery Selector or JavaScript Expression
instead of DOM Object.
My question is, how can I use a jQuery selector in order to detect events bound to the document? When I try using a jQuery selector of document, the dynamic action does not fire. I strongly suspect that this is because APEX wraps the selector in quotes when the dynamic action is parsed, rendering it useless for selectors on the document or window objects.
I am already aware that in the standard jQuery world I would just use $(document).
I already know that I can bind events to different DOM elements. I'm not interested in that. I am interested specifically in binding to document.
jQuery selectors return element nodes. Your event is bound to the document node, so there's no way to get at it with a jQuery selector. $(document) is not strictly speaking a selector. I believe $(":root").parent() returns the document object but that doesn't help you, since Oracle only lets you use selectors, not methods.
Oracle got back to me earlier with my Apex 5 workspace, so I've been having a play. The solution is in the documentation you quoted. You can't use a jQuery selector in your dynamic action's Selection Type, but you can simply use a Javascript Expression, with the value: document
I tested this by creating a button pointing to the URL:
javascript:apex.event.trigger(document,'testEvent');
I created a dynamic action responding to the Custom Event testEvent, Selection Type Javascript Expression, expression value document. It works fine, and the button now triggers an alert via a custom event handled at the document.
Short Example: How a dynamic action custom event placed ( oracle apex 18.1 ) to refresh interactive report section :
I have event objects I load into fullcalendar. Each event has a custom resources array field attached showing who the events are for. Loads fine. User can click on the event and eventClick gives me the event with the resources. I open a dialog to edit. After saving changes to the db, I want to update the calendar using updateEvent. The object I use to update contains the full resources array and all appears to update fine.
Here's the problem: Now when I click on the same event to edit again, the event returned by eventClick has the resources array length set to 0. i.e. all the resources elements are missing.
Thought maybe I wasn't updating with the 'original object' so tried removeEvents followed by renderEvent but get the exact same behavior.
What am I missing?
btw, using fullCalendar 1.6. I can just reload the calendar and it's fine, but I don't want to 'cause it flickers and means unnecessary bytes over the wire.
update
So if I use appointment.resources = angular.copy(appointment.resources) then everything works. I'm not clear on why though. Is it because the attached resources were from an angular $resource and when that refreshed the reference to the previous objects point nowhere?
I think it could be a reference problem.
When you create a fullCalendar event, it wraps the object to a new one.
So, if you do something like:
var myEvent = {id: 1, title: "MyTitle", resources:[1,2,3], start:moment()};
$.('#calendar').fullCalendar('renderEvent', myEvent);
It create another object, with some specific properties like backUps, specific methods, etc... You can access this object with:
var fcEvent = $.('#calendar').fullCalendar('clientEvents', myEvent.id);
But now:
fcEvent.resources != myEvent.resources
Anyway, is difficult to know exactly what's the problem without a piece of code. Is possible to create a Plunker?
You can use my public Skeleton for ui-calendar
In the following getElementsByTagName("p")[0] and getElementById("demo") access the same element.
Both of the following work, so I can't figure out why the jquery data function is even needed. Is the second not portable to all browsers.
$(document.getElementsByTagName("p")[0]).data("funcZ", function() {console.log("ZZZZZ")})
$(document.getElementById("demo")).data("funcZ")()
document.getElementsByTagName("p")[0].funcX = function() {console.log("XXXXX")}
document.getElementById("demo").funcX()
According the the jQuery website:
The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore free from memory leaks. jQuery ensures that the data is removed when DOM elements are removed via jQuery methods, and when the user leaves the page.
It's possible that by attaching random fields to a DOM element, when the DOM element disappears, the fields remain in memory. It looks like jQuery handles that for you.
The $.data() method is perfect for hiding data as opposed to attaching it to a data-attribute. It's easily accessed by key/value, great for storing state information when creating plugins, or really anything.
I want to initialize a global array of events everytime new events are fetched from the database. T explain some more, i want my events in a global array on the client side so that i can filter events without an ajax call. For example, if i have events, and each event has a country associated with it, i have multiple select box where you can select one or more country. I use the clientEvents functions to filter events taht match the criteria but the problem comes when the user starts reducing the filters. Then i need the events that i have already filtered out and for that i dont want to make an ajax call. So my approach is to have a global array of events, and when the user clears the filters, i just simply refectch all the events from that array.
Now the problem is , where to initialize that array?? if i do it in eventAfterRender, it changes in when the filtered events are being rendered, if i do it in viewDisplay, it isnt even initialized, i dont know why, i read somewhere that viewDisplay gets called before the events are rendered if you are using json feed. So i am stuck.... Please any help would be great.
You could use a function as the feed:
http://arshaw.com/fullcalendar/docs/event_data/events_function/
Then you can load the events from wherever you want and combine your array with data from a json source. It is up to your function to decide where to grab the data.
I suppose you will have to call the refetchEvents method after some external factors like choosing another country is done (your function providing events should take the selection of countries into concideration when generating the events to display).