what path should I give to the url for showing a pop up when clicking on more info button in django

Question

i have some work samples in my single page , and they have a button. I want to make it possible to show a popup window with detail information when clicked on button. but because it is a single page , and there isn't any other html page , i don;t know what to put in the path.

score 0 · Answer 1 · Dec 29, 2020

I got into exactly the same situation as you are having now with my project 2 months ago. Below is how I did it. My context was that when user clicks the Share button, the modal will show up with the name of the note that they want to share with other users <--- This is the dynamic data part you are looking for.

In my template.html there is a Share button like below:

<a
    href="javascript:void(0);"
    class="open-share-note-modal"
    data-url="{% url 'write:get-note-to-share' note_id %}"
>
    Share
</a>

Note the data-url="{% url 'write:get-note-to-share' note_id %}". It does the magic. You will also want to read more about data-url and what it does exactly.

The {% url 'write:get-note-to-share' note_id %} will link to this function in my views.py:

@login_required
def get_note_to_share(request, pk=None):
    instance = get_object_or_404(Note, pk=pk)
    context = {'note': instance}
    return render(request, 'write/_modal_share_note.html', context)

The 'write/_modal_share_note.html' is the modal with dynamic data I want to inject into.

Then finally, in my template.html again:

Create a <div>wrapper like this:

Then a bit JavaScript to inject the modal into the wrapper:

        var shareNoteModalDiv = $("#share-note-modal-wrapper");
        $(".open-share-note-modal").on("click", function() {
            $.ajax({
                url: $(this).attr("data-url"),
                type: 'GET',
                success: function(data) {
                    shareNoteModalDiv.html(data);
                    $("#share-note").modal('show');
                }
            });
        });

It worked with me. Let me know if I have made it clear.