Copy link to clipboard
Copied
I have an app which displays a spry dataset, like so:
Those cards are a spry region:
<div spry:region="pv1" spry:repeatchildren="pv1" class="badges">
<div class="badge">
<img src="images/{image}" alt=""/>
<div class="details">
<p class="name">{name}</p>
<p>Color: {color}</p>
<hr class="clrflt"/>
<p class="desc">{description}</p>
<p> Reference: <a href="{refLink}">{refName}</a></p>
</div>
</div>
My question is, I'd like to create another DIV that appears when one of the cards is clicked (or a view details button). I know how to do the hide and show with JQuery, but how could I get which card was clicked on, so my details DIV shows the correct record's data? Is this doable is Spry alone? I have had problems getting Spry items to cooperate with JQuery...
Copy link to clipboard
Copied
I don't know of the spry property to use (if there is one). In jQuery (Version >= 1.6):
$(this).
tagNameanother option would be to bind (http://api.jquery.com/bind/) the data to the div. Now the interesting question here is whether jQuery inside a spry loop get looped with the html content or not.
Copy link to clipboard
Copied
Yes, but in this case all the child divs are created dynamically by Spry, so I can't assign a name.
I have gotten a bit closer with this:
<div spry:region="pv1" spry:repeatchildren="pv1" class="badges">
<div class="badge">
<img src="images/{image}" alt=""/>
<div class="details">
<p class="name" spry:select="selected" spry:setrow="pv1" >{name}</p>
<p>Color: {color}</p>
<hr class="clrflt"/>
<p class="desc">{description}</p>
<p> Reference: <a href="{refLink}">{refName}</a></p>
</div>
</div>
</div>
which updates a detail div:
<div id="detail" spry:detailregion="ds1">
<p class="name">{name}</p>
</div>