Отображение средства выбора даты Jquery для нескольких форм

У меня есть код, структурированный таким образом, что при нажатии на кнопку «Изменить» отображается скрытая форма (написанная на встроенном ruby) в HTML-теге «div», а внутри этой формы находится text_field_tag, идентификатор которого используется для привязки к средству выбора даты с помощью Jquery.

Используя мой текущий код просмотра и код jquery datepicker в rails: я могу нажать кнопку редактирования и выбрать дату, используя text_field_tag ​​для каждой формы. Однако, когда я пытаюсь отправить это значение datepicker, оно отправляется только для первой формы (для первого элемента 'td).

Я предполагаю, что я делаю что-то неправильно с кодом Jquery. Может ли кто-нибудь указать мне, как я могу отправить значение средства выбора даты для соответствующей формы (ближайшая форма в пределах «td» при нажатии кнопки), а не только для отправки для первой формы ( первый элемент 'td')

Вот мой код:

ПРОСМОТР в RAILS:

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

Код для Jquery в файле application.js в Rails:

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

      });
      });

ruby-on-rails html datepicker jquery-ui-datepicker erb
person orange88    schedule 26.09.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

На самом деле я заставил его работать, НЕ назначая какой-либо идентификатор text_field_tag ​​и используя только класс для доступа к text_field_tag ​​в каждой форме для каждого файла в цикле с использованием jquery - так что, по сути, в моем решении только jquery предоставляет уникальные идентификаторы для формы. Где-то на другом форуме читал.

Мое решение в коде:

ВИД RAILS:

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

Файл application.js RAILS: (код JQUERY для средства выбора даты):

      $(document).ready(function(){ 
      $('.datepicker').each(function(){
      $(this).datetimepicker();
      });
      });
person orange88    schedule 01.10.2013

arrow_upward
0
arrow_downward

Я только что закончил работу над похожей проблемой. часть проблемы заключается в том, что jquery изменяет идентификатор и дает класс всем атрибутам, которые его вызывают. Одним из решений является использование нокаута, чтобы абстрагироваться от необходимости вручную изменять DOM. Хорошее решение можно найти здесь: JSFiddle.

Существует целая куча вопросов, касающихся средства выбора даты, вызывающего проблемы, когда люди пытаются модифицировать DOM напрямую и получают неожиданные результаты.

Ее мое решение, которое я разместил в другом вопросе:

        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);   
                }
            }
        };
person false_memories    schedule 26.09.2013
comment
Спасибо за ваш ответ. Честно говоря, я новичок в кодировании в jquery и не понимаю большую часть кода, поэтому, если возможно, не могли бы вы указать мне, какие части кода, который вы разместили, или код из jfiddle мне понадобится для моего приложения? Я действительно ценю. - person orange88; 27.09.2013
comment
Насколько я могу судить, у вас есть цикл, создающий форму, и у вас есть эта строка: $(this).closest('td').find(div.file_description_update ).find('#user_input'). средство выбора даты(); - person false_memories; 27.09.2013
comment
На самом деле у вас есть проблема, когда тег id не уникален, это всегда #user_input, который должен быть уникальным, поэтому между формами и средствами выбора даты существует отношение 1-1. Может быть полезно создать функцию, возвращающую уникальный идентификатор, или использовать класс. Я не знаю, хорошо ли нокаут работает с рендерингом представления рельсов. - person false_memories; 27.09.2013
comment
@roquequery Спасибо за ответ. Как вы думаете, эта функция должна быть в Jquery или Ruby? Пожалуйста, дай мне знать - person orange88; 28.09.2013
comment
Это будет функция rails, но вы можете абстрагироваться от нее, поскольку jquery изменяет классы и идентификаторы для datepicker. - person false_memories; 30.09.2013
comment
Извините, под Rails вы подразумеваете, что функция будет рубиновой? что значит, что я хотел бы «абстрагироваться таким образом»? Спасибо - person orange88; 30.09.2013