-1

Webページを下にスクロールするためにInfinite-scrollJqueryを使用しています。設計にブートストラップを使用しています。通常のHTMLコードに最適です。しかし、私がブートストラップを使用するとき。ブートストラップコンポーネントは表示されません。

通常のHTMLコードをtemp.htmlファイルに入れると、完全に機能します。しかし、ブートストラップクラスとそのコードをtemp.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()

これがdemo.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()

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>
4

1 に答える 1

2

動作しているファイルと動作していないファイルを比較してみてください。また、Chromeでデバッガーを使用してみてください。

何が悪いのか見分けるのは難しい。

一つには、クラスScrollBarDemo（）からの抜粋に、閉じ括弧とセミコロンがありません。また、動作していないtemp.htmlに#content要素がありません。

一般に、これはデバッグの演習です。何が問題なのかを判断するには、いくつかの基本的なデバッグ手順を実行する必要があります。何が悪いのかを絞り込んで、より具体的な質問をすることができれば、より良い質問になるでしょう。

また、この問題はアプリエンジンやPythonとはあまり関係がありません。javascript/htmlに問題がある可能性があります。

于 2013-03-01T19:08:46.857 に答える