JQuery DatePicker отображения для нескольких форм

Question

JQuery DatePicker отображения для нескольких форм

0

У меня есть код, структурированный таким образом, что нажатие на кнопку "Редактировать" отображает скрытую форму (написанную во встроенном рубине) в теге "div" html и внутри этой формы - это text_field_tag, идентификатор которого используется для привязки к дате выборке используя JQuery.

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

Я предполагаю, что я делаю что-то не так с кодом JQuery. Можете ли вы указать, как я могу представить значение datepicker для соответствующей формы (ближайшая форма внутри "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(); 

      });
      });

orange88 27 сен. 2013, в 00:33

Источник

Теги:

html

ruby-on-rails

datepicker

erb

jquery-ui-datepicker

2 ответа

0

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

Там целый беспорядок вопросов, связанных с datepicker вызывает проблемы, когда люди пытаются mod 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);   
                }
            }
        };

false_memories 26 сен. 2013, в 20:25

0

Спасибо за ваш ответ. Честно говоря, я новичок в области кодирования в jquery и не очень разбираюсь в коде, поэтому, если возможно, можете ли вы рассказать мне, какие части кода, которые вы разместили, или код из jfiddle, которые мне понадобятся для моего приложения? Я действительно ценю.
orange88 26 сен. 2013, в 22:21
0

Итак, насколько я могу судить, у вас есть цикл, который создает форму, и у вас есть эта строка: $ (this) .closest ('td'). Find ("div.file_description_update") .find ('# user_input' ) .datepicker ();
false_memories 27 сен. 2013, в 13:30
0

На самом деле у вас есть проблема, когда тег id не уникален, это всегда "#user_input", который должен быть уникальным, поэтому между формами и датчиками выбирается соотношение 1-1. Может быть полезно создать функцию, которая возвращает уникальный идентификатор, или использовать класс. Я не знаю, хорошо ли играет нокаут с видом рельсов
false_memories 27 сен. 2013, в 13:32
0

@ Roquequery Спасибо за ответ. И эта функция должна быть в Jquery или Ruby, как вы думаете? пожалуйста, дайте мне знать
orange88 28 сен. 2013, в 19:09
0

Это была бы функция rails, но вы можете абстрагироваться от нее, поскольку jquery изменяет классы и идентификаторы для datepicker
false_memories 29 сен. 2013, в 20:06
0

Извините, под Rails вы имеете в виду, что функция будет ruby? что будет означать, что я хочу «абстрагироваться таким образом»? Спасибо
orange88 29 сен. 2013, в 23:49

Показать ещё 4 комментария

Ещё вопросы

Спасибо за ваш ответ. Честно говоря, я новичок в области кодирования в jquery и не очень разбираюсь в коде, поэтому, если возможно, можете ли вы рассказать мне, какие части кода, которые вы разместили, или код из jfiddle, которые мне понадобятся для моего приложения? Я действительно ценю.
Итак, насколько я могу судить, у вас есть цикл, который создает форму, и у вас есть эта строка: $ (this) .closest ('td'). Find ("div.file_description_update") .find ('# user_input' ) .datepicker ();
На самом деле у вас есть проблема, когда тег id не уникален, это всегда "#user_input", который должен быть уникальным, поэтому между формами и датчиками выбирается соотношение 1-1. Может быть полезно создать функцию, которая возвращает уникальный идентификатор, или использовать класс. Я не знаю, хорошо ли играет нокаут с видом рельсов
@ Roquequery Спасибо за ответ. И эта функция должна быть в Jquery или Ruby, как вы думаете? пожалуйста, дайте мне знать
Это была бы функция rails, но вы можете абстрагироваться от нее, поскольку jquery изменяет классы и идентификаторы для datepicker
Извините, под Rails вы имеете в виду, что функция будет ruby? что будет означать, что я хочу «абстрагироваться таким образом»? Спасибо

orange88 · Accepted Answer · 2013-10-01T19-22-00.000Z

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

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

RAILS VIEW:

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

Файл RAILS application.js: (код JQUERY для datepicker):

      $(document).ready(function(){ 
      $('.datepicker').each(function(){
      $(this).datetimepicker();
      });
      });