Activate checkbox with a jinja ID from ajax database list-CodePudding

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  style="text-align: left;"><label>Choose availability:</label>
<!-- iterate over checkboxes using jinja -->
<div >
    {% for tt1, tt2 in time %}
    <div >
          <div  style="text-align: left;">
          <input type="checkbox" name="timescheck"  id="{{ tt1 }}">
          <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)

CodePudding user response：

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

$(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  style="text-align: left;"><label>Choose availability:</label>
<!-- iterate over checkboxes using jinja -->
<div >
    {% for tt1, tt2 in time %}
    <div >
          <div  style="text-align: left;">
          <input type="checkbox" name="timescheck"  id='{{ tt1 }}'>
          <label  for={{ tt1 }}>{{ tt1 }} - {{ tt2 }}</label>
        </div>
   </div>
{% endfor %}
</div>

CodePudding user response：

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).