0

我的代码结构是这样的：单击“编辑”按钮会在“div”html标签中显示一个隐藏的表单（用嵌入的ruby编写），并且该表单中有一个text_field_tag，其id用于绑定到日期选择器使用jQuery。

在 rails 中使用我当前的视图代码和 jquery datepicker 代码：我可以单击编辑按钮并使用每个表单的 text_field_tag 选择日期。但是，当我尝试提交该 datepicker 值时，它只会提交给第一个表单（对于第一个 'td 元素）。

我猜我的 Jquery 代码做错了什么。谁能指导我如何提交相应表单的日期选择器值（单击按钮时“td”中最接近的表单），而不是只提交第一个表单（第一个'td'元素）

这是我的代码：

在导轨中查看：

    <h2>Files</h2>
    <table class="table">
    <tr>
      <th>Filename</th>
      <th>Description</th>
      <th>Download Link</th>
     </tr>
     <% @files.each do |file| %>
     <% filename = file.split('/').last %>
    <% object = @bucket.objects[file] %>

    <tr>         
    <td><%= filename %></td>  

    <td>

    <div class="file_description"><%= object.metadata['description']%>    

    <button id ="button1" type="button"  class= "btn btn-default   
      edit_description"   onclick="Window(this)">Edit</button> 

    </div>
     <div id = 'hidden_form' class="file_description_update" >
      <%= form_tag({:action => 'update_file_info'}, multipart: true) do %> 
        Update File Description: <%= text_area_tag :description %>
        <%= hidden_field_tag :s3_path, file %>  
        <%= hidden_field_tag :prefix, @prefix %>
       <%= text_field_tag 'user_input' %>
        <%= submit_tag 'Submit' %> </td> <br />
      <% end %>
    </div>

    </td>

Rails 中 application.js 文件中的 Jquery 代码：

     //= require jquery
     //= require jquery_ujs
     //= require twitter/bootstrap
     //= require bootstrap
     //= require_tree .

     //= require jquery.ui.all
     //= require jquery.ui.datepicker



     $(document).ready(function(){ 
     $( "button.edit_description" ).on( "click", function( event ) { 
     $(this).closest('td').find("div.file_description_update" ).show();
     $(this).closest('td').find("div.file_description_update" 
     ).find('#user_input').datepicker(); 

      });
      });
4

2 回答 2

1

实际上，我通过不为 text_field_tag 分配任何 id 并且仅使用一个类来使用 jquery 为循环中的每个文件访问每个表单中的 text_field_tag 来使其工作——所以基本上在我的解决方案中，只有 jquery 为表单提供了唯一的 id。我在某个地方的另一个论坛上读过它。

我的代码解决方案：

导轨视图：

      <%= text_field_tag '', '',:class => "datepicker" %>

RAILS application.js 文件：（日期选择器的 JQUERY 代码）：

      $(document).ready(function(){ 
      $('.datepicker').each(function(){
      $(this).datetimepicker();
      });
      });
于 2013-10-01T20:41:44.763 回答
0

我刚刚完成了一个类似问题的工作。问题的一部分是 jquery 修改了 id 并为调用它的所有属性提供了一个类。一种解决方案是使用敲除来抽象出手动修改 DOM 的需要。可以在这里找到一个好的解决方案：JSFiddle

当人们尝试直接修改 DOM 并获得一些意想不到的结果时，与 datepicker 相关的问题一大堆会导致问题。

她是我在另一个问题中发布的解决方案：

        ko.bindingHandlers.datepicker = {
            init: function(element, valueAccessor, allBindingsAccessor) {
                var $el = $(element);

                //initialize datepicker with some optional options
                var options = { minDate: 0};
                $el.datepicker(options);

                //handle the field changing
                ko.utils.registerEventHandler(element, "change", function() {
                    var observable = valueAccessor();
                    observable($el.datepicker("getDate"));
                });

            },
            update: function(element, valueAccessor) {
                var value = ko.utils.unwrapObservable(valueAccessor()),
                    $el = $(element),
                    current = $el.datepicker("getDate");

                if (value - current !== 0) {
                    $el.datepicker("setDate", value);   
                }
            }
        };
于 2013-09-26T22:12:25.500 回答