【问题标题】:Jquery qtip "is not a function" - Ruby on RailsJquery qtip“不是函数” - Ruby on Rails
【发布时间】:2015-05-08 15:27:48
【问题描述】:

我正在尝试让 qtip 与 rails FullCalendar 一起工作,但在设置 qtip 时无法解决“不是函数”错误。我刚刚回到 Jquery/Rails,显然这通常是一个 js 文件加载问题。但是,似乎 js 文件正在正确加载(以正确的顺序并且只有一次)。以下是(部分)我的 js 文件:

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

在我看来,js 文件加载正常。我现在将日历放在 application.js 中:

//= 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
            });
        }
     });
});

我直接从FullCalendar's eventRendering section 中提取了这个eventRender 示例。即使我尝试在input 上添加 qtip,这也不起作用。

有人发现有什么明显的错误吗?

【问题讨论】:

  • 我看到你从FullCalendar docs复制了代码。知道它在文档中提供了一个很好的机会它是有效的。请在问题中添加所有相关详细信息,即使这只是链接。
  • 刚刚试过了——$(element).qtip(...) 抛出了同样的错误——“Uncaught TypeError: $(...).qtip is not a function。”

标签: jquery ruby-on-rails fullcalendar qtip2


【解决方案1】:

最后自己解决了这个问题,所以想为有同样问题的人发布答案。事实证明,我必须下载 The Qtip .js file 并将其放在 assets/javascripts 中,并且仍将其包含在 application.js 文件中。我想我错误地认为 Rails 会为我做这件事。

不确定是否重要,但我的 require 语句的顺序如下所示:

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

最后一件事 - 我确实必须修改 original example 中的代码。这是我修改后的代码,检查空值:

$(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
        },
    });
});

【讨论】:

  • 谢谢。我只需要将 qtip js 和 css 导入到项目中