jQuery UI datepicker与foundation和form_tag不起作用 [英] jQuery UI datepicker with foundation and form_tag not working

问题描述

我是jQuery的初学者，我正在尝试实现一个日期戳。我的Gemfile中有$ code> jquery-ui-rails gem。我正在使用基础，我的表单是：

 < div class =row search-area> 
<％= form_tag search_index_path，方法：：get do％> 
< div class =small-12 medium-1 large-1 columns search-field> 
<％= label_tagFrom，nil，class：right inline％> 
< / div> 
< div class =small-12 medium-2 large-2 columns search-field> 
<％= text_field_tag（：start_date，params [：start_date]，：class =>date-field）％> 
< / div> 
< div class =small-12 medium-1 large-1 columns search-field> 
<％= label_tagTo，nil，class：right inline％> 
< / div> 
< div class =small-12 medium-2 large-2 columns search-field> 
<％= text_field_tag（：end_date，params [：end_date]，：class =>date-field）％> 
< / div> 
< div class =small-12 medium-1 large-1 columns search-field> 
<％= label_tagGuests，nil，class：right inline％> 
< / div> 
< div class =small-12 medium-2 large-2 columns search-field> 
<％= number_field（：number_of_guests，params [：number_of_guests]，in：1.0..20.0，step：1.0）％> 
< / div> 
< div class =small-12 medium-3 large-3 columns> 
<％= submit_tag搜索，名称：nil，：class => 按钮％> 
< / div> 
<％end％> 
< / div> 
  

在 application.js 我有： / p>

  // = require jquery 
 // = require jquery_ujs 
 // = require jquery-ui 
 // = require foundation 
 // = require_tree。 
 
 $（function（）{$（document）.foundation（）;}）; 
 
 $（function（）{
 $（'。date-field'）。datepicker（）; 
}）; 
  

而在 application.css.scss I有：

  * = require_tree。 
 * = require_self 
 * = require foundation_and_overrides 
 * = require jquery-ui 
 * / 
 
 @importfoundation_and_overrides; 
  

问题是我的文本字段保留为文本字段，当我点击它们时没有日历弹出。

阅读这个问题我试着停止我的服务器，运行 bundle update 然后运行 bundle exec rake assets：precompile 。这没有办法。

我还试图用Chrome中的开发人员工具进行一些挖掘。当我检查应该显示datepicker日历的文本字段元素，然后在开发人员工具中单击'sources'时，有一个'app / jquery-ui'文件夹包含大量的css文件。当我点击网络并重新加载页面时，我看到的唯一的javascript文件是'modernizr.self.js'，它显然位于'assets / vendor /'。

这是不是意味着jquery-ui javascripts没有被编译？如果是这样我怎么解决这个问题？

经过一番搜索和进一步调试 - 我认为问题可能是与资产管道，而且$ code> application.js 根本看不到。

解决方案

当文档准备就绪时，可以调用datepicker。像下面的代码。

  // = require jquery 
 // = require jquery_ujs 
 // = require jquery-ui / datepicker 
 
 $（document）.ready（function（）{
 $（'。date-field'）。datepicker（）; 
}）; 
  

I'm a beginner with jQuery and I'm trying to implement a datepicker. I have the jquery-ui-rails gem in my Gemfile. I'm using foundation and my form is:

<div class="row search-area">
  <%= form_tag search_index_path, method: :get do %>
  <div class="small-12 medium-1 large-1 columns search-field">
    <%= label_tag "From", nil, class: "right inline" %>
  </div>
  <div class="small-12 medium-2 large-2 columns search-field">
    <%= text_field_tag(:start_date, params[:start_date], :class => "date-field") %>
  </div>
  <div class="small-12 medium-1 large-1 columns search-field">
    <%= label_tag "To", nil, class: "right inline" %>
  </div>
  <div class="small-12 medium-2 large-2 columns search-field">
    <%= text_field_tag(:end_date, params[:end_date], :class => "date-field") %>
  </div>
  <div class="small-12 medium-1 large-1 columns search-field">
    <%= label_tag "Guests", nil, class: "right inline" %>
  </div>
  <div class="small-12 medium-2 large-2 columns search-field">
    <%= number_field(:number_of_guests, params[:number_of_guests], in: 1.0..20.0, step: 1.0) %>
  </div>
  <div class="small-12 medium-3 large-3 columns">
    <%= submit_tag "Search", name: nil, :class => "button" %>
  </div>
  <% end %>
</div>

In application.js I have:

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require foundation
//= require_tree .

$(function(){ $(document).foundation(); });

$(function() {
  $('.date-field').datepicker();
});

And in application.css.scss I have:

 *= require_tree .
 *= require_self
 *= require foundation_and_overrides
 *= require jquery-ui
 */

 @import "foundation_and_overrides";

The problem is that my text fields stay as text fields and no calendar pops up when I click on them.

After reading this question I tried stopping my server, running bundle update and then running bundle exec rake assets:precompile. This did not work.

I also tried to do a bit of digging around with the developer tools in Chrome. When I inspect the text-field element that's supposed to show the datepicker calendar and then click on 'sources' in developer tools, there's an 'app/jquery-ui' folder with a whole lot of css files. When I click on 'network' and reload the page the only javascript file I see is 'modernizr.self.js' which is apparently located in 'assets/vendor/'.

Does this mean that somehow the jquery-ui javascripts are not being compiled? If so how do I fix this?

After a bit of searching and further debugging - I think the problem might be with the asset pipeline and that application.js is not being seen at all.

解决方案

You may call datepicker, when document is ready. Like following code.

//= require jquery
//= require jquery_ujs
//= require jquery-ui/datepicker

$(document).ready(function() {
  $('.date-field').datepicker();
});

这篇关于jQuery UI datepicker与foundation和form_tag不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！