我试图在进行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>
答案 0 :(得分:0)
我不确定,但可能是,在使用双/同一ID插入时,DOM会出现问题:
cort_l_today
插入后,DOM会遇到麻烦。 ;-))所以你应该改变这一点,改为上课。