I'm making my first webapp using python and flask, it is a simple calculator but I'm currently stuck trying to use more than one button. At the beginning it was abe just to show a graph, here is the python code:
class FormulaForm(Form):
formula = StringField('formula')
graph = SubmitField('graph')
#app.route('/')
def calculate():
form = FormulaForm()
formula = request.args.get('formula','')
points = mp.make_points(formula,0,7)
comp = make_plot(points[0],points[1])
return render_template('index.html',the_script=comp[0],the_div=comp[1],form=form)
And here is the html code:
<form method="GET" action="">
<br />
{{ form.formula }}
<br />
{{ form.graph }}
</form>
So far so good. But I don't know how to add more functionality, for example I would like to add a button that shows the formula evaluated at some value x. I tried adding an extra inputfield and an extra button in the form, something like this:
class FormFormula(Form):
formula = StringField('formula')
graph = SubmitField('graph')
evaluate = StringField('evaluate_at')
evaluate = SubmitField('evaluate')
But then I don't know how to make the view handle two different actions.
I think I found a solution here but it only works when the method is "POST" and that makes the page reload which I don't want. So, is there a way to use multiple buttons in the same view?
#app.route('/start' ,methods=['POST'])
def stop():
"process done here"
return Something
Your app.py like this and and html file this
<script src="static/js/ajax.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#start").click(function(event){
$.post(
"/start",
function(data) {
window.alert(data);
}
);
});
});
</script>
<button id ="start" type="button" value = "Load Data">Start</button>
Related
I am trying to serve HTML code if any SocketIO event occurs , so instead of doing :
$(document).ready(function(){
var notification_back = '/notifications';
var callback = 'http://' + document.domain + ':' + location.port + notification_back;
var socket = io.connect(callback);
socket.on('new_test_event', function(data){
var testList = $('#new_test_list');
testList.prepend(
'\
<li>\
<a href="'+data.url_to+'">\
<div class="user-new">\
<p>'+data.title+'</p>\
<span>'+moment(data.timestamp).fromNow()+'</span>\
</div>\
<div class="user-new-left">\
<i class="fa fa-rss"></i>\
</div>\
<div class="clearfix"> </div>\
</a>\
</li>\
'
)
console.log(data);
});
i would prefer to serve that html code from the back-end, so something like this:
#socketio.on('new_test_event', namespace='/notifications')
def raise_new_attack(data):
return Markup("THE HTML CODE GOES HERE")
Is there any way to make that work ? or its not possible ?!
That's not how SocketIO works, you seem to be trying to adapt SocketIO to how HTTP does things, so maybe you should consider if SocketIO is what you want.
There is nothing wrong with returning HTML from a SocketIO event, but you will need to add some JavaScript on the client that receives the HTML and inserts it in the correct place in the page.
The following is an example of an event returning HTML:
#socketio.on('new_test_event', namespace='/notifications')
def raise_new_attack(data):
emit("my_notification", "THE HTML CODE GOES HERE")
Then in the client you would have something like this:
socket.on("my_notification", function(html_code) {
// use jQuery or similar to insert the html in the page
});
In flask we can render a page using render_template('home.html, data=data).
In the same way is possible to load bootstrap modal without having to use javascrpt?
For e.g if an element is clicked in the page,
<span class="example" data-toggle="modal" data-target="#showExample" Testing</span>
A call is made to function in flask function and it trigger the modal pop-up and pass data that can used to populate field
If i'm understand what you mean, you can do this in JavaScript (just paste it in bottom of your page, in the tag "script":
document.getElementById('showExample').addEventListener('click', function() {
// Do some stuff, that you need to do...
});
Or, if you want, you can do this without JavaScript (i guess that you using Jinja2):
Insert it into your page template:
{% if show_example_modal %}
<span class="example" data-toggle="modal" data-target="#showExample" Testing</span>
{% endif %}
Python view code:
#app.add_route('/something/')
def something():
return render_template("something.html", show_example_modal=True)
Lets say I have a mustache button partial like this
<button name="{{name}}" class="btn">{{title}}</button>
Is it possible somehow to set the title when calling the partial directly like this
<form>
....
{{> button|name=foo,title=Cancel}} {{> button|name=bar,title=Submit}}
</form>
This would make it much easier to create views instead of something like this and creating a hash for each button.
<form>
....
{{#buttons}}
{{> button}}
{{/buttons}}
</form>
I am not sure you can do that but I worked around that using mustache functions
javascript
var partial = "<div>{{value}}</div>";
var data = {some_data:[1,2,3]};
var items = {func:function (){
return function (index){
return mustache.render(partial,{value : data.some_data[index]});
}
});
mustache.render(main,items);
mustache
{{#func}}1{{/func}}
{{#func}}2{{/func}}
It's not possible to do it in plain Mustache, but it's doable in Handlebars with helpers. Handlebars is an extension of Mustache, so you can switch to it just by replacing parser library. Here's how it might look in Handlebars:
JS Helper (there are also implementations for many other languages):
Handlebars.registerHelper('button', function(title, options) {
var attrs = Em.keys(options.hash).map(function(key) {
key + '="' + options.hash[key] + '"';
}).join(" ");
return new Handlebars.SafeString(
"<button " + attrs + ">" + title + "</button>");
});
Usage in template:
{{buttton title name="name" class="class"}}
More info is available here: http://handlebarsjs.com/
No, you cannot pass variable view data directly from the template using Mustache.
However, rendering your buttons as a section using a list is a suitable alternative as of current when using Mustache:
Partial: (buttons.mst)
{{#buttons}}
<button name="{{name}}" class="btn">{{title}}</button>
{{/buttons}}
Template:
<form>
...
{{> buttons}}
</form>
View:
buttons: [
{ name: 'foo', title: 'Cancel' },
{ name: 'bar', title: 'Submit' },
]
Output:
<form>
...
<button name="foo" class="btn">Cancel</button>
<button name="bar" class="btn">Submit</button>
</form>
Which actually works quite well since if no buttons were passed, the partial won't be rendered.
Hope it helps.
I have a view which returns a chained object of 3 models
def test(request):
output=itertools.chain(
model1.objects.all(),
model2.objects.all(),
model3.objects.all()
)
return render_to_response('test.html', {'output':output})
In the html, I added an anchor and a jQuery script, which should replace the #output with new values just from model1
<html>
<head>...</head>
<body>
<script>
$(document).ready(function() {
$("#switch").click(function() {
$.ajax({
url: $(this).attr("href"),
success: function(result) {
//whatever I put here is not triggered
}
});
});
});
</script>
<a id="switch" href="?model=1">switch to model 1</a>
<div id="output">
{% for item in output %}
<div id="{{item}}">
{{item}}
</div>
{% endfor %}
</div>
</body>
</html>
I tried to put the div#output into a separate template output.html and modified the views.py like so:
def test(request, template='test.html'):
if request.GET.get('model'):
output=model1.objects.all()
else:
output=itertools.chain(
model1.objects.all(),
model2.objects.all(),
model3.objects.all()
)
if request.is_ajax(): template='output.html'
return render_to_response(template, {'output':output})
But everytime I click the link, the whole page is refreshed (with the new values from model1).
Opera returns just the output.html
Been struggling with this for more than 3 days, Im new into Ajax and this is getting very confusing for me.
I hope someone can shed some light!
First, make sure that your view works and that you're getting the expected HTML output when accessing the url directly (you might also want to comment out if request.is_ajax() temporarily).
Then, try replacing the content of the #output div using jQuery.html() method in your ajax call. Here is an example with some animation:
$.ajax({
...
success: function( returnedData ) {
$("#output").css("color", "red").fadeOut(500, function() {
$("#output").html(returnedData);
$(this).css("color", "green").fadeIn(500);
});
}
Also, try monitoring your ajax call using Firebug/Chrome Developer Tools - both tools will allow you to quickly determine the issue.
Thanks to Daniel Rosman for the heads-up I had to prevent the default action of the a#switch. It works like butter now!
Here is the initial question: how to access jQuery.ajax() get parameters in Django views
I want to implement a ajax 'like' button which should increase the like count and not refresh the whole page. I am new to ajax so please help.
urls.py:
(r'^like/(\d+)/$',like),
Below is my views code for like:
def like(request,feedno):
feed=Feed.objects.get(pk=feedno)
t=request.META['REMOTE_ADDR']
feed.add_vote(t,+1)
vote, created = Vote.objects.get_or_create(
feed=feed,
ip=t,
)
feed.likecount+=1
feed.save()
if 'HTTP_REFERER' in request.META:
return HttpResponseRedirect(request.META['HTTP_REFERER'])
return HttpResponseRedirect('/')
Below is my html(like div):
<div class="like_abuse_box">
<p>Likes:<b>{{vote.feed_set.count}}</b> ||
<a class="like" href="/like/{{feed.id}}/">Like</a> |
<a class="abuse" href="/abuse/{{feed.id}}/">Abuse</a> || </p>
</div>
What code should I include to only refresh that particular div and updated like count be shown without the whole page getting reloaded. Need Help. Thanks.
Haven't tested it athough something like that should work. Edit: tested and works, now for multiple elements on a webapage
Javascript
$("a.like").click(function(){
var curr_elem = $(this) ;
$.get($(this).attr('href'), function(data){
var my_div = $(curr_elem).parent().find("b");
my_div.text(my_div.text()*1+1);
});
return false; // prevent loading URL from href
});
Django view
You can add if request is Ajax with:
if request.is_ajax():
First thing: put an id on the html element where the content to be injected.
<div class="like_abuse_box">
<p>Likes:<b id="like_count">{{vote.feed_set.count}}</b> ||
<a class="like" href="/like/{{feed.id}}/">Like</a> |
<a class="abuse" href="/abuse/{{feed.id}}/">Abuse</a> || </p>
</div>
second, in your view you need to return the latest like count. You can't just locally update the count, since there is a chance that someone else may have updated the like count as well.
Lastly. in your page include the jquery
$("a.like").bind("click", function(){
var link = $(this).attr("href");
$.get(link, function(data) {
$(this).parent("div").children('b#like_count').html(data);
});
});
I am not quite certain about the parent child selector, to navigate from hyper linked clicked to its corresponding like count. You may have to play around with JQuery selector to get it right.
ALso, if you are using POST for your view, replace $.get with $.post