I want to execute onclick event "saveChoice" when an image is clicked on a html page. There are two images, left and right, with the same onclick event only they have one other parameter, the left one passes "Left" and the right one passes "Right". Now when I click on one of them, both get executed. I want to execute only the one which is clicked on.

I looked for a lot of solutions, html related, flask related and python related. I didn't find the solution. I tried to make a script in the html file but then i have the same problem. I tried to place the script on other places but it didn't solve the problem.

in the html file

<body>
    <a href="{{ url_for('question') if text < 3 else url_for('endsurvey')}}", onclick= "{{ saveChoice("Left", num1, num2, text) }}">

        <img src="{{url_for('static', filename='kaart{}.png'.format(num1))}}", border="0"> <!-- het moet in de map static staan! -->
    </a>
    <a href="{{ url_for('question') if text < 3 else url_for('endsurvey')}}", onclick= "{{ saveChoice("Right", num1, num2, text) }}">

        <img src="{{url_for('static', filename='kaart{}.png'.format(num2))}}", border="0">
    </a>
...
</body>

the python function in app.py

@app.context_processor
def utility_processor():
    def saveChoice(side, num1, num2, tekst):
        mycol.insert_one({"date": datetime.datetime.now(), "user": "2",
                          "photoleft": num1, "photoright": num2, "choice": side,
                          "question": tekst})
    return dict(saveChoice=saveChoice)

The function should save one click, the info on the right or left image. The info is saved correctly but for left and right on one click.

2 Answers

0
R. Nieuw On

The answer is probadly that it is not possible. You cannot use python functions directly in html therefore you need to use javascript for example.

I solved this with a copy of function question and endsurvey. I made one for the left side and for the right side and with url_for I go to that function. In these function you can use the saveChoice function the right way.

0
Esteban Vergara On

Instead of writing an onclick within the tag with a python function maybe it is better to attach an eventand use some javascript. Assign a class to each img tag, ie: class="leftSide" and class="rightSide". And add the num1, num2 and num3 as data-xxx tags to the wrappping div (you can put everything in the img tag but i think it's cleaner with a wrapper).

Something like this:

<body>
<div data-num1="{{num1}}" data-num2="{{num2}}" data-num3="{{num3}}">
    <img class="leftSide" src=" {{url_for('static', filename='kaart{}.png'.format(num1))}}", border="0"> <!-- het moet in de map static staan! -->
</div>
<div data-num1="{{num1}}" data-num2="{{num2}}" data-num3="{{num3}}">
    <img class="rightSide" src=" {{url_for('static', filename='kaart{}.png'.format(num1))}}", border="0"> <!-- het moet in de map static staan! -->
</div> 
... 
</body>

Then write some lines of javascript code like the following:

$(document).on("click", ".leftSide", function (e) {
    let side = $(this).closest("div"); // Finds wrapping div
    const num1 =  side.attr("data-num1");
    const num2 =  side.attr("data-num2");
    const num3 =  side.attr("data-num3");

   //Now you have your side and your variables. You can do as you like. Maybe call same AJAX on a modal with the insert and a message with ok or ko.

  const url = /route/to/funct/side/num1/num2/num3 
  $('.modal-content').load(url, function () {
    $('#myModal').modal({
        show: true,
        closable: false,
        transition: 'fade up',
     });
});

//where url is the route to your insert function
});

FInally you would have to write an event for the right side but you can recycle the insert fuction.

Hope this helps