Блог

Я создаю формы из списка с помощью jinja2 в шаблоне html, но я не уверен, как связать код в jQuery. Я могу легко выстроить идентификаторы, но в jQuery я не уверен, как указать на активную форму, поскольку кажется, что мой код jQuery зависит от жестко закодированных значений, указывающих на форму или беспорядочный код, состоящий из сотен строк кода для каждой формы, сгенерированной из цикла.

Вот моя сгенерированная форма:

 {% set count = 1 %}
{% for chats in chats -%}
<li class="contact">
    <form id="{{chats[count]['chatID']}}" method="POST" action='#'>
        <div class="wrap">
            <!-- get status from get request -->                    
            <span class="contact-status online"></span>
            <!-- get profile picture from get request -->
            <img src="{{ url_for('static', filename='images/placeholder.png') }}" alt="" />
            <div class="meta">
                <!-- get contact name from get request -->
                {% if current_user == chats[count]['sender'] %}
                    <p id="user{{count}}" class="name">{{chats[count]['recipient']}}</p>
                {% else %}
                    <p id="user{{count}}" class="name">{{chats[count]['sender']}}</p>
                {% endif %}
                <!-- get last message in chat from get request -->
                <p class="preview">{{chats[count]['sender']}}: {{chats[count]['data']}}</p>
                <input type="submit" id="{{chats[count]['chatID']}}Sub" value="Join Room">
            </div>
        </div>
    </form>
</li>
{% set count = count   1 %} 
{%- endfor %}
 

Это мой код JavaScript с использованием jQuery:

 $('form#contact').submit(function(event) {
    if (activeRoom == null){
        socket.emit('join', {room: $('#chat1').text(), username: activeUser});
        console.log('joined '   $('#user1').text());            
        activeRoom = $('#chat1').text();//mock value
        activeUser = $('#yourUsername').text();
        console.log("welcome: "   activeUser);
        $("#12345Sub").prop('value', 'Leave Room');
        return false;
    }else{
        console.log('Leaving '   activeRoom);
        socket.emit('leave', {room: activeRoom});
        $('#log').append('<br>'   $('<div/>').text('Goodbye: '   activeUser).html());
        activeUser = null;
        activeRoom = null;
        $("#12345Sub").prop('value', 'Join Room');
        $("#chatMsg").empty();
        return false;
    }               
});
 

Могу ли я передать jinja2 в файл .js? Я не смог найти ничего надежного, большинство ссылок, похоже, относятся к jQuery в файле .html.

Оказывается, если я не использую файл JavaScript с помощью flask, я не могу передать Jinja2 в JavaScript jQuery. Я решил использовать свой сокет.подключение ввода-вывода для получения необходимых мне данных из серверной части в качестве быстрого и грязного метода, это не идеально, но это работает. Лучшим методом было бы выполнить ajax-запрос к flask при загрузке страницы. Хотя, если другие ищут методы, третьим, но не идеальным методом было бы запустить некоторый JavaScript в шаблоне .html, к которому может получить доступ файл .js.