Phonegap OnsenUI不附加来自jquery ajax调用的数据

时间:2016-01-03 08:34:31

标签: cordova onsen-ui

我试图在进行ajax调用后附加一些数据。我能够将数据附加到我的Phonegap应用程序中的可见页面模板(page1.html),但我无法将任何数据附加到其他页面,这些页面不可见但在同一个index.html文件中。关于如何解决这个问题的任何想法?

        $(document).ready(function () 
        {
            var user_id = 1;

            $( document).ready(function (){
                $.ajax({
                    type: "GET", 
                    url: "http://xxx-env.elasticbeanstalk.com/api/usersol/user/1",
                    dataType: 'jsonp',
                    error: function(){
                        //alert( 'Unable to load feed, Incorrect path or invalid feed' );
                    },
                    success: function(data){

                            alert(data[0].cortisol);
                            $("#cort_l_today").replaceWith('<p id="cort_l_today"><span class="numberCircle3" >'+data[0].cort+'</span></p>');
                            $("#cort_l_today2").replaceWith('<p id="cort_l_today"><span class="numberCircle3" >'+data[0].cort+'</span></p>');


                    }});
            }); 
        });




    <ons-template id="page1.html">
            <ons-page>
                <ons-toolbar>
                    <div class="left">
                        <ons-toolbar-button ng-click="menu.toggle()">
                            <ons-icon icon="ion-navicon-round" size="28px" fixed-width="false" style="color:#fff" ></ons-icon>
                        </ons-toolbar-button>
                    </div>
                    <div class="center">Dashboard</div>
                    <div class="right">
                        <ons-toolbar-button>
                          <ons-icon icon="ion-refresh" fixed-width="false" style="vertical-align: -4px;color:#5e3f3d"></ons-icon>
                        </ons-toolbar-button>                   

                        <ons-toolbar-button>
                          <ons-icon icon="ion-plus-round" fixed-width="false" style="vertical-align: -4px;color:#5e3f3d" id="camBtn"></ons-icon>
                        </ons-toolbar-button>
                    </div>                

                </ons-toolbar>

                <div class="tab-bar tab-bar--top tab-bar--top-border">
                  <label class="tab-bar__item tab-bar--top-border__item">
                    <input type="radio" name="top-tab-bar-b" checked="checked">
                    <button class="tab-bar__button tab-bar--top-border__button">
                      <ons-icon icon="ion-arrow-graph-up-left" size="28px" fixed-width="false"></ons-icon>
                    </button>
                  </label>

                </div>        

                <ons-row style="margin-top: 0px; text-align: center;">

                        <p style="color: #999; font-size: 13px;">
                            <div id ="postlist"></div>
                            <p id="cort_l_today2"></p>
                            <div id='chart'>
                              <svg style='height:500px'> </svg>
                            </div>                      

                         </p>
                </ons-row>          

                <ons-row align="center" style="margin-top: 30px; text-align: center;">
                    <ons-col width="10%">
                      <div class="Demo">

                      </div>
                    </ons-col>
                    <ons-col>

                        <ons-row align="center" style="margin-top: 0px; text-align: center;">
                            <ons-col width="50%">
                              <div class="numberCircle">
                                12                        </div>
                              <div class="center" style="font-size:11px;padding-top:15px">Weekly Avg </div>
                            </ons-col>
                            <ons-col width="50%">
                              <div class="numberCircle2">
                                 15%
                              </div>
                              <div class="center" style="font-size:11px;padding-top:15px">Weekly Change </div>
                            </ons-col>
                        </ons-row>                

                    </ons-col>
                    <ons-col width="10%">
                      <div class="Demo">

                      </div>
                    </ons-col>
                  </ons-row>

            </ons-page>
        </ons-template>

 <ons-template id="page2.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button ng-click="menu.toggle()">
                        <ons-icon icon="ion-navicon-round" size="28px" fixed-width="false" style="color:#fff"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center">Activity</div>
                <div class="right">
                    <ons-toolbar-button>
                      <ons-icon icon="ion-refresh" fixed-width="false" style="vertical-align: -4px;color:#5e3f3d"></ons-icon>
                    </ons-toolbar-button>                  

                    <ons-toolbar-button>
                      <ons-icon icon="ion-plus-round" fixed-width="false" style="vertical-align: -4px;color:#5e3f3d"></ons-icon>
                    </ons-toolbar-button>
                </div>                

            </ons-toolbar>


            <div class="tab-bar tab-bar--top tab-bar--top-border">
              <label class="tab-bar__item tab-bar--top-border__item">
                <input type="radio" name="top-tab-bar-b" checked="checked">
                <button class="tab-bar__button tab-bar--top-border__button">
                  <ons-icon icon="ion-stats-bars" size="28px" fixed-width="false"></ons-icon>
                </button>
              </label>

            </div>        

            <ons-row style="margin-top: 20px; text-align: center;">
                <ons-col>

                    <p style="color: #999; width:100%">
                          <p style="font-size:15px;color:#999"> <h2 style="color:#999">Wednesday</h2></p>
                          <p style="font-size:15px"> <h5 style="color:#c5c5c5"><ons-icon icon="ion-calendar" size="38px" fixed-width="false"></ons-icon> 11th Dec 2015</h5></p>

                         <p id="cort_l_today"><span class="numberCircle3" ></span></p> 
                          <p style="font-size:15px;padding-top:20px"> </p>
                          <p style="margin-left:5%;margin-right:5%">

                            <ons-row align="center" style="margin-top: 0px; text-align: center;">
                                <ons-col width="40%">
                                  <button class="button--large--cta" >Previous</button>
                                </ons-col>
                                <ons-col width="20%">

                                </ons-col>                              
                                <ons-col width="40%">
                                 <button class="button--large--cta" >Next</button></p>
                                </ons-col>
                            </ons-row>                              

                     </p>
                     <p style="background:#e15500;padding-top:15px;padding-bottom:15px;color:#fff;font-size:14px" align="center">Todays activities</p>
                      <p style="background:#fff;border-bottom:1px solid #e3e3e3;padding-top:15px;padding-bottom:15px;color:#fff;font-size:14px" align="center">dasdada</p>

                      <p style="background:#fff;border-bottom:1px solid #e3e3e3;padding-top:15px;padding-bottom:15px;color:#fff;font-size:14px" align="center">dasdadad</p>


                     <p style="background:#e15500;padding-top:15px;padding-bottom:15px;color:#fff;font-size:14px" align="center">Past 7 days activities</p>          

                      <p style="background:#fff;border-bottom:1px solid #e3e3e3;padding-top:15px;padding-bottom:15px;color:#fff;font-size:14px" align="center">dasdada</p>




                </ons-col>
            </ons-row>

        </ons-page>
    </ons-template>

1 个答案:

答案 0 :(得分:0)

我不确定,但可能是,在使用双/同一ID插入时,DOM会出现问题:

  

cort_l_today

插入后,DOM会遇到麻烦。 ;-))所以你应该改变这一点,改为上课。