"Ajax support"
This commit is contained in:
parent
4ff95ba727
commit
84d9a0664e
144
tetawebapp/static/scripts/tetawebapp.js
Normal file
144
tetawebapp/static/scripts/tetawebapp.js
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
var red = "#FF0000";
|
||||||
|
var green = "#00FF00";
|
||||||
|
var light_red = "#FCD5DC";
|
||||||
|
var light_green = "#D5FCD8";
|
||||||
|
var base_bg = "#FFFFFF";
|
||||||
|
var base_border = "#888888";
|
||||||
|
|
||||||
|
/* **************************************************************************************
|
||||||
|
* GLOBAL
|
||||||
|
* **************************************************************************************/
|
||||||
|
|
||||||
|
// Cookies
|
||||||
|
function setcookie(cname, cvalue, exdays) {
|
||||||
|
// Set cookie
|
||||||
|
var d = new Date();
|
||||||
|
d.setTime(d.getTime() + (exdays*24*60*60*1000));
|
||||||
|
var expires = "expires="+ d.toUTCString();
|
||||||
|
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
|
||||||
|
}
|
||||||
|
|
||||||
|
function getcookie(cname) {
|
||||||
|
// Get cookie by name
|
||||||
|
var value = "; " + document.cookie;
|
||||||
|
var parts = value.split("; " + cname + "=");
|
||||||
|
if (parts.length == 2) return parts.pop().split(";").shift();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Eye candies
|
||||||
|
function invalid_input(obj) {
|
||||||
|
// Invalid input makes obj borders and background to glow red for 2 seconds
|
||||||
|
// Border color will stay red until a valid input is sent
|
||||||
|
obj.style.backgroundColor = light_red;
|
||||||
|
obj.style.borderColor = red;
|
||||||
|
setTimeout( function() {
|
||||||
|
obj.style.backgroundColor = base_bg;
|
||||||
|
}
|
||||||
|
, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function valid_input(obj) {
|
||||||
|
// Valid input makes obj background to glow green for 2 seconds
|
||||||
|
// If obj borders were red, they get they normal color back
|
||||||
|
obj.style.backgroundColor = light_green;
|
||||||
|
obj.style.borderColor = base_border;
|
||||||
|
setTimeout( function() {
|
||||||
|
obj.style.backgroundColor = base_bg;
|
||||||
|
}
|
||||||
|
, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* **************************************************************************************
|
||||||
|
* AJAX
|
||||||
|
* **************************************************************************************/
|
||||||
|
|
||||||
|
function get_html_from_ajax(obj, url) {
|
||||||
|
// Get HTML content from AJAX request from url argument
|
||||||
|
// HTML content is then put as innerHTML to obj
|
||||||
|
var xhttp = new XMLHttpRequest();
|
||||||
|
xhttp.onerror = function(){
|
||||||
|
obj.innerHTML = "Erreur lors de la récuperation du contenu (1)";
|
||||||
|
};
|
||||||
|
|
||||||
|
xhttp.onload = function(){
|
||||||
|
if (xhttp.status != 200) {
|
||||||
|
obj.innerHTML = "Erreur lors de la récuperation du contenu (2)";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
xhttp.onreadystatechange = function() {
|
||||||
|
if (xhttp.readyState == 4 && xhttp.status == 200) {
|
||||||
|
var response = xhttp.responseText;
|
||||||
|
obj.innerHTML = response;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhttp.open('POST', url, true);
|
||||||
|
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||||
|
xhttp.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
function set_value_from_ajax(obj, url, err_code) {
|
||||||
|
// Send value from obj.value via AJAX request to url argument
|
||||||
|
// obj.value is passed to URL in a REST sheme like <URL>/<VALUE>
|
||||||
|
// If err_code response is received, then a server side
|
||||||
|
// error has occured and input is invalidated.
|
||||||
|
url = url + '/' + obj.value;
|
||||||
|
var xhttp = new XMLHttpRequest();
|
||||||
|
xhttp.onerror = function(){
|
||||||
|
invalid_input(obj);
|
||||||
|
};
|
||||||
|
|
||||||
|
xhttp.onload = function(){
|
||||||
|
if (xhttp.status != 200) {
|
||||||
|
invalid_input(obj);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
xhttp.onreadystatechange = function() {
|
||||||
|
if (xhttp.readyState == 4 && xhttp.status == 200) {
|
||||||
|
var response = xhttp.responseText;
|
||||||
|
if (response == err_code) {
|
||||||
|
invalid_input(obj);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
valid_input(obj);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhttp.open('POST', url, true);
|
||||||
|
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||||
|
xhttp.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_value_from_ajax(obj, url, err_code) {
|
||||||
|
// Get value from AJAX request
|
||||||
|
// The returned value is then set to obj.value.
|
||||||
|
// If err_code response is received, then a server side
|
||||||
|
// error has occured and input is invalidated
|
||||||
|
var xhttp = new XMLHttpRequest();
|
||||||
|
xhttp.onerror = function(){
|
||||||
|
invalid_input(obj);
|
||||||
|
};
|
||||||
|
|
||||||
|
xhttp.onload = function(){
|
||||||
|
if (xhttp.status != 200) {
|
||||||
|
invalid_input(obj);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
xhttp.onreadystatechange = function() {
|
||||||
|
if (xhttp.readyState == 4 && xhttp.status == 200) {
|
||||||
|
var response = xhttp.responseText;
|
||||||
|
if (response == err_code) {
|
||||||
|
invalid_input(obj);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
obj.value = response;
|
||||||
|
valid_input(obj);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhttp.open('POST', url, true);
|
||||||
|
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||||
|
xhttp.send();
|
||||||
|
}
|
25
tetawebapp/templates/ajax.html
Normal file
25
tetawebapp/templates/ajax.html
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{% extends "index.html" %}
|
||||||
|
{% block main %}
|
||||||
|
<article class='left'>
|
||||||
|
<h3>Get HTML response from AJAX</h3>
|
||||||
|
<p>Click the refresh button to get the HTML response.</p>
|
||||||
|
<p>The response may randomly be an error response.</p>
|
||||||
|
<input type='button' class='refresh' value=' ' onclick='javascript:get_html_from_ajax(document.getElementById("html_container"), "/get_html_from_ajax");'>
|
||||||
|
</article>
|
||||||
|
<article class='right' id='html_container'>
|
||||||
|
</article>
|
||||||
|
<article class='left'>
|
||||||
|
<h3>Set value via AJAX</h3>
|
||||||
|
<p>Send value to the application.</p>
|
||||||
|
<p>If value is empty or is "We Make Porn" (case sensitive), an error is raised.</p>
|
||||||
|
<input type='text' id='value_sender'>
|
||||||
|
<input type='button' value="Try me" onclick='javascript:set_value_from_ajax(document.getElementById("value_sender"), "/set_value_from_ajax", "TETA_ERR");'>
|
||||||
|
</article>
|
||||||
|
<article class='left'>
|
||||||
|
<h3>Get value from AJAX</h3>
|
||||||
|
<p>Get a random value from the application.</p>
|
||||||
|
<p>Value may randomly be unavailable raising an error.</p>
|
||||||
|
<input type='text' id='value_receiver'>
|
||||||
|
<input type='button' value="Try me" onclick='javascript:get_value_from_ajax(document.getElementById("value_receiver"), "/get_value_from_ajax", "TETA_ERR");'>
|
||||||
|
</article>
|
||||||
|
{% endblock %}
|
24
tetawebapp/templates/ajax_html.html
Normal file
24
tetawebapp/templates/ajax_html.html
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<h3>This is the title</h3>
|
||||||
|
<img src='/static/images/dummy_pic.png' alt='dummy pic' title='dummy pic'/>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
|
officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||||
|
sed do eiusmod tempor incididunt ut labore
|
||||||
|
</p>
|
||||||
|
<p>This <a href='/plop.html'>link</a> will lead to an error page</p>
|
||||||
|
<p>
|
||||||
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
|
officia desers unt mollit anim id est laborum.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
|
officia deserunt mollit anim id est laborum.
|
||||||
|
</p>
|
@ -6,7 +6,7 @@
|
|||||||
<li><strike>Basic menu management</strike></li>
|
<li><strike>Basic menu management</strike></li>
|
||||||
<li>Installation wizard</li>
|
<li>Installation wizard</li>
|
||||||
<li>Back office for basic content management</li>
|
<li>Back office for basic content management</li>
|
||||||
<li>Basic Ajax support</li>
|
<li><strike>Basic Ajax support</strike></li>
|
||||||
<li>Session management</li>
|
<li>Session management</li>
|
||||||
<li>Basic documentation</li>
|
<li>Basic documentation</li>
|
||||||
<li>Horizontal navbar</li>
|
<li>Horizontal navbar</li>
|
||||||
|
@ -42,6 +42,7 @@ def get_menu(page):
|
|||||||
['Articles', '/articles', 0],
|
['Articles', '/articles', 0],
|
||||||
['Basics', '/basics', 0],
|
['Basics', '/basics', 0],
|
||||||
['Inputs', '/inputs', 0],
|
['Inputs', '/inputs', 0],
|
||||||
|
['Ajax', '/ajax', 0],
|
||||||
['Database', '/database', 0],
|
['Database', '/database', 0],
|
||||||
['Todo', '/todo', 0],
|
['Todo', '/todo', 0],
|
||||||
]
|
]
|
||||||
@ -69,7 +70,7 @@ def get_menu(page):
|
|||||||
@app.errorhandler(404)
|
@app.errorhandler(404)
|
||||||
def page_not_found(e):
|
def page_not_found(e):
|
||||||
""" 404 not found """
|
""" 404 not found """
|
||||||
return render_template('error.html', menu=app.menu), 404
|
return render_template('error.html'), 404
|
||||||
|
|
||||||
|
|
||||||
@app.route("/", methods=['GET', 'POST'])
|
@app.route("/", methods=['GET', 'POST'])
|
||||||
@ -97,6 +98,12 @@ def inputs():
|
|||||||
menu = get_menu(page)
|
menu = get_menu(page)
|
||||||
return render_template('inputs.html', menu=menu)
|
return render_template('inputs.html', menu=menu)
|
||||||
|
|
||||||
|
@app.route("/ajax", methods=['GET', 'POST'])
|
||||||
|
def ajax():
|
||||||
|
page = inspect.currentframe().f_code.co_name
|
||||||
|
menu = get_menu(page)
|
||||||
|
return render_template('ajax.html', menu=menu)
|
||||||
|
|
||||||
@app.route("/database", methods=['GET', 'POST'])
|
@app.route("/database", methods=['GET', 'POST'])
|
||||||
def database():
|
def database():
|
||||||
page = inspect.currentframe().f_code.co_name
|
page = inspect.currentframe().f_code.co_name
|
||||||
@ -109,7 +116,34 @@ def todo():
|
|||||||
menu = get_menu(page)
|
menu = get_menu(page)
|
||||||
return render_template('todo.html', menu=menu)
|
return render_template('todo.html', menu=menu)
|
||||||
|
|
||||||
|
########################################################################
|
||||||
|
# AJAX
|
||||||
|
########################################################################
|
||||||
|
|
||||||
|
@app.route("/get_html_from_ajax", methods=['GET', 'POST'])
|
||||||
|
def get_html_from_ajax():
|
||||||
|
import random
|
||||||
|
if int(random.random()*10) % 2:
|
||||||
|
# Randomlu generate 404 HTTP response
|
||||||
|
return render_template('error.html'), 404
|
||||||
|
return render_template('ajax_html.html')
|
||||||
|
|
||||||
|
@app.route("/get_value_from_ajax", methods=['GET', 'POST'])
|
||||||
|
def get_value_from_ajax():
|
||||||
|
err_code = 'TETA_ERR'
|
||||||
|
import random
|
||||||
|
RND = int(random.random()*10)
|
||||||
|
if RND % 2:
|
||||||
|
# Randomlu generate error
|
||||||
|
return err_code
|
||||||
|
return str(RND)
|
||||||
|
|
||||||
|
@app.route("/set_value_from_ajax/<value>", methods=['GET', 'POST'])
|
||||||
|
def set_value_from_ajax(value):
|
||||||
|
err_code = 'TETA_ERR'
|
||||||
|
if value != 'We Make Porn':
|
||||||
|
return 'True'
|
||||||
|
return err_code
|
||||||
|
|
||||||
########################################################################
|
########################################################################
|
||||||
# Main
|
# Main
|
||||||
|
Loading…
Reference in New Issue
Block a user