0

我正在使用带有 jQ​​uery Mobile 和 jQuery UI 的 Rails 3.2，并且无法从自动完成功能中获得一致的行为。如果我有一个带有自动完成功能的表单并使用无效信息提交它，以便我再次获得带有错误列表的相同表单，则自动完成功能将关闭。

应用程序.js

//= require jquery
//= require jquery_ujs
//= require jquery.ui.autocomplete
//= require jquery.mobile-1.3.1.min
//= require_tree .

application.html.erb（仅标头）

<head id="work" >
  <title><%= full_title(yield(:title)) %></title>

  <meta name="viewport" content="width=device-width, initial-scale=1, height=device-height">

  <%= stylesheet_link_tag    "application", media: "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>

</head>

估计.js.coffee

$(document).on 'pageinit', ->
  $('#estimate_client_company').autocomplete source:
    $('#estimate_client_company').data('autocomplete-source')

估计控制器.rb

class EstimatesController < ApplicationController
  before_filter :signed_in_user, only: [:show, :index]
  before_filter :correct_user,   only: [:edit, :update, :destroy]

  def new
    @estimate = current_user.estimates.build
    @clients = Client.all.sort { |x,y| x[:company].downcase <=> y[:company].downcase }
  end

  def create
    @estimate = current_user.estimates.build(params[:estimate])
    if @estimate.save
      flash[:success] = "Estimate Started!"
      redirect_to @estimate
    else
      render 'new'
    end
  end

新的.tml.erb

<% provide(:title, 'New Cost Estimate') %>
<% provide(:fback, estimates_path) %>

<%= form_for(@estimate) do |f| %>

  <%= render 'estimates/estimate_form', :f => f %>

  <%= f.submit "Create new Cost Estimate", "data-ajax" => "false",
               "data-role" => "button", "data-theme" =>"b" %>
<% end %>

_estimate_form.html.erb

<%= render 'shared/error_messages', object: f.object %>

<div class="form-body">
  <%= f.label "Company" %>
  <%= f.text_field :client_company, data: {autocomplete_source: Client.order(:company).map(&:company)},
       "data-ajax" => "false", required: true %>

  <%= f.label :project_name %>
  <%= f.text_field :project_name, required: true %>

  <%= f.label :item_number %>
  <%= f.text_field :item_number, required: true %>
</div>

_error_messages.html.erb

<% if object.errors.any? %>
    <div id="error_explanation" class="alert_error">
      <div class="alert">
        The form contains <%= pluralize(object.errors.count, "error") %>.
      </div>
      <ul>
        <% object.errors.full_messages.each do |msg| %>
            <li><%= msg %></li>
        <% end %>
      </ul>
    </div>
<% end %>

编辑

我还尝试了以下具有完全相同的结果：

估计.js.coffee

$(document).on 'focus', '#estimate_client_company', ->
  $('#estimate_client_company').autocomplete source:
    $('#estimate_client_company').data('autocomplete-source')
4

1 回答 1

0

我通过在 application.html.erb 中的 HTML 元素中添加一个 ID 并修改 javascript 以将其用作 root 解决了这个问题。

应用程序.html.erb

<!DOCTYPE html>
<html id='hey_grrl_hey' >
   .......
</html>

估计.js.coffee

$('#hey_grrl_hey').on 'focus', '#estimate_client_company', ->
  $('#estimate_client_company').autocomplete source:
    $('#estimate_client_company').data('autocomplete-source'

编辑

尝试使用另一个元素作为根（通过添加和引用其 ID）完全破坏了自动完成功能。我试过使用body元素和<div data-role="page">元素。

于 2013-07-05T17:11:23.933 回答