Rails - Ajax with unobtrusive javascript jquery UI進度條

我想實現一個進度條我得到了JQUERY UI，並將max設置爲用戶給出的任何數字，並將值設置爲需要多少。Rails - Ajax with unobtrusive javascript jquery UI進度條

我在我的活動展示頁面上有志願者的ajax表單，並且一切正常。

但是，在我嘗試創建一個新的志願者之後，頁面上的每個進度條都會更新爲剛剛創建的那個進度條。

繼承人我的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 });

下面是發生了什麼事情的PIC鏈接：

所以，我只是點擊第一個項目上的志願者按鈕..... 進入志願者表格的信息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'

它正在呈現出我的節目頁面上的事件模型後呈現出整個部分（不知道這是相關的只是想我會扔在那裏）

我知道爲什麼它這樣做，因爲在我的JavaScript我只是告訴它找到只是其中一個職位的價值，但我需要找到每個職位的價值。

來源

2013-10-07 user1502223

在您的$(".progressbar").progressbar({value: a, max: b });行中，您正在初始化進度條全部現有進度條 - 您需要確保您只針對循環中相關的進度條。

爲此嘗試每個進度條，是獨特，例如在設置ID：.progressbar{id:"progressbar-#{stuff.id}"}然後改變你的javascript來引用特定的ID，以及：$("#progressbar-#{stuff.id}").progressbar({value: a, max: b });

來源

2013-10-10 23:11:33 alexpls

做我必須在我的JavaScript中以某種方式逃脫它？我看到你在做什麼，它的一個好主意，但它不工作.....即時通訊沒有得到任何錯誤，它只是沒有在我的js文件頁面 – user1502223

呈現我不認爲它的東西引用正確的東西.id – user1502223

是它不可能在js.erb文件中使用$（this）？ – user1502223

在控制器的創建操作，確保返回要更新進度條的id：

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

然後，使用該ID，您可以更新正確的項目的進度條。確保將.caption元素的ID設置爲stuff.id價值（而不是設定的進度欄的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 });

來源

2013-10-16 03:09:25 jvperrin

Rails - Ajax with unobtrusive javascript jquery UI進度條

回答

相關問題