Question 35599 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Activate checkbox with a jinja ID from ajax database list – Jquery

I am working on my first web dev project and I am completely flummoxed by this error. My html contains a jinja loop to iteratively generate checkboxes with unique ids. I would like to tick checkboxes based on a list of IDs returned from my database with AJAX through jquery, but it seems theres some weird jinja – jquery interaction that means the checkbox ids are not working.

js file example section:

$(document).ready(function () {
$("#selectAll").click(function () {
// get checkbox ids from database as a list: 
        $.ajax({
            url: "/api/get-availability",
            type: 'GET',
            data: {
                "Pro": $("#prochoice").text(),
                "Date": [day, month, year].join('/')
            },
            success: function (data) {
                for (let d of data) {
                    $("#" + d).prop('checked', true); // iterate over ids for checkboxes
                }
            }
        });
    }

html file for checkboxes:

<!-- choose time -->
<div class="mt-3 mb-0 m-2" style="text-align: left;"><label>Choose availability:</label>
<!-- iterate over checkboxes using jinja -->
<div class="container row justify-content-md-center">
    {% for tt1, tt2 in time %}
    <div class="col-md-6">
          <div class="custom-control custom-checkbox m-0 mt-1" style="text-align: left;">
          <input type="checkbox" name="timescheck" class="custom-control-input" id="{{ tt1 }}">
          <label class="custom-control-label" for={{ tt1 }}>{{ tt1 }} - {{ tt2 }}</label>
        </div>
   </div>
{% endfor %}
</div>

api call

@api.route('/get-availability', methods=['GET'])
def get_availability():
        return ['16:00', '16:30', '17:00']

render html template

@website.route("/availability-admin")
def availadmin():

    # Set the total time list for checkboxes here:
    t1 = ['15:00', '15:30', '16:00', '16:30', '17:00', '17:30'] 
    t2 = ['15:30', '16:00', '16:30', '17:00', '17:30', '18:00'] 
    env = jinja2.Environment()
    env.globals.update(zip=zip)
    time = zip(t1, t2)

    return render_template('availabilty-admin.html', time = time)
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For anyone interested, special characters such as ':' are not accepted for ids. Therefore using the python text.replace(':', '') function before parsing the id was a solution in this case (or better choice of ids in the first place).


  2. 0

    Maybe Jinja is interpreting the curly braces as its own syntax, rather than as part of the HTML element’s ID. This could solve it. not 100% sure

    JS

    $(document).ready(function () {
$("#selectAll").click(function () {
// get checkbox ids from database as a list: 
        $.ajax({
            url: "/api/get-availability",
            type: 'GET',
            data: {
                "Pro": $("#prochoice").text(),
                "Date": [day, month, year].join('/')
            },
            success: function (data) {
                for (let d of data) {
                    $("#'" + d + "'").prop('checked', true);// iterate over ids for checkboxes
                    }
                }
            });
        }

    HTML

    <!-- choose time -->
<div class="mt-3 mb-0 m-2" style="text-align: left;"><label>Choose availability:</label>
<!-- iterate over checkboxes using jinja -->
<div class="container row justify-content-md-center">
    {% for tt1, tt2 in time %}
    <div class="col-md-6">
          <div class="custom-control custom-checkbox m-0 mt-1" style="text-align: left;">
          <input type="checkbox" name="timescheck" class="custom-control-input" id='{{ tt1 }}'>
          <label class="custom-control-label" for={{ tt1 }}>{{ tt1 }} - {{ tt2 }}</label>
        </div>
   </div>
{% endfor %}
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search