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 呼び出しが行われ、私の

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では、投稿の1つだけの値を見つけるように指示しているだけですが、個々の投稿の値を見つける必要があるため、なぜこれを行っているのかはわかっています。

4

2 に答える 2

0

コントローラーの作成アクションで、更新するプログレス バーの ID を必ず返します。

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

次に、その ID を使用して、正しいアイテムのプログレス バーを更新できます。ファイル内の正しい数量で正しい進行状況バーを更新できるように、.caption要素の id を(進行状況バーの ID を設定する代わりに) の値に設定してください。stuff.idcreate.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 に答える