Rails - Ajax 与不显眼的 javascript Jquery UI 进度条

Posted 2023-03-05

【中文标题】Rails - Ajax 与不显眼的 javascript Jquery UI 进度条

【英文标题】：Rails - Ajax with unobtrusive javascript Jquery UI Progress Bar

【发布时间】：2013-10-14 13:35:57

【问题描述】：

我想实现一个从 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 );

这是一个链接到正在发生的事情的图片：

所以我只是点击了第一个项目的志愿者按钮..... 在志愿者表格上输入信息 在 create 操作中进行了 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.itemsid: stuff.id
        .thumbnailstyle: '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 中，我只是告诉它只找到其中​​一篇文章的价值，但我需要找到每个帖子的价值。

【参考方案1】：

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

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

【讨论】：

我是否必须在我的 javascript 中以某种方式对其进行转义？我知道你在做什么，这是一个好主意，但它不起作用.....我没有收到任何错误它只是没有在页面上呈现

在我的 js 文件中，我不认为它用 stuff.id 引用了正确的东西

js.erb文件中不能使用$(this)吗？

您能否检查生成页面的源代码，查看进度条的 ID 是否正确呈现，以及通过 AJAX 调用的 Javascript 中的 ID？

我可以检查源代码......正在设置适当的 ID......#progressbar-14......我不确定如何检查 AJAX 的 Javascript虽然打电话.....我怎么能在我的 JS.ERB 文件中使用 stuff.id 呢？它知道东西是什么意思吗？

【参考方案2】：

在你的控制器的创建动作中，确保返回你要更新的进度条的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 );