Iterate over an array by index when click on submit button Ruby on Rails

Question

I have an array of Pet instances and each of them have a name, type, sex and size, etc... I'd like to iterate through this collection of Pet instances and display the each one by one.

This is what I have so far:

<% @pets.each do |pet| %>
<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Sex</th>
            <th>Age</th>
            <th>breed</th>
            <th>Size</th>
            <th>Picture</th>
            <th>Description</th>
            <th>Shelter_id</th>

            <th>Shelter</th>
            <th>Phone</th>
            <th>Email</th>
            <th>City</th>
            <th>Zip</th>
            <th>Like</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><%= pet.name %></td>
            <td><%= pet.species %></td>
            <td><%= pet.sex %></td>
            <td><%= pet.age %></td>

            <td><% pet.breeds.each do |breed| %>
                <li><%= breed.name %></li>
                <%end%>
            </td>
            <td><%= pet.size %></td>
            <td><%= image_tag pet.picture %></td>
            <td><%= pet.description %></td>
            <td><%= pet.shelter_id %></td>

            <% shelter = Shelter.find(pet.shelter_id)%>
            <td><%= shelter.name %></td>
            <td><%= shelter.phone %></td>
            <td><%= shelter.email %></td>
            <td><%= shelter.city %></td>
            <td><%= shelter.zip %></td>
            <td><%= form_for pet, :url => { :controller => "favorite_pets", :action => "create" }, :html => {:method => :post} do |f| %>
            <%= f.text_field :id %>
            <%= f.submit %>
            <% end %>
</td>
        </tr>


    </tbody>
</table>
<%end%>

So now, I need two thinks.

1st When a user clicks the submit button (<%= f.submit %>) to send a POST request i do not want the page to reload nor to redirected me to another page. I looked around and it seems like :remote => true included in the form_for would do the trick but i'd need more help with that.

2nd I'd like to control the iterating through @pets so that only the first one is displayed pet[0] and every time I click on the <%= f.submit %> button not only does it not reload the page but it displays the next index in the array pet[1]

I think I need to set up a sort of counter which would increment the index of the pet array every time a user click on the <%= f.submit %> button.

Any guiding thoughts?

Way too broad for Stack Overflow. Try to produce a simple working example of a remote form and work from there, rather than leaping straight to a complex usecase. — user229044
– user229044 ♦, Commented Mar 13, 2015 at 3:10
Agree, it is somewhat broad however the logic behind controlling the iteration of the array, seem to me, a reasonable question to ask. — Cyzanfar
– Cyzanfar, Commented Mar 13, 2015 at 3:12

Greg Pappok · Accepted Answer · 2015-03-13 03:10:05Z

1

If I were to do this I would use some javascript. So your submit button turns into more of an "Add Button" it doesn't actually submit anything. It would just add that object (in your case the pet, along with its info) to a javascript array as well as display the new object (again the pet along with the info) on the window. Then create another button to actually submit all the pets. (The javascript array)

answered Mar 13, 2015 at 3:10

Greg Pappok

711 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cyzanfar Over a year ago

I don't want to "add the pets" per say. i'd like the first pet of the array to be displayed when the page is loaded and every time a user clicks on submit the next pet in the array appears. The original one shouldn't be displayed on the page. Just one by one every time the submit button is clicked.

Cyzanfar Over a year ago

that will show the last per instance in the array. See i have a collection of pet instances (let's say 20 of them) and want to show them one by one upon clicking on the submit button. preferably starting with the first one pet[0]

Greg Pappok Over a year ago

Hmm. Ya. I wouldnt know what you mean without looking at it. Regardless. If you do not want the page to be reloaded or redirected you will have to use ajax everytime you submit. I cant write any code for you, but you will have to look into "prevent defaults" on the submit button, submit the object via ajax. and get a response. Then update the DOM based on the response

Collectives™ on Stack Overflow

Iterate over an array by index when click on submit button Ruby on Rails

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related