StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POChanging the text in the heading of a collapsible menu causes it to dissapear
primarykey
Id
11749689
data
AcceptedAnswerId
11767122
AnswerCount
1
ClosedDate
CommentCount
9
CommunityOwnedDate
CreationDate
2012-07-31T22:04:50.003
FavoriteCount
0
LastActivityDate
2012-08-01T20:32:00.270
LastEditDate
2012-07-31T23:05:05.473
LastEditorUserId
1555330
OwnerUserId
1555330
ParentId
0
PostTypeId
1
Score
2
ViewCount
583
LastEditorDisplayName
text
Body
<p>I am trying to create an application that stores data in a series of collapsible menus. First there is a menu for months, then days inside the months, then times inside the days and then data inside the times. I need the headings for the menus to be able to change depending on the time and date the user enters, but if I change the heading text it the menu loses its graphic and just becomes text. When clicked on it displays the contents of the collapsible, but does not trigger the onclick event of the collapsible. Most of the html code given was generated by Codiqa. How do I make this work right?</p> <p>html page with collapsible:</p> <pre><code> <div data-role="page" data-theme="a" id="page15"> <div data-theme="a" data-role="header"> <h3> Logs </h3> <a data-role="button" data-direction="reverse" data-transition="slide" href="#page3" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left"> Back </a> </div> <div data-role="content" style="padding: 15px"> <a data-role="button" data-transition="slide" href="#page1"> Add log entry </a> <div data-role="collapsible-set" data-theme="" data-content-theme=""> <div data-role="collapsible" data-collapsed="true"> <h3> July 2012 </h3> <div data-role="collapsible-set" data-theme="" data-content-theme=""> <div data-role="collapsible" data-collapsed="true" onclick="getLogTime(); this.onclick=null"> <h3> July 5 </h3> <div data-role="collapsible-set" data-theme="" data-content-theme=""> <div data-role="collapsible" data-collapsed="true" onclick="getLogData(); this.onclick=null"> <h3 id=time1>//Heading in question </h3> <div> <p id="logFortime1"> Log 1 </p> </div> </div> <div data-role="collapsible" data-collapsed="true"> <h3> 12:47 pm </h3> </div> </div> </div> <div data-role="collapsible" data-collapsed="true"> <h3> July 6 </h3> </div> </div> </div> <div data-role="collapsible" data-collapsed="true"> <h3> August 2012 </h3> </div> </div> <a data-role="button" data-transition="slide" href="#page21"> Graphs </a> </div> </div> </code></pre> <p>Function that changes heading:</p> <pre><code>function getLogTime() { $('#time1').html('Time'); } </code></pre> <p>Edit:</p> <p>Added "" around <code>id=time1</code> as mentioned by Joseph Marikle fixed the onclick event not triggering, but the graphic for the collapsible still does not display.</p> <p>Edit:</p> <p>css generated by Codiqa:</p> <pre><code>/* Generic icon styles */ /* 26x26 pixels */ .ui-btn-icon-left .ui-btn-inner .ui-icon.ui-iconsize-26, .ui-btn-icon-right .ui-btn-inner .ui-icon.ui-iconsize-26 { margin-top: -13px; } .ui-btn-icon-notext .ui-icon { display: block; z-index: 0;} .ui-btn-icon-top .ui-btn-inner .ui-icon.ui-iconsize-26, .ui-btn-icon-bottom .ui-btn-inner .ui-icon.ui-iconsize-26 { position: absolute; left: 50%; margin-left: -13px; } .ui-header .ui-btn-icon-left .ui-icon.ui-iconsize-26, .ui-footer .ui-btn-icon-left .ui-icon.ui-iconsize-26, .ui-mini.ui-btn-icon-left .ui-icon.ui-iconsize-26, .ui-mini .ui-btn-icon-left .ui-icon.ui-iconsize-26 { left: 3px; margin-top: -12px; } .ui-header .ui-btn-icon-right .ui-icon.ui-iconsize-26, .ui-footer .ui-btn-icon-right .ui-icon.ui-iconsize-26, .ui-mini.ui-btn-icon-right .ui-icon.ui-iconsize-26, .ui-mini .ui-btn-icon-right .ui-icon.ui-iconsize-26 { right: 3px; margin-top: -12px; } .ui-header .ui-btn-icon-top .ui-icon.ui-iconsize-26, .ui-footer .ui-btn-icon-top .ui-icon.ui-iconsize-26, .ui-mini.ui-btn-icon-top .ui-icon.ui-iconsize-26, .ui-mini .ui-btn-icon-top .ui-icon.ui-iconsize-26 { top: 3px; } .ui-header .ui-btn-icon-bottom .ui-icon.ui-iconsize-26, .ui-footer .ui-btn-icon-bottom .ui-icon.ui-iconsize-26, .ui-mini.ui-btn-icon-bottom .ui-icon.ui-iconsize-26, .ui-mini .ui-btn-icon-bottom .ui-icon.ui-iconsize-26 { bottom: 3px; } .ui-icon-ios-pack-color-left-arrow { width: 26px; height: 26px; background-color: transparent !important; box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; } .ui-icon-ios-pack-color-right-arrow { width: 26px; height: 26px; background-color: transparent !important; box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; } .ui-icon-ios-pack-color-up-arrow { width: 26px; height: 26px; background-color: transparent !important; box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; } .ui-icon-ios-pack-color-back { width: 26px; height: 26px; background-color: transparent !important; box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; } .ui-icon-ios-pack-color-forward { width: 26px; height: 26px; background-color: transparent !important; box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; } .ui-icon-ios-pack-color-down-arrow { width: 26px; height: 26px; background-color: transparent !important; box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; } .ui-icon-ios-pack-color-plus { width: 26px; height: 26px; background-color: transparent !important; box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; } .ui-icon-ios-pack-color-minus { width: 26px; height: 26px; background-color: transparent !important; box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; } .ui-icon-ios-pack-color-check { width: 26px; height: 26px; background-color: transparent !important; box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; } .ui-icon-ios-pack-color-delete { width: 26px; height: 26px; background-color: transparent !important; box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; } .ui-icon-ios-pack-color-gear { width: 26px; height: 26px; background-color: transparent !important; box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; } .ui-icon-ios-pack-color-refresh { width: 26px; height: 26px; background-color: transparent !important; box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; } .ui-icon-ios-pack-color-grid { width: 26px; height: 26px; background-color: transparent !important; box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; } .ui-icon-ios-pack-color-star { width: 26px; height: 26px; background-color: transparent !important; box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; } .ui-icon-ios-pack-color-info { width: 26px; height: 26px; background-color: transparent !important; box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; } .ui-icon-ios-pack-color-home { width: 26px; height: 26px; background-color: transparent !important; box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; } .ui-icon-ios-pack-color-search { width: 26px; height: 26px; background-color: transparent !important; box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; } .ui-icon-ios-pack-color-alert { width: 26px; height: 26px; background-color: transparent !important; box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; } .ui-icon-ios-pack-color-left-arrow { background: url('images/ios-pack-color.png') -260px 50% no-repeat transparent !important; } .ui-icon-ios-pack-color-right-arrow { background: url('images/ios-pack-color.png') -364px 50% no-repeat transparent !important; } .ui-icon-ios-pack-color-up-arrow { background: url('images/ios-pack-color.png') -442px 50% no-repeat transparent !important; } .ui-icon-ios-pack-color-back { background: url('images/ios-pack-color.png') -26px 50% no-repeat transparent !important; } .ui-icon-ios-pack-color-forward { background: url('images/ios-pack-color.png') -130px 50% no-repeat transparent !important; } .ui-icon-ios-pack-color-down-arrow { background: url('images/ios-pack-color.png') -104px 50% no-repeat transparent !important; } .ui-icon-ios-pack-color-plus { background: url('images/ios-pack-color.png') -312px 50% no-repeat transparent !important; } .ui-icon-ios-pack-color-minus { background: url('images/ios-pack-color.png') -286px 50% no-repeat transparent !important; } .ui-icon-ios-pack-color-check { background: url('images/ios-pack-color.png') -52px 50% no-repeat transparent !important; } .ui-icon-ios-pack-color-delete { background: url('images/ios-pack-color.png') -78px 50% no-repeat transparent !important; } .ui-icon-ios-pack-color-gear { background: url('images/ios-pack-color.png') -156px 50% no-repeat transparent !important; } .ui-icon-ios-pack-color-refresh { background: url('images/ios-pack-color.png') -338px 50% no-repeat transparent !important; } .ui-icon-ios-pack-color-grid { background: url('images/ios-pack-color.png') -182px 50% no-repeat transparent !important; } .ui-icon-ios-pack-color-star { background: url('images/ios-pack-color.png') -416px 50% no-repeat transparent !important; } .ui-icon-ios-pack-color-info { background: url('images/ios-pack-color.png') -234px 50% no-repeat transparent !important; } .ui-icon-ios-pack-color-home { background: url('images/ios-pack-color.png') -208px 50% no-repeat transparent !important; } .ui-icon-ios-pack-color-search { background: url('images/ios-pack-color.png') -390px 50% no-repeat transparent !important; } .ui-icon-ios-pack-color-alert { background: url('images/ios-pack-color.png') -0px 50% no-repeat transparent !important; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) { .ui-icon-ios-pack-color-left-arrow,.ui-icon-ios-pack-color-right-arrow,.ui-icon-ios-pack-color-up-arrow,.ui-icon-ios-pack-color-back,.ui-icon-ios-pack-color-forward,.ui-icon-ios-pack-color-down-arrow,.ui-icon-ios-pack-color-plus,.ui-icon-ios-pack-color-minus,.ui-icon-ios-pack-color-check,.ui-icon-ios-pack-color-delete,.ui-icon-ios-pack-color-gear,.ui-icon-ios-pack-color-refresh,.ui-icon-ios-pack-color-grid,.ui-icon-ios-pack-color-star,.ui-icon-ios-pack-color-info,.ui-icon-ios-pack-color-home,.ui-icon-ios-pack-color-search,.ui-icon-ios-pack-color-alert { background-image: url('images/ios-pack-color@2x.png'); -moz-background-size: 468px 26px; -o-background-size: 468px 26px; -webkit-background-size: 468px 26px; background-size: 468px 26px; } } .text-align-center { text-align: center; } .text-align-right { text-align: right; } /** CSS for non-standard jQuery Mobile styles or Codiqa components **/ .split-wrapper { width: 100%; min-height: 200px; clear: both; } @media all and (min-width: 650px) { .content-secondary { text-align: left; float: left; width: 45%; background: none; padding: 1.5em 6% 3em 0; margin: 0; } .content-secondary { background: none; border-top: none; } .content-primary { width: 45%; float: right; margin-right: 1%; padding-right: 1%; } .content-primary ul:first-child { margin-top: 0; } .content-secondary ul.ui-listview, .content-secondary ul.ui-listview-inset { margin: 0; } .content-secondary ul.ui-listview .ui-li-divider, .content-secondary ul.ui-listview .ui-li { border-radius: 0px; } .content-secondary ul.ui-listview .ui-li { border-left: 0; border-right: 0; } .content-secondary h2 { position: absolute; left: -9999px; } .content-secondary .ui-li-divider { padding-top: 1em; padding-bottom: 1em; } .content-secondary { margin: 0; padding: 0; } } @media all and (min-width: 750px){ .content-secondary { width: 34%; } .content-primary { width: 60%; padding-right: 1%; } .content-secondary ul.ui-listview-inset { } @media all and (min-width: 1200px){ .content-secondary { width: 30%; padding-right:6%; margin: 0px 0 20px 5%; } .content-secondary ul { margin: 0; } .content-secondary { margin: 0; padding: 0; } .content-primary { width: 50%; margin-right: 5%; padding-right: 3%; } .content-primary { width: 60%; } } </code></pre> <p>The html file also uses <code><link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.css" /></code></p>
Tags
<javascript><jquery><html><jquery-mobile><cordova>
Title
Changing the text in the heading of a collapsible menu causes it to dissapear
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USAlwaysdeadfred
UserOwnerUserId
1. USAlwaysdeadfred
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
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POChanging the text in the heading of a collapsible menu causes it to dissapear
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
2. VO
  singulars
  PostPostId
  POChanging the text in the heading of a collapsible menu causes it to dissapear
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
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.