I'm using fullCalendar and have it so that when an events is clicked the qTip is generated (showing a bunch of details about that element). I want to have a few links within the qTip that are based on the element being clicked (thus, dynamic links). The links will provide a way to edit the underlying database record which the fullCalendar event is based on. I'd like to have some call back way of handling this.
Here's how I build my qTip in fullCalendar:
eventRender: function(event, element) {
element.qtip({
content: {
text: "Loading WO info...",
ajax: {
url: "/schedule/get-wo-details/",
type: 'GET',
data: { woID: event.woID },
dataType: 'json',
success: function(data, status) {
var content = "<table class='qtip-table'>"
content += "<table>...add content here...";
content += "<center>";
// Here are my links...
content += "<a href='#'>Unschedule</a> | ";
content += "<a id='qtip-link' href='#'>Edit Note</a>";
content += "</center>";
this.set('content.text', content);
}
}
},
show: {
event: 'click',
},
hide: {
fixed: true,
delay: 1000
},
position: {
viewport: $("#calendar"),
effect: false,
at: "left-center",
my: "right-center"
}
});
I'm wondering if I can do something like:
$("#qtip-link").click(function(){
// Do some ajax magic here...
});
This, so I've found out, doesn't work. How might I go about achieving this? It seems like a simple thing to do but can't seem to put together a decent Google search query to find the answer.
Thanks
I believe I figured it out. In my eventRender
method where I create the qTip
itself, I have the following code:
var e = event.woID;
content += "<a href='#' onclick=unscheduleEvent('" + e + "')>Unschedule</a> | ";
That simply creates a variable equal to some data I stored in the event
when I generate the calendar. The content
is the HTML
to go into the qTip
- so I add a link using my variable to pass to the onClick
event.