Google App Engine中的无限滚动

Question

I am using Infinite-scroll Jquery for scroll down web pages. I am using bootstrap for designing. it works perfect for normal html code. But when i use bootstrap . It not showing any bootstrap component.

When i put normal HTML code in temp.html file, it works perfectly. But when i am inserting bootstrap classes and its code to temp.html infinite scroll it is not working.

Here is my Code for 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()

Here is the 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>

Here is the Scroll Class

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 [NOT WORKING]

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

Answer 1

Try comparing your working and non-working files. Also try using the debugger in Chrome.

It's difficult to tell what's wrong.

For one thing, your excerpt from class ScrollBarDemo() is missing a closing parenthesis and semicolon. Also you don't have a #content element in your not working temp.html.

In general, this is a debugging exercise. You should go through some basic debugging steps to determine what's wrong. It'll be a better question if you can narrow down what's wrong and ask a more specific question.

Also, this problem doesn't have much to do with app engine or python. It seems likely to be something wrong in your javascript/html.