HOW TO DISPLAY THE COLLAPSED DATA IN CARD using django and bootstrap

[leb dev]

I have a django project that includes cards where each card contains a collapse that will hide or show the data. 

Problem is once i do a **foreach loop** the cards appear but the collapse is not working and doesn't display any data.

I used the below steps:

create function in views.py

============================

    def displaydata(request,pk):

    c = cursor.execute('SELECT ID,Nickname_,Date_of_Birth FROM Person_ WHERE ID = pk ')

    print("c ===>",c)

    return redirect("search")

    return render(request,"displaydata.html",{"c":c})

create URL in urls.py

==========

     path("displaydata/<int:pk>/",displaydata,name = "displaydata")

create a template that display the cards 

=========

      <div class="container">

        <div class="row justify-content-center">

        {% for obj in object_list %}

        

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-5">

       

        <div class="p-2 my-flex-item">

        <div class="card innercardzoom">

        <div class="inner">

        <img src="{% static '/img/card/1.png'%}" class="card-img-top" alt="...">

        </div>

        <h5 class="card-header">

            <a class="collapsed d-block" data-toggle="collapse" href="{% url 'displaydata' pk=obj.0 %}" aria-expanded="true" data-target = "#table-collapsed" caller-id ="" aria-controls="collapse-collapsed" id="heading-collapsed{{obj.0}">

                <i class="fa fa-chevron-down pull-right"></i>

                     Details

               

                <script type="text/javascript">

               

                $(document).on('click','.collapsed d-block',function(){

                $('#heading-collapsed').attr('caller-id',$(this).attr('id'));

                });

                </script>

        

        

                </a>

 

create a template that display the **collapsed data**

=============

      {% for row in c %}

    <div id="table-collapsed" class="collapse" aria-labelledby="heading-collapsed">

    <table class="card-body table-sm table table-hover text-right">

        <tbody>

            <tr>

                <td>NICKNAME</td>

                <td>{{ row.1 }}</td>

            </tr> 

            <tr>

                <td>DOB</td>

                <td>{{ row.2 }}</td>

            </tr> 

        </tbody>

    </table>

    </div>

   

    {% endfor %}

[Gil Obradors]

HI!

Can you paste console log from browser? Maybe you can see and error here , when you collapse down/up

Can you assure that js files an css files from bootstrap are correctly loaded? ( network tab of browse debug tools)

Missatge de leb dev <testd...@gmail.com> del dia ds., 28 de set. 2019 a les 9:57:

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/4e300433-1840-4f00-9e88-2109d9da625d%40googlegroups.com.

[leb dev]

js and bootstrap files are loaded correctly.

[Gil Obradors]

How do you know? Not seeing in you code

If it were in my desk, I will try first copy a example demo code.  If works, then template it, but not the second  before the "core" isn't working

Console log browser can give help

Missatge de leb dev <testd...@gmail.com> del dia ds., 28 de set. 2019 a les 10:27:

--

You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/b9f6644b-fe3b-4b5e-9838-cc06d194fb42%40googlegroups.com.