Блог

Главная - Вопросы по программированию - Как отправить переменную jinja в java-скрипт

Как отправить переменную jinja в java-скрипт

#javascript #html #flask #jinja2

Вопрос:

 <table>
    <tr>
        <th>ID</th>
        <th>Type</th>
        <th>Name</th>
        <th>Start Date</th>
        <th>Target Date</th>
        <th>Estimate</th>
        <th>Status</th>
        <th>Actual Hours</th>
        <th>Approved Hours</th>
        <th>Start Date</th>
        <th>Target Date</th>
    </tr>
    {% for val in details %}
        <tr>
            <td><button id={{loop.index}} onclick=myFunction(this)>{{loop.index}}</button>{{val['id']}}</td>
            
            <td>{{val['type']}}</td>
            <td>{{val['name']}}</td>
            <td>{{val['start_date']}}</td>
            <td>{{val['target_date']}}</td>
            <td>{{val['estimate']}}</td>
            <td>{{val['status']}}</td>
            <td>{{val['timesheet_details']['actual_hours']}}</td>
            <td>{{val['timesheet_details']['approved_hours']}}</td>
            <td>{{val['timesheet_details']['actual_start_date']}}</td>
            <td>{{val['timesheet_details']['actual_target_date']}}</td>
        </tr>
    {% endfor %}
</table>
<script>
    function myFunction(z){
        var currTR = z.parentNode.parentNode;
        var newTR = document.createElement("tr");
        newTR.innerHTML = "<td>s</td><td>Col 2</td><td>Col 3</td>";
        currTR.parentNode.insertBefore(newTR, currTR.nextSibling);          
    }
    function some(x){
        
    }
</script>

цель состоит в том, чтобы каждый раз, когда я нажимаю кнопку, она должна отправлять в мою функцию некоторые данные для новой строки, которую она собирается добавить, и значения этой функции будут td, которые должна добавить новая строка.

 onclick=myFunction(this,{{val}})

...
<script>
function myFunction(z,l)
...
        newTR.innerHTML = "<td>l[2]</td><td>l[3]</td><td>l[4]</td>";

</script>

Но я не могу отправить переменную jinja в javascript, и, когда я пишу это, я понимаю, что тоже не знаю, как получить доступ к данным в javascript. любая помощь будет признательна.

Комментарии:

1. В Javascript нет ничего волшебного, это просто часть вашего шаблона. Ваша проблема в том, что вы неправильно используете кавычки, т. е. пытаетесь var l = '{{ val }}';

2. Это сработало, но я понял, что val-это переменная, созданная в цикле for, поэтому она завершается по щелчку

Ответ №1:

Вы не можете напрямую передать переменную jinja в javascript, вы должны ввести ее в свой html следующим образом: <button id={{jinja_var}} onclick=myFunction({{jinja_var}})>

ваш код должен выглядеть примерно так:

 <table>
    <tr>
        <th>ID</th>
        <th>Type</th>
        <th>Name</th>
        <th>Start Date</th>
        <th>Target Date</th>
        <th>Estimate</th>
        <th>Status</th>
        <th>Actual Hours</th>
        <th>Approved Hours</th>
        <th>Start Date</th>
        <th>Target Date</th>
    </tr>
    {% for val in details %}
        <tr>
            <td><button id={{loop.index}} onclick=myFunction({{loop.index}})>{{loop.index}}</button>{{val['id']}}</td>
            
            <td>{{val['type']}}</td>
            <td>{{val['name']}}</td>
            <td>{{val['start_date']}}</td>
            <td>{{val['target_date']}}</td>
            <td>{{val['estimate']}}</td>
            <td>{{val['status']}}</td>
            <td>{{val['timesheet_details']['actual_hours']}}</td>
            <td>{{val['timesheet_details']['approved_hours']}}</td>
            <td>{{val['timesheet_details']['actual_start_date']}}</td>
            <td>{{val['timesheet_details']['actual_target_date']}}</td>
        </tr>
    {% endfor %}
</table>
<script>
    function myFunction(z){
        var currTR = z.parentNode.parentNode;
        var newTR = document.createElement("tr");
        newTR.innerHTML = "<td>s</td><td>Col 2</td><td>Col 3</td>";
        currTR.parentNode.insertBefore(newTR, currTR.nextSibling);          
    }
    function some(x){
        
    }
</script>

в примере я использовал переменную {{loop.index}} , но если вам нужно использовать значение, содержащееся в объекте val , просто замените {{loop.index}} на {{val['my_value']}} :

 <button id={{loop.index}} onclick=myFunction({{val['my_value']}})>{{loop.index}}</button>
Метки: