-1

스크롤 다운 웹 페이지에는 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> 

답변

2

은 작업 및 비 작업 파일을 비교하십시오. Chrome에서 디버거를 사용해보세요.

무엇이 잘못되었는지를 말하기가 어렵습니다.

ScrollBarDemo() 클래스의 발췌문에 닫는 괄호와 세미콜론이 없습니다. 또한 작동하지 않는 temp.html에 #content 요소가 없습니다.

일반적으로 이것은 디버깅 연습입니다. 무엇이 잘못되었는지를 결정하기 위해 몇 가지 기본적인 디버깅 단계를 거쳐야합니다. 잘못된 점을 좁히고보다 구체적인 질문을 할 수 있다면 더 좋은 질문이 될 것입니다.

또한이 문제는 앱 엔진이나 파이썬과별로 관련이 없습니다. 그것은 당신의 javascript/html에서 잘못된 것일 수 있습니다.

관련 문제