Rails - Ajax с ненавязчивым jquery JQuery UI Progress Bar

Question

Я хочу реализовать индикатор выполнения, который я получил от JQUERY UI и установил max в любое количество, которое пользователь дал, и установил, насколько это необходимо.

У меня есть форма ajax для добровольцев на моей странице показа событий, и все работает нормально.

Однако после того, как я попытаюсь создать нового добровольца, каждый индикатор выполнения на странице обновляется до того, который был только что создан.

Heres мой Javascript, что я просто бросил в мою _stuff частичной быть вынесен из:

%ul.thumbnails 

- @stuffs.each do |stuff| 
    = javascript_tag do 
     var a = parseInt($('.quantity-have').text()); 
     var b = parseInt($('.quantity-needed').text()); 
     $(".progressbar").progressbar({value: a, max: b }); 

Вот ссылка на рис того, что происходит:

Так что я просто нажмите кнопку добровольца по первому элементу ..... Введено информация о форме добровольца ajax звонок выполнен в действии и мой

create.js.erb

$("#new_volunteer").hide(); 
$('.form').fadeOut(); 
$('.overlay').remove(); 
$('.item-collection').html('<%= j render("stuffs/stuff") %>'); 

просто делает некоторые Скрытие и отображение элементов.

Я просто хочу, чтобы обновить индикатор на тот, что я работаю ....

работы с AJAX еще немного новой для меня ......

Вот все частичное, что визуализируется после Аякса вызова

%ul.thumbnails 
- @stuffs.each do |stuff| 
    = javascript_tag do 
     var a = parseInt($('.quantity-have').text()); 
     var b = parseInt($('.quantity-needed').text()); 
     $(".progressbar").progressbar({value: a, max: b }); 
    %li.span4.items{id: stuff.id} 
     .thumbnail{style: 'padding-right: 10px; padding-left: 10px; padding-top: 0 !important;'} 
      - if stuff.photo.file? 
       = link_to(image_tag(stuff.photo.url, style: 'height: 200px; width: 300px;'), admin_event_stuff_volunteers_path(@eventable, stuff.stuffable, stuff, style: 'height: 200px; width: 300px;')) 
      - else 
       /= link_to(image_tag('placeholder.jpg'), admin_event_stuff_volunteers_path(@eventable, stuff.stuffable, stuff)) 
      .caption 
       %h4 
        = link_to stuff.name, admin_event_stuff_volunteers_path(@eventable, stuff.stuffable, stuff), style: 'color: #555555;' 
       %b 
        Item Goal: 
       %span.quantity-have 
        = stuff.quantity_have.to_i 
        out of a total of 
       %b.quantity-needed 
        = stuff.quantity_needed 
       %br 
        .progressbar 
         /Quantity Have: 
         /= stuff.quantity_have.to_i 
       - if stuff.quantity_needed.to_i == stuff.quantity_have 
       - else 
        = link_to "Volunteer", new_admin_event_stuff_volunteer_path(@admin, stuff.stuffable, stuff), class: 'btn btn-success add-volunteer', remote: true 
        - if stuff.buy_link.present? 
         = link_to "Where to buy this", stuff.buy_link, class: 'btn btn-warning volunteer' 

Это визуализируется на моем шоу странице EVENTS MODEL (не знаю, если это релевантно только думал, что я бросить, что там)

Я знаю, почему это делает это, потому что в моем javascript я просто говорю, чтобы найти значение только одной из сообщений, но мне нужно найти значение каждого отдельного сообщения.

Answer 1

В вашей линии $(".progressbar").progressbar({value: a, max: b }); вы инициализируете индикатор выполнения на всех существующих индикаторов выполнения - вам нужно убедиться, что вы ориентируетесь только на соответствующий в своем цикле.

Для этого попробуйте установить идентификатор на каждой строке прогресса, который является уникальным, например: .progressbar{id:"progressbar-#{stuff.id}"}, а затем изменить свой JavaScript для ссылки на конкретный ID, а также: $("#progressbar-#{stuff.id}").progressbar({value: a, max: b });

Answer 2

В создании действия контроллера, убедитесь, вернуть идентификатор строки прогресса вы хотите обновить:

respond_to do |format| 
    format.js { render "create", locals: {id: stuff.id} } 
end 

Затем, используя этот идентификатор, вы можете обновить прогресс бар Правильный элемента.Убедитесь в том, чтобы установить идентификатор .caption элемента к значению stuff.id (вместо того, чтобы штриховой идентификатор прогресса), так что вы можете обновить правильный индикатор с корректными величинами в create.js.erb файле:

var a = parseInt($('#caption_#{id} .quantity-have').text()); 
var b = parseInt($('#caption_#{id} .quantity-needed').text()); 
$("#caption_#{id} .progressbar").progressbar({value: a, max: b });