How to populate database data into multiple modal windows based on ID in Django?

Viewed 97

I want to fetch the data of database to the modal window based on their IDs.

User Storage is the model name contains multiple IDs based on users.

for example,

ID -1 should have data A. For ID -2, there should be data B and so on till it iterate IDs of specific user.

In views.py file,

@csrf_exempt
def profile(request,module_id):
    if request.user.is_authenticated:
        user_storage_main = user_storage.objects.filter(custom_user=module_id)
        user_storage = user_storage.objects.get(id=module_id)
    return render(request, 'profile.html',{"user_storage_main":user_storage_main,"user_storage":user_storage})

and in HTML page,

<table>
    {% for objects in user_storage_main %}
    <tr>
        <td><li class="dsi"><a title="" href="#{{ forloop.counter }}"><i class="fa fa-edit"></i></a></li></td>
        <td><a href="#"><i class="fa fa-trash"></i></a></td>
        <td>{{objects.store_name}} , {{objects.store_category}}, {{objects.store_start_date}}</td>
    </tr>
    {% endfor %}
</table>

<!-- MODAL WINDOWS STARTED HERE -->
<div class="dsi_popup" id="{{ forloop.counter }}">
    <div class="new-popup">
        <span class="close-popup"><i class="la la-close"></i></span>
        <h3>Heading</h3><br><br>
        <form id="www_id" method="post">
            <div class="row">
                <div class="col-lg-10">
                    <span class="pf-title">Update Store Name</span>                                         
                    <div class="pf-field">
                        <input id="sn" type="text" value="{{user_storage.store_name}}" />
                    </div>
                </div>
                <div class="col-lg-4">
                    <span class="pf-title">Update Store Category</span>
                    <div class="pf-field">
                        <input id="sc" type="text" value="{{user_storage.category}}" />
                    </div>
                </div>
                <div class="col-lg-4">
                    <span class="pf-title">Update Start Date</span>
                    <div class="pf-field">
                        <input id="sd" type="date" name="sd">
                    </div>
                </div>
                <div class="col-lg-12">
                    <button type="submit">Update</button>
                </div>
            </div>
        </form>
    </div>
</div><!-- MODAL WINDOW END HERE -->

EXPECTED OUTPUT :

Currently in my database, there are 3 user storages of user with user_id - 1.

So in table, I want to show all 3 user storage details in tabular format and if user will click on any of it's edit button then one modal with will open based on id i.e.,(#1,#2,#3), it would contains data of that user_storage ID.

OBSERVED OUTPUT :

In all the 3 modal windows, it is showing only the data of ID- 1 (ID - 1 because it is user ID is 1)

0 Answers
Related