jQuery + Rails + Toggle on Image

Question

I have a list of checkboxes with associated images and titles in as labels. I run an each loop to pull the data for the checkboxes. I simply want the images to be highlighted when onclick. For some reason, the jQuery toggle script I'm using doesn't work inside the loop.

js:

    <script>
      $("img.choice").click(function() {
        $(this).toggleClass("new").toggleClass("new1");
          });
    </script>

css:

    .new {
      padding-top: 0px;
      padding-bottom: 0px;
      margin-top: 0px;
      margin-bottom: 0px;
      box-shadow: 2px 2px 4px #888888;

    }

    .new:hover {
        box-shadow: 2px 2px 2px #001f36;
        border-color: #FF804D;
    }

    .new:active {
        box-shadow: 2px 2px 2px #001f36;
        border-color: #FF804D;
    }

    .new1 {
      border: outset;
      border-color: #FF804D;
    }


html:

    <div class="row" align='center'>                    
        <% Category.select { |category| category.gender == 'girl' }.each do |category| %>
            <div class="span4" align="center" style="padding-top:15px">
                <label>
                    <div style="padding-bottom:5px">
                        <h13><%= category.name.capitalize %></h13>
                    </div>
                    <img id="choice-<%= category.id -%>" src= <%= category.image %> class="choice new" />
                    <div>
                        <%= check_box_tag 'category_ids[]', category.id %>
                    </div>
                </label>    
            </div>
        <% end %>
    </div>

<% Category.where('gender == "girl"').each do |category| %> might be a better option — Misha M
– Misha M, Commented Sep 19, 2012 at 5:46
gem 'jquery-rails', '2.0.2' - sorry, the element with choice isn't there now, but I tried it on all the divs, imgs, etc. — abhir
– abhir, Commented Sep 19, 2012 at 5:46
sorry for that foolish error - updated file - Misha, how would I add the id to that erb code? — abhir
– abhir, Commented Sep 19, 2012 at 5:48

Misha M · Accepted Answer · 2012-09-19 06:18:51Z

2

Here's a JSFiddle:

http://jsfiddle.net/misham/xu6Kf/

you need to wrap the JS code in a $(document).ready, so the events get registered:

<script>
  $(document).ready(function(){
     $("img.choice").click(function() {
       $(this).toggleClass("new").toggleClass("new1");
  });
  }) ;
</script>

Ideally, you should place the JS code in the appropriate file in assets:

app/assets/javascripts/<controller_name>.js

If it doesn't exist, create it. If it's a CoffeeScript file, you can just rename it to .js, or write in CoffeeScript, if that's your thing.

If you want to keep the code in view file, then put it at the bottom and wrap it in

<%= content_for :javascript do -%>
   <!-- JS code here -->
<% end -%>

And then place the following right before closing body tag, </body>:

<%= yield :javascript %>

That way your JS code will get automatically rendered at the bottom, not in the middle of the HTML.

edited Sep 19, 2012 at 6:18

answered Sep 19, 2012 at 5:52

Misha M

11.4k17 gold badges58 silver badges67 bronze badges

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

3 Comments

abhir Over a year ago

I need the image to be active when clicked - isn't JS the only way to do so?

abhir Over a year ago

fantastic answer. works when I do an individual image - for some reason, its not working within my each loop - what a frustrating problem!

Misha M Over a year ago

@abhir I've updated the JSFiddle with multiple images. One item to note, are you adding images through an AJAX call after the page has loaded? If you are, that event won't get bound to the new images. You'll have to rerun the .click call as part of your success callback in AJAX function. Post some more info and I can try to help

pdu · Accepted Answer · 2012-09-19 05:54:07Z

0

Maybe the reason is that, after iterating through your loop, are having multiple <img id="choice" /> tags which is invalid HTML. Your id is an identifier like you have one as a primary key in your database, it should be unique (at least on that page you're on).

So I would do:

<% Category.select { |category| category.gender == 'girl' }.each do |category| %>
  <img id="choice-<%= category.id -%>" src= <%= category.image %> class="choice new" />
<% end %>

And the modified JS might look like this:

$("img.choice").click(function() {
  $(this).toggleClass("new").toggleClass("new1");
});

Remember that this is both untested and straight from my brain.

edit
For sake of simplicity, I'd also add a scope to your model, like this:

class Category < ActiveRecord::Base
  scope :female, where('gender = ?', 'female'), :order => :name # or some other ordering
end

So you can do this

<% Category.female.each do |category| %>
  [snip]
<% end %>

And your logic is a bit split out into your model, where it should belong IMHO.

answered Sep 19, 2012 at 5:54

pdu

10.5k4 gold badges61 silver badges96 bronze badges

5 Comments

abhir Over a year ago

hmm, yes, I thought that would the issue as well - but I'm having the same issue having implemented that...thanks though!

pdu Over a year ago

can you please update the code in your question so we can have a look?

Misha M Over a year ago

@abhir, you forgot to add a class="choice" to the img tag

pdu Over a year ago

you may need to clean the thing first @Misha M suggested.

pdu Over a year ago

Especially the part of wrapping your code into $(function(){// code here});

Collectives™ on Stack Overflow

jQuery + Rails + Toggle on Image

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related