hi been trying to render a page but it doesn't load fully i dont where the problem is but this is the code i used.. It worked well on pycharm and on my local host
{% extends "layout.html" %} {% block body %} <header> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type=text/javascript> $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; </script> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/category.js')}}"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/jquery-3.2.1.min.js')}}"></script> <div class="header-content"> <div class="header-content-inner"> <h1>{{category}}</h1> <hr class="header-hr"> <p>This blog is meant to reach out</p> {% if session.logged_in %} {% else %} <a href ="/register" class="btn btnt btn-primary btn-xl page-scroll">Register</a> <a href ="/login" class="btn btnt btn-primary btn-xl page-scroll">Login</a> {% endif %} </li>
</ul>
</div>
</div>
</header>
<section id="load" class="no-padding">
</section> </div> {% endblock %}
$(document).ready(function(){ var url ='/article_cat'; var flag = 0 ; action = 'inactive'; $ .ajax({ url:url, contentType: "application/json; charset=utf-8", dataType :'json', data: {"limit":7, "start":0 }, success:function (data) { var load=""; $ .each (data,function(key,val){ load +="<div class='col-lg-4 col-sm-6'>"; load +="<a href='/article/" + val.title + "'class='portfolio-box'>"; load +="<img src='http:"+ val.image_url + "'class='img-responsive' alt=''/>"; load += "<div class='portfolio-box-caption'>"; load += "<div class='portfolio-box-caption-content'>"; load += "<div class='project-category text-faded'>"; load += "</div>"; load += "<div class='project-name'>"; load += val.title ; load +="</div>"; load +="</div>"; load +="</div>"; load +="</a>"; load +="</div>"; }); $('section').append(load); flag += 3 }
});
$(window).scroll(function(){
if ($(window).scrollTop() >= $(document).height()-$(window).height()){
$ .ajax({
url:url,
contentType: "application/json; charset=utf-8",
dataType :'json',
data: {"limit":7, "start":flag },
success:function (data) {
var load="";
$ .each (data.data,function(key,val){
load +="<div class='col-lg-4 col-sm-6'>";
load +="<a href='/article/" + val.title + "'class='portfolio-box'>";
load +="<img src='http:"+ val.image_url + "'class='img-responsive' alt=''/>";
load += "<div class='portfolio-box-caption'>";
load += "<div class='portfolio-box-caption-content'>";
load += "<div class='project-category text-faded'>";
load += "</div>";
load += "<div class='project-name'>";
load += val.title ;
load +="</div>";
load +="</div>";
load +="</div>";
load +="</a>";
load +="</div>";
});
$('#load').append(load);
if (load == ''){
action='active';
}
else{
flag +=3;
action = 'inactive'
}
}
});
}
});
});
class Article_Meta(Resource): def get(self): limit = request.args.get('limit') start = request.args.get('start') category = session.get('category',None) parameters = (category,limit,start) #Connect to databse conn = e.connect() #Perform query and return JSON data query = conn.execute("SELECT a.title, a.image_url FROM articles AS a LEFT OUTER JOIN category AS c ON c.id= a.categoryid WHERE c.name = ? ORDER BY date DESC LIMIT ? OFFSET ?",(parameters,)) return ({"data":[dict(zip(tuple(query.keys()),i)) for i in query.cursor]}) api.add_resource(Article_Meta,'/article_cat')