Pass variable into selector in foreach loop

Question

I have a set of ids being generated in a foreach loop

<?php foreach ($_Collection as $_item): ?>
    <img class="<?php echo $_product->getId() ?>"  src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image')->resize(100, 75); ?>" />

I want to be able to grab specific divs with ajax by using the class that is generated as it will match both in this and the target document. So I was hoping to try something like this in the same foreach loop :

$(document).ready(function() {  
var item = "<?php echo $_product->getId() ?>";
$('img .'+item).click(function (){  
$('#result').load('ajax-page .'+item+')
    })

This is just for an example but I am sure there are multiple things wrong. For one what is printed looks like ...

var item = "156294";
$j('img .'+item).click(function (){ 
    $j('#result').load('ajax-page .item')
    });

For starters... how can I pass the item variable to the selector from within this loop?

Lance · Accepted Answer · 2011-02-01 01:03:08Z

1

I'd suggest changing your php script to add a class to your img file, and then use the name of your img for your item id. So, instead of

<img class="<?php echo $_product->getId() ?>"  src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image')->resize(100, 75); ?>" />

You would have something similar to

<img name="<?php echo $_product->getId() ?>" class="imgBlah"  src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image')->resize(100, 75); ?>" />

Then, use jQuery to attach a click event to any images with class 'imgBlah'. Using your provided script it would look something like this:

$(document).ready(function() {  

   $('img.imgBlah').click(function () {  
      $('#result').load('ajax-page .' + $(this).attr("name"))
   });

})

answered Feb 1, 2011 at 1:03

Lance

1,89714 silver badges13 bronze badges

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

Comments

tkm256 · Accepted Answer · 2011-02-01 01:00:32Z

0

You have a stray plus and quote at the end there after "item" in your code.

answered Feb 1, 2011 at 1:00

tkm256

5001 gold badge4 silver badges14 bronze badges

Comments

Sebastian · Accepted Answer · 2011-02-01 00:59:52Z

0

The idea looks right. But just a few things to point out:

You cannot have a class using a number e.g. ".156294" in $j('img .'+item) maybe append a letter first
what are you trying to achieve with load('ajax-page .item')? Maybe it should be load('ajax-page?id='+item)

answered Feb 1, 2011 at 0:59

Sebastian

2,28917 silver badges20 bronze badges

1 Comment

Zac Over a year ago

Thanks Sebastian.. with .load you can grab a selective element so I am trying to grab just the divs with the class name = item

Michal · Accepted Answer · 2011-02-01 02:40:28Z

Your best option is to use "data-options" attribute on your image tags. Creating custom names/attributes/appending letters to stuff is tiresome. Data-options attribute is automatically parsed (by Jquery>1.4.3) into .data() json for that element. You can later easily access the information using jquery data() method. It also gives you an option of storing varied pieces of data without the need for post processing later

eg.

<img src='blah.png' data-role="page" data-hidden="true" data-options="{id:1234}">

You can later retrieve the data using this selector

$("img").data('options').id;

So in your example in your php loop when you write out images

<?php foreach ($_Collection as $_item): ?>
    <img class="clickme" data-options="{id:<?php echo $_product->getId() ?>}" src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image')->resize(100, 75); ?>" />

you jquery will than look like this - (you do not need to generate anything in php):

$(document).ready(function() {  
//this binds a click to all images with clickme class
$('.clickme').click(function (){
//this gets the id stored for that image
item = $(this).data('options').id
//and this does whatever with that id
$('#result').load('ajax-page.'+item)
    })

More on jquery data here http://api.jquery.com/data/

Collectives™ on Stack Overflow

Pass variable into selector in foreach loop

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related