스크롤 다운 웹 페이지에는 Infinite-scroll Jquery을 사용하고 있습니다. 나는 디자인을 위해 bootstrap을 사용하고있다. 그것은 정상적인 HTML 코드에 대해 완벽하게 작동합니다. 하지만 bootstrap을 사용할 때. 부트 스트랩 구성 요소를 표시하지 않습니다.Google 애플리케이션 엔진의 무한 스크롤
일반 HTML 코드를 temp.html 파일에 넣으면 완벽하게 작동합니다. 하지만 bootstrap 클래스와 그 코드를 temp.html 무한 스크롤에 삽입 할 때 작동하지 않습니다. 여기
는 다음
<div id="content>
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
{{alldata[0]}}
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
{{alldata[0]}}
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
</div>
<a id="next" href="#">next page?</a>
<script>
$('#content').infinitescroll({
navSelector : "#next:last",
nextSelector : "a#next:last",
itemSelector : "#content p",
debug : true,
dataType : 'html',
maxPage : 200,
path: function(index) {
return "/ScrollBarDemo/" + index
}
}, function(newElements, data, url){
});
</script>
가 스크롤 클래스
class ScrollBarDemo(BaseHandler):
def get(self,index):
template=jinja_environment.get_template('temp.html')
self.response.out.write(template.render()
인 demo.html Handeller 여기
class Demo(webapp2.RequestHandler):
def get(self):
conn = get_connection()
data = conn.cursor()
data.execute("""
select * from table1
""")
alldata=data.fetchall()
conn.commit()
template=jinja_environment.get_template('demo.html')
template_values={
'alldata':alldata
}
self.response.out.write(template.render(template_values))
conn.close()
내 코드입니다 0
temp.html [WORKING]
<div id="content">
<p>
<input type="text">
</p>
</div>
temp.html [작동하지 않음]
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>