I am trying to create an application that stores data in a series of

Question

0

Asked: June 9, 20262026-06-09T00:11:09+00:00 2026-06-09T00:11:09+00:00

I am trying to create an application that stores data in a series of

0

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?

html page with collapsible:

<!-- Logs -->
    <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>

Function that changes heading:

function getLogTime() {
    $('#time1').html('Time');
}

Edit:

Added “” around id=time1 as mentioned by Joseph Marikle fixed the onclick event not triggering, but the graphic for the collapsible still does not display.

Edit:

css generated by Codiqa:

/* 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%;
    }
}

The html file also uses <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.css" />

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-09T00:11:15+00:00

I think I’ve figured out what is causing your issue. My demo linked above does recreate the problem

click
July 2012->July 5->//Heading in question->Log 1

The problem you are experiencing is caused by the mobile library you are using. When this library is used, it alters the HTML adding child elements to your existing elements. Thus when you change the HTML of an element, it alters the styling drastically. What you need to do is find where it’s placing your text. From what I’ve looked into, it appears that the text can be found in element with the class of ui-btn-text. From there it’s as simple as changing the selector in your code (I also used text instead of html):

function getLogTime() {
    $('#time1 .ui-btn-text').text('Time');
}

You can see it in the working version of my demo (source)

Drop a comment if you have any questions.

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I am trying to create an application that stores data in a series of

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply