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

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 <testdevleb@gmail.com> del dia ds., 28 de set. 2019 a les 9:57:

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 %}

--
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+unsubscribe@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.

--
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+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAK-JoTT3rKcuNBhckhr1XRRUtdL41rNuhbR3XmJF9d0cZXcn6Q%40mail.gmail.com.