NoDinner NoDinner - 3 months ago 8
HTML Question

Python_Flask_Webapp Select menu doesn't work

I'm learning Flask Web Development this book, I have a function on my page that in the "account" there is a select menu , I can choose the function inside , i.e. change password , or log out.
But it's strange that the select menu doesn't work in the index page, no response when I click the "account" , in others page , for example , below /user/AllenXu page , it works normally .

http://localhost:5000/user/AllenXu


other pages

But in my index page, u can see it doesn't work.

index page

What is confusing me is that the select menu code was setting in the base.html which is extends from bootstrap template , and other pages extends from the base.html , so actually it should work in every page which extends from base.html.

And actually it does work in
http://localhost:5000/user/AllenXu


But why it does not work in index page ?

Below is my code information

base.html

{% extends "bootstrap/base.html" %}

{% block title %}Flasky{% endblock %}

{% block head %}
{{ super() }}
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
{% endblock %}





{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{url_for('main.index')}}">Flasky</a>
</div>

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="{{url_for('main.index')}}">Home</a></li>

{% if current_user.is_authenticated %}
<li><a href="{{ url_for('main.user', username=current_user.username) }}">Profile</a>
</li>
{% endif %}
</ul>

<ul class="nav navbar-nav navbar-right">

{% if current_user.is_authenticated %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="{{ current_user.gravatar(size=18) }}">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="{{ url_for('auth.change_password') }}">Change Password</a></li>
<li><a href="{{ url_for('auth.change_email_request') }}">Change Email</a></li>
<li><a href="{{ url_for('auth.logout') }}">Log Out</a></li>
</ul>
</li>
{% else %}
<li><a href="{{ url_for('auth.login') }}">Log In</a></li>
{% endif %}
</ul>
</div>
</div>
</div>

{%endblock%}
{%block content%}
<div class="container">
{% for message in get_flashed_messages() %}
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alert">&times;</button>
{{ message }}
</div>
{% endfor %}
{% block page_content %}{% endblock %}
</div>
{%endblock%}


My views.py

from datetime import datetime
from flask import render_template,session,redirect,url_for,flash
from . import main
from .forms import NameForm,EditProfileForm,EditProfileAdminForm,PostForm
from .. import db
from ..models import User,Role,Permission,Post
from flask.ext.login import login_required,current_user
from ..decorators import admin_required

@main.route('/',methods=['GET','POST'])
def index():
form = PostForm()
if current_user.can(Permission.WRITE_ARTICLES) and form.validate_on_submit():
post = Post(body = form.body.data,author = current_user._get_current_object())
db.session.add(post)
return redirect(url_for('.index'))
posts = Post.query.order_by(Post.timestamp.desc()).all()
return render_template('index.html',form = form, posts = posts)



@main.route('/user/<username>')
def user(username):
user = User.query.filter_by(username = username).first()
if user is None:
abort (404)
return render_template('user.html',user = user)
enter code here


my index.html file

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Flasky{% endblock %}
{% block page_content %}

{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{% endblock %}

<div class="page-header">
<h1>Hello,
{% if current_user.is_authenticated%}
{{ current_user.username }}
{% else %}
Stranger!
{% endif %}
</h1>
</div>

<div>
{% if current_user.can(Permission.WRITE_ARTICLES) %}
{{ wtf.quick_form(form) }}
{% endif %}
</div>
<ul class = "posts">
{% for post in posts %}
<li class = "post">
<div class="profile-thumbnail">
<a href = "{{ url_for('.user',username = post.author.username) }}">
<img class = "img-rounded profile-thumbnail"
src = "{{ post.author.gravatar(size = 40) }}">
</a>
</div>

<div class="post-date">{{ moment(post.timestamp).fromNow() }}</div>
<div class="post-author">
<a href = "{{ url_for('.user',username = post.author.username) }}">
{{ post.author.username }}
</a>
</div>
<div class = "post-body">{{ post.body }}</div>
</li>
{% endfor %}
</ul>
{% endblock %}


Thanks in advance for helping me !!
If any more information needed , please let me know

Answer

Finally , I found the problem which caused this...

because ...in my index.html , I insert the {%block scripts%} inside the {%block page_content%}....

the "block" should be seprarte...if block A is inside block B, the A is useless

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Flasky{% endblock %}
{% block page_content %}

{% block scripts %}          
{{ super() }}                 
{{ moment.include_moment() }}
{% endblock %}

<div class="page-header">
    <h1>Hello,
    {% if current_user.is_authenticated%}
    {{ current_user.username }}
    {% else %}
    Stranger!
    {% endif %}
    </h1>
</div>