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

0 votes

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.

Dec 28, 2020 in Python by Edureka
• 120 points
3,313 views

2 answers to this question.

0 votes

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:

<div id="share-note-modal-wrapper"></div>

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.

answered Dec 29, 2020 by Nikita
0 votes

I think u can use the bootstrap model

pip install Django-bootstrap-modal-forms

answered Dec 29, 2020 by Carlos

Related Questions In Python

0 votes
1 answer
+1 vote
1 answer
+2 votes
0 answers
0 votes
1 answer

how to download and install Django rest framework?

To install Django, you can simply open ...READ MORE

answered Apr 24, 2018 in Python by Christine
• 15,790 points
1,947 views
0 votes
1 answer
0 votes
1 answer

Host not allowed

Go to your project directory cd project cd project ALLOWED_HOSTS ...READ MORE

answered Aug 9, 2018 in AWS by Priyaj
• 58,020 points
1,724 views
0 votes
1 answer

Error in jarvis project (get url)

Hey, @Zodarlxx, Could you please post your error ...READ MORE

answered Dec 30, 2020 in Python by Gitika
• 65,850 points
771 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP