如何在Rails-3中解决有关jquery的错误

时间：2015-03-23 06:03:19

标签： javascript jquery ruby ruby-on-rails-3

我遇到一个问题，而一些jquery脚本链接正在Rails application.html.erb文件中执行。实际上我正在尝试打开日历，而用户将使用一个第三方jquery库单击文本字段。页面加载后没有发生这种情况并且没有rails错误但在控制台选项中我收到以下错误。

Uncaught TypeError: Cannot read property 'createPlugin' of undefined

我认为上面的错误是由于页面找不到通过application.html.erb中的链接给出的相应脚本文件，但是通过使用简单的HTML和JS它正常工作。

我的一些代码如下所示。

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>MakeCalender</title>
  <link href="/assets/jquery.datepick.css" rel="stylesheet">
  <script src="/assets/jquery.plugin.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script src="/assets/jquery.datepick.js"></script>
 <script src="/assets/common.js"></script>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>
<% if flash[:color]=="valid" %>
    <div class="flash-message">
      <div class="container container_12 clearfix">
        <div class="grid_12">
          <p><%=flash[:notice]%></p>
        </div>
      </div>
    </div>
<% elsif flash[:color]== "invalid"%>
    <div class="flash-message">
      <div class="container container_12 clearfix">
        <div class="grid_12">
          <p><%=flash[:alert]%></p>
        </div>
      </div>
    </div>
<% else %>
    <div class="flash-message">
      <div class="container container_12 clearfix">
        <div class="grid_12">
          <p><%=flash[:notice]%></p>
        </div>
      </div>
    </div>
<% end %>
<%= yield %>

</body>
</html>

的观点/压延/ index.html.erb

<%= form_for :calenders,:url => {:action => 'create'} do |f| %>
Enter Your Date :<%= f.text_field :date_today,placeholder:"Please enter your date",:id => "popupDatepicker" %>
<%=  f.submit "Submit" %>
<% end %>

的javascript / common.js

$(function() {
    console.log('datepick');
    $('#popupDatepicker').datepick();
});

请在检查代码后帮我解决此问题。

1 个答案:

答案 0 :(得分：0)

在使用任何其他jQuery插件或库之前，您需要在顶部包含核心jquery库。请按照以下顺序在您的代码中包含您的jQuery库 -

<!--This should be on top of any other jquery library or plugin-->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--Include rest of your plugins-->
<script src="/assets/jquery.plugin.js"></script>
 <script src="/assets/jquery.datepick.js"></script>
 <script src="/assets/common.js"></script>