Click here to Skip to main content
15,039,149 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a jinja template that receives a list of twitter status' and their replies. The original tweets are listed to the left, and their replies in dynamically generated tables to the right, each with the conversation_id as the id of the table. When an original tweet is clicked, it should should change the display of the replies (using the conversation id) to 'block' I have tried various methods to display but none work for that function. The loader works fine so I suspect it might be something to do with how the id variable is passed to the JS function, but I really don't know. If I set the display to 'block' on the replies-table, the replies all show so I know the data is all being loaded.

Here is the code for the template.
<pre lang="Python">I have a jinja template that receives a list of twitter status' and their replies. The original tweets are listed to the left, and their replies in dynamically generated tables to the right, each with the conversation_id as the id of the table. When an original tweet is clicked, it should should change the display of the replies (using the conversation id) to 'block'

Here is the code for the template.

Python
<pre>{% extends "base.html" %}
{% block content %}
<div id="loader-container">
    <div id="loader"></div>
    <div id="loader-text" class="text-center">
        <h4>Downloading conversations, please be patient.</h4>
    </div>
</div>
<div id="content">
    <div class="container m-3">
        <h1 class="text-center">Download Twitter Conversations</h1>
    </div>
    <hr>
    <form class="form" action="{{  url_for('download_conversations')  }}" method="post">
        <div class="row">
            <div class="col-lg-4">
                <div>Twitter Handle</div>
                <div class="row">
                    <input type="text" name="screen-name" id="screen-name" required>
                </div>
            </div>
            <div class="col-lg-4">
                <div>Conversation Count</div>
                <div class="row">
                    <input type="text" name="count" id="count" min="1" max="100" required>
                </div>
            </div>
            <div class="col-lg-4 p-3">
                <button class="btn" type="sumbit" onclick="loading();">Get Conversations</button>
            </div>
        </div>
    </form>
    <hr>
    <div class="row">
        <div class="col shadow-lg">
            <table class="table table-dark text_white">
                <thead>
                    <tr>
                    <th scope="col">Handle</th>
                    <th scope="col">Tweet</th>
                    <th scope="col">Replies Count</th>
                    </tr>
                </thead>
                <tbody >
                    {%  if conversations != None  %}
                    {%  for c in conversations  %}
                    <a href="">
                        <tr onclick="showReplies({{  c.conversation_id  }})" style="user-select: none;">
                            <td>{{  c.screen_name  }}</td>
                            <td>{{  c.original_text  }}</td>
                            <td>{{  c.replies | length  }}</td>
                        </tr>
                    </a>
                    {%  endfor  %}
                    {%  endif  %}
                </tbody>
            </table>
        </div>
        <div class="col shadow-lg">
            {%  if conversations != None  %}
                {%  for c in conversations  %}
                    {%  if c.replies != None  %}
                        <table class="table table-dark text_white replies-table" id="{{  c.conversation_id  }}">
                            <thead>
                                <tr>
                                    <th scope="col">Handle</th>
                                    <th scope="col">Tweet</th>
                                </tr>
                            </thead>
                            <tbody >
                                {%  for r in c.replies  %}                                              
                                    <tr style="user-select: none;">
                                        <td>{{  r.screen_name  }}</td>
                                        <td>{{  r.text  }}</td>
                                    </tr>
                                {%  endfor  %}
                            </tbody>
                        </table>                        
                    {%  endif  %}
                {%  endfor  %}
            {%  endif  %}
        </div>
    </div>
</div>

<script type="text/javascript">// <![CDATA[
    function loading(){
        $("#content").hide(); 
        $("#loader").show();
        $("#loader-text").show();
              
    }
// ]]></script>
<script type="text/javascript">
    function showReplies(id){
        $("replies-table").hide(); 
        id = '#'.concat(id.toString())
        $(id).style.display = "block";          
    }
</script>
{%  endblock  %}


and the only css for the replies-table

.replies-table{
    display: none;
  }


Any help greatly appreciated!

Thanks a lot

What I have tried:

I have tried various methods to display but none work for that function. The loader works fine so I suspect it might be something to do with how the id variable is passed to the JS function, but I really don't know. If I set the display to 'block' on the replies-table, the replies all show so I know the data is all being loaded.
Posted
Updated 14-Jan-21 5:01am
v2
Comments
Member 14900453 14-Jan-21 10:31am
   
Hi Richard thanks a lot, I tried your solution along with many that are very similar, and none work. the id was purely numeric but I thought HTML5 was fine with this? Anyway, I changed the ID to be 'convo-123456789' and it still doesnt work. I tried var x = document.getelementById(id) and x returns null so it seems as though it is a problem with the variables used for the id's but i am totally stumped I've been looking at it non stop since I posted this question :-(

Try:
JavaScript
function showReplies(id){
    $(".replies-table").css("display", "none"); // Need the leading "." to select by class name
    id = '#'.concat(id.toString())
    $(id).css("display", "block");
}
If it still doesn't work, debug your code and check the ID. For example, if the ID is purely numeric, it won't be a valid value for the HTML ID attribute, so your selector might not work.
   
Comments
thatraja 15-Jan-21 4:28am
   
5!
So I just changed my code to show the divs the old fashioned way with getElementById. x was previously showing as null but despite no changes I can recall that would change that, divine intervention has made the code work as it should.

Python
<pre><script type="text/javascript">
    function showReplies(id){
    $(".replies-table").css("display", "none"); // Need the leading "." to select by class name
    x = document.getElementById(id)
    x.style.display='block'
}
</script>
   
Comments
thatraja 15-Jan-21 4:26am
   
If you're using jQuery then don't use/mix old javascript code with it. jQuery is better one. Just debug using developer tools or other utilities to find issues quickly.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900