StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODynamically selecting modal to open
primarykey
Id
17217051
data
AcceptedAnswerId
17219086
AnswerCount
3
ClosedDate
CommentCount
3
CommunityOwnedDate
CreationDate
2013-06-20T14:58:29.933
FavoriteCount
0
LastActivityDate
2013-06-24T11:07:47.247
LastEditDate
2013-06-20T18:55:08.253
LastEditorUserId
1678151
OwnerUserId
1678151
ParentId
0
PostTypeId
1
Score
0
ViewCount
179
LastEditorDisplayName
text
Body
<p>I feel like there is a super easy answer but im struggling with it. I'm using underscore and _.each to render a block of html (.datachunk and #mymodal) and iterate over an array of objects to populate data. Here is my slimmed down HTML.</p> <pre><code> <div class="datachunk"></div>   <div class="datachunk"></div>   <div class="datachunk"></div>   <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>   <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>   <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>  </code></pre> <p>Here is the scenario. Click on the first .datachunk and pop open the first #mymodal. Click on the second .datachunk and pop open the second #mymodal. Click on the third .datachunk and pop open the third#mymodal. ETC...</p> <p>Right now I have:</p> <pre><code>$(".datachunk").click(function (){ $("#myModal").modal(); }); </code></pre> <p>but that only pops the first modal no matter what .datachunk I click on (as expected). </p> <p>How do I bind (not sure if thats the right term) each .datachunk with its corresponding modal? </p> <p>I can't hardcode a specific class or id because the number of .datachunks and modals is dynamic depending on how many posts are pulled in. </p> <p><em><strong></em>**Updated*<em>*</em></strong> leite you rock! My solution based of of yours:</p> <pre><code>$(".datachunk").each(function(index){ var datachunkIdentifier = "postInfo" + index; $(this).data("datachunk-class", datachunkIdentifier); $(".datachunk").eq(index).attr("identifier", datachunkIdentifier); }); $(".datachunk").each(function(index){ var datachunkIdentifier = "postInfo" + index; $(this).data("modal-id", datachunkIdentifier); $(".modal").eq(index).attr("identifier", datachunkIdentifier); }); </code></pre> <p>this adds an attr called identifier to each datachunk and modal. Now I can't figure out how to call the right modal. so clicking on div.datachunk with identifier="postInfo1" pops #myModal with identifier="postInfo1"</p> <p>new html:</p> <pre><code><div class="datachunk borderBottom" identifier="postInfo1"></div> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" identifier="postInfo1"></div> </code></pre>
Tags
<javascript><jquery><html><twitter-bootstrap><underscore.js>
Title
Dynamically selecting modal to open
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USAnthony
UserOwnerUserId
1. USAnthony
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.