CODEWITHSUNDEEP
javascriptjqueryhtmlruby-on-railsajax
user1502223
user1502223

Reputation: 645

Rails - Ajax with unobtrusive javascript Jquery UI Progress Bar

I want to implement a progress bar I got off JQUERY UI and set the max to whatever number the user gives and have the value set to how much is needed .

I have an ajax form for volunteers on my event show page, and everything is working fine.

However, after I try to create a new volunteer every progress bar on the page updates to the one that was just created.

Heres my javascript that I just threw into my _stuff partial to be rendered out: 

%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 });

Here's a link to a pic of what's going on:

So I just hit the volunteer button on the first item..... Entered the info on the volunteer form an ajax call is made in the create action and my

create.js.erb 

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

just does some hiding and showing of elements.

I just want it to update the progress bar on the one that I am working on....

working with ajax is still a little new to me......

Here's the entire partial that gets rendered out after the ajax call

%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'

It's being rendered out on my show page for EVENTS MODEL (don't know if that's relevant just thought I'd throw that in there)

I know why it's doing this because in my javascript I'm just telling it to find the value of just one of the posts but I need to find the value of each individual post.

Upvotes: 4

Views: 1068

Answers (2)

jvperrin
jvperrin

Reputation: 3368

In the create action of your controller, make sure to return the id of the progress bar you want to update:

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

Then, using that id, you can update the correct item's progress bar. Make sure to set the id of the .caption element to the value of stuff.id (instead of setting the progress bar id) so that you can update the correct progress bar with the correct quantities in the create.js.erb file:

var a = parseInt($('#caption_#{id} .quantity-have').text());
var b = parseInt($('#caption_#{id} .quantity-needed').text());
$("#caption_#{id} .progressbar").progressbar({value: a, max: b });

Upvotes: 0

alexpls
alexpls

Reputation: 1964

In your $(".progressbar").progressbar({value: a, max: b }); line you're initializing the progress bar on all existing progress bars - you need to make sure that you're only targeting the relevant one in your loop.

To do this try setting an ID on each progress bar that is unique, eg: .progressbar{id:"progressbar-#{stuff.id}"} and then changing your javascript to reference that specific ID as well: $("#progressbar-#{stuff.id}").progressbar({value: a, max: b });

Upvotes: 2

Related Questions