Search code examples
fullcalendarqtip2

qtip - add a few links into the tool tip itself?


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


Solution

  • 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.