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

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

js and bootstrap files are loaded correctly.

On Saturday, September 28, 2019 at 10:56:41 AM UTC+3, leb dev wrote:

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/b9f6644b-fe3b-4b5e-9838-cc06d194fb42%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-JoTQF0pNkGsj5kDjwwDfAxZMg97CFwpAhMg5edA3WU3j1iw%40mail.gmail.com.