CidonaBoy CidonaBoy - 6 months ago 260
Javascript Question

Sending a list of values in Jquery to flask template

I am using:
Python 3.4
Flask 10.1
SQLAlchemy 0.9.6
JQuery 2.1.1

I'm working on a forum application that will show a table of forum threads based on tags selected by the user. The tags are a list of on/off buttons generated as per the below Jinja2 template. (Should be around 8, max 16 tags).

<UL class="ForumTagList">
{% for Tag in Forum.ForumTags.filter_by(Visible=True): %}
<li Class="ForumTag VisibleTrue" id ="liTag{{Tag.TagID}}" >
<input id="{{Tag.TagID}}" type="hidden" value="1" name="Name{{Tag.TagID}}"></input>
<DIV class="Tag{{Tag.TagID}}" onclick="toggle_tag('{{Tag.TagID}}');"> {{Tag.Name}}</DIV>
</li>
{% endfor %}
</UL>


There is a JS script that manages the changing of the values to 0 or 1.

The table will be loaded by an AJAX call as per below. It will initially load an unsorted table but the user will be able to refresh to see if new threads appear.

<script type="text/javascript">
$(document).ready(function(){
ThreadTableRefresh();
});

function ThreadTableRefresh(){
$('#ThreadsHolder').load('{{Forum.ForumID}}/ForumThreads');
}
</script>
<div id="ThreadsHolder">
</div>


I understand from reading the documentation on JQuerys Load Method that I can submit a second argument to the .load() method as an object. I hope to submit the on/off values from the users selection, which will then be used to generate the table only showing the tags the user wants.

I am very new to HTML and JQuery, would anyone be able to point me in the right direction as to how to take the various values from those HTML controls and post them as a list or dictionary to a Flask template?

If you need any addition information, please let me know.

Answer

You can send a dictionary or json to your flask template. For each TagID, there is a 1 or 0 value, e.g. {1:0, 2:0, 3:1, 4:0}.

Check out the .ajax jquery function to send a json object to your flask route. This should get you started.

Step by step:

  • click the refresh button
  • for each tag, add the id and toggle (1/0) value to a dictionary
  • convert the dictionary to a json object
  • use ajax function to send the object to your flask route
  • flask route takes the values, sends back the new html data
  • the ajax function will substitute the new html upon success

Javascript

$('#refresh-button').click(function() {    //selector for refresh button

    data = {}

    $('input').each(function(){           //might need more specific selector 
        id = $(this).attr('id')
        toggle = $(this).val()
        data[id] = toggle
    });

    data = JSON.stringify(data);

    $.ajax({
        url: '/YourFlaskRoute'
        type: 'POST',
        data: data,
        contentType: 'application/json;charset=UTF-8',
        cache:false,
        success: function (response) {
            $(".ForumTagList").html(response);    //your flask route needs to send back the html for just your list items
        },
        error: function(response){
            alert('Error refreshing forum items')
        }
    });

});

Flask

@myblueprint.route('/YourFlaskRoute', methods = ['POST'])
def refresh_tags():
    if request.method == 'POST':
        data = request.json

        #access your data
        for key, value in data.items():
            key = id
            value = id

        # run your query
        tags = ...

        #send back your list items template
        return render_template('list_items.html', tags = tags)