Rails – Ajax与不引人注目的javascript Jquery UI进度条

2019年7月21日 186次阅读

我想实现一个进度条,我从JQUERY UI中获取并将max设置为用户给出的任何数字,并将值设置为需要多少.

我的活动展示页面上有志愿者的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 });

这是一张关于正在发生的事情的图片的链接：

《Rails – Ajax与不引人注目的javascript Jquery UI进度条》

所以我只是按下第一项的志愿者按钮…..
输入志愿者表格上的信息
在create动作中进行ajax调用
和我的

create.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中我只是告诉它找到其中一个帖子的价值,但我需要找到每个帖子的价值.

最佳答案 在你的$(“.progressbar”).progressbar({value：a,max：b});您正在初始化所有现有进度条上的进度条 – 您需要确保仅定位循环中的相关进度条.

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

点赞