Web2Py appending values to a database upon clicking of image

Question

First off, I should say I am kind of a novice web2Py user. I am having a problem that seems like an easy fix but everything I try seems to fail. I want to click on an image, and when it selects it, it gives it a value of True in a database, and when I "unclick" it, it gives a value of False.

I am using web2Py as a framework, and I have the following database:

db.define_table(
'interestFood',
Field('Tacos', 'boolean', default=False),
Field('Salad', 'boolean', default=False),
Field('Cheeseburger', 'boolean', default=False),
Field('Pizza', 'boolean', default=False),
Field('Sushi', 'boolean', default=False),
Field('Breakfast', 'boolean', default=False))

db.interestFood.id.writable = db.interestFood.id.readable = False

And I have the following controller:

def createProfile_interests():
if (db(db.interestFood.id==auth.user.id).count()!=1):
    db.interestFood.insert(id=auth.user.id)
interest1=db(db.interestFood.id==auth.user.id).select()
print(interest1)
return dict(interest1=interest1)

And here is the HTML portion of code:

{{Tacos=False
  Salad=False
  Sushi=False
  Cheeseburger=False
  Pizza=False
  Breakfast=False}}
<input type="image" name = "food" id="0" src="http://127.0.0.1:8000/WagMore/static/_2.14.6/images/taco.png" onclick=interests(0) onclick="{{interest1.update(Tacos=True)}}">
 <input type="image" name = "food" id="1" src="http://127.0.0.1:8000/WagMore/static/_2.14.6/images/pizza.png" onclick=interests(1) onclick="{{interest1.update(Pizza=True)}}">
 <input type="image" name = "food" id="2" src="http://127.0.0.1:8000/WagMore/static/_2.14.6/images/salad.png" onclick=interests(2) onclick="{{interest1.update(Salad=True)}}"><br><br>
 <input type="image" name = "food" id="3" src="http://127.0.0.1:8000/WagMore/static/_2.14.6/images/burger.png"  onclick=interests(3) onclick="{{interest1.update(Cheeseburger=True)}}">
 <input type="image" name = "food" id="4" src="http://127.0.0.1:8000/WagMore/static/_2.14.6/images/sushi.png"  onclick=interests(4) onclick="{{interest1.update(Sushi=True)}}">
 <input type="image" name = "food" id="5" src="http://127.0.0.1:8000/WagMore/static/_2.14.6/images/breakfast.png" onclick=interests(5) onclick="{{interest1.update(Breakfast=True)}}">

the interests() function is a constraint that only allows the user to select two of the images.

I tried doing something like this:

<input type="image" name = "food" id="0" src="http://127.0.0.1:8000/WagMore/static/_2.14.6/images/taco.png" onclick=interests(0) onclick="
    {{
       if Tacos==False:
        interest1.update(Tacos=True)
       else:
        interest1.update(Tacos=False)
    }}">

But this doesn't work. I have been working on this for about two days now. Any idea of how to go about tackling this? I appreciate it!

score 0 · Answer 1 · edited May 23 '17 at 12:17

First of all, you can't put two onclic attributes in one element, you can do something like this instead:

<input type="image" name = "food" id="0" onclick="function1();function2();">

Or even better, you can use JQuery to bind the two functions.

Now, in your example you are mixing client side and server side code, they are executed in a completely different way (and time), so, the code inside {{}} is processed server side, and it will be executed always, not when the user cliks the input. You should read some docs on how web works, and how client side and server side code works, this is a basic explination. you can also read the web2py book to learn how web2py works.

Web2Py appending values to a database upon clicking of image

1 Answers1