StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
16095293
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-04-19T00:27:31.873
FavoriteCount
0
LastActivityDate
2013-04-19T00:27:31.873
LastEditDate
LastEditorUserId
0
OwnerUserId
2292736
ParentId
13232370
PostTypeId
2
Score
0
ViewCount
0
LastEditorDisplayName
text
Body
A major issue is the way your IDing your elements. You have a variable c which is numeric, starting at 0, increases whenever a link is clicked, and then is set as the ID as one of your iframes. However, you are also setting numeric IDs to the created tabs. Eventually, these element IDs will overlap and you will have errors like these. At the very least, make your iframes have the ID of <ul> <li>"frame_" + $(link).attr("rel")</li> <li>rather than the ct numeric variable you are using now (copy of c)</li> </ul> so that an example ID may be "frame_2" for the button with rel attribute of 2. That way you won't have a button with rel attribute of 2 connected to some frame with a random numeric ID. Get rid of the c variable completely. Instead of this loop: <pre><code>if(ct>1) { for(i=ct-1;i>0;i--){ alert(i); fr = document.getElementById (i); if (fr.style.display!='none') fr.style.display="none"; } } </code></pre> use: <pre><code>$("#content").children("div.dcontent").each(function() { var theFrame = $(this).find("li iframe"); if ($(theFrame).attr("id") != ("frame_" + $(link).attr("rel"))) { $(theFrame).css("display", "none"); } }); </code></pre> That way you can easily link the rel attribute to the frame's ID, rather than an arbitrary numeric value from your c variable. You should use your rel attribute for everything, since you've given your links that. You could use use something like data-buttonid and use .data() to access it, but that's up to you. Then when you ID everything, use that number to pair everything together. i.e. <ul> <li>Frame ID: "frame_" + $(link).attr("rel")</li> <li>Tab ID/Name: "tab_" + $(link).attr("rel")</li> <li>A Name: "tab_anchor_" + $(link).attr("rel")</li> </ul> Testing with the code I provided resulted in it executing how you want.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. PODynamic creation of tab with iframe
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USPatrick Golden
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. PODynamic creation of tab with iframe
 singulars
 PostTypePostTypeId
 PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTAcceptedByOriginator
CommentsPostId
1. This table or related slice is empty.

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.