Jquery datepicker дисплей за множество формуляри

Моят код е структуриран по такъв начин, че щракването върху бутон „Редактиране“ показва скрита форма (написана с вграден ruby) в рамките на html таг „div“ и в тази форма е text_field_tag, чийто id се използва за свързване с инструмент за избор на дата използвайки Jquery.

Използвайки текущия си код за изглед и кода на jquery datepicker в rails: мога да щракна върху бутон за редактиране и да избера дата, като използвам text_field_tag ​​за всеки формуляр. Въпреки това, когато се опитам да изпратя тази стойност за избор на дата, тя се изпраща само за първия формуляр (за първия елемент '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 предоставя уникални идентификатори за формуляра. Четох го някъде в друг форум.

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

ИЗГЛЕД НА РЕЛСИ:

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

RAILS application.js файл: (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
Това би било функция за релси, но може да искате да абстрахирате това, тъй като jquery променя класове и идентификатори за избор на дати - person false_memories; 30.09.2013
comment
Съжалявам, под Rails имате предвид, че функцията ще бъде ruby? какво би означавало това, че бих искал да „абстрахирам по този начин“? Благодаря - person orange88; 30.09.2013