CODEWITHSUNDEEP
jqueryruby-on-railsfullcalendarqtip2
Jon La Marr
Jon La Marr

Reputation: 1398

Jquery qtip "is not a function" - Ruby on Rails

I'm trying to get qtip to work with rails FullCalendar, but haven't been able to get past the error "is not a function" when setting up a qtip. I'm just getting back in to Jquery/Rails and apparently this is typically a js file load issue. However, it seems like the js files are being loaded properly (in correct order and only once). Here are (some of) my js files:

<script src="/assets/jquery.self-d03a5518f45df77341bdbe6201ba3bfa547ebba8ed64f0ea56bfa5f96ea7c074.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-8e98a7a072a6cee1372d19fff9ff3e6aa1e39a37d89d6f06861637d061113ee7.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery.qtip.self-c86ab2c0151d0748df498fc4603ec759f565e7966405872bad084728da15c92c.js?body=1" data-turbolinks-track="true"></script>

Looks to me like the js files are loading properly. I placed the calendar in application.js for now:

//= require jquery
//= require jquery_ujs
//= require jquery.qtip.js

$(document).ready(function(){
    $("#calendar").fullCalendar({
        eventSources : [{
            url: 'url_to_get_data'
        }],
        eventLimit: true,
        eventRender: function(event, element) {
            element.qtip({
                content: event.description
            });
        }
     });
});

I pulled this eventRender example straight from the FullCalendar's eventRendering section. This won't work even if I try to put a qtip on an input.

Anyone see anything glaringly wrong?

Upvotes: 1

Views: 4472

Answers (1)

Jon La Marr
Jon La Marr

Reputation: 1398

Ended up just solving this myself, so wanted to post the answer for anyone with the same issue. It turns out that I had to download The Qtip .js file and place it in assets/javascripts, as well as still include it in the application.js file. I guess I mistakenly thought that rails would just do this for me.

Not sure if it matters, but the order of my require statements look like this:

//= require jquery2
//= require jquery_ujs
//= require moment
//= require fullcalendar
//= require jquery.qtip.js

One last thing - I did have to modify the code from the original example. Here is my modified code, checking for nulls:

$(document).ready(function(){
    $("#calendar").fullCalendar({
        eventSources : [{
            url: 'url_to_get_data'
        }],
        eventLimit: true,
        eventRender: function(event, element) {
            if (element && event.description) {
            element.qtip({
                content: event.description,
                hide: {
                    fixed: true,
                    delay: 500
                }
            });
        }
        },
        eventClick: function(calEvent, jsEvent, view) {
            // Open in new window
            url = window.location.href;
            window.open(url + "/" + calEvent.id);
        },
        eventMouseover: function(event, jsEvent, view) {
            // Todo
        },
        eventMouseout: function(event, jsEvent, view) {
            // Todo
        },
    });
});

Upvotes: 2

Related Questions