4

我想实现一个从 JQUERY UI 下来的进度条，并将最大值设置为用户提供的任何数字，并将值设置为需要多少。

我的活动展示页面上有一个供志愿者使用的 ajax 表单，一切正常。

但是，在我尝试创建一个新志愿者之后，页面上的每个进度条都会更新为刚刚创建的进度条。

这是我刚刚放入我的 _stuff 部分以呈现出来的 javascript：

%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 调用，我的

创建.js.erb

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

只是对元素进行一些隐藏和显示。

我只想让它更新我正在处理的进度条....

使用 ajax 对我来说还是有点新鲜......

这是在 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 中，我只是告诉它只找到其中​​一个帖子的价值，但我需要找到每个帖子的价值。

4

2 回答 2

2

在您的$(".progressbar").progressbar({value: a, max: b });行中，您正在初始化所有现有进度条上的进度条 - 您需要确保您只针对循环中的相关进度条。

为此，请尝试在每个进度条上设置一个唯一的 ID，例如：.progressbar{id:"progressbar-#{stuff.id}"}然后更改您的 javascript 以引用该特定 ID： $("#progressbar-#{stuff.id}").progressbar({value: a, max: b });

于 2013-10-10T23:11:33.493 回答
0

在控制器的创建操作中，确保返回要更新的进度条的 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-16T03:09:25.573 回答