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
37 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 28, 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

I'm working on a Summer dataset for practice in Python. However I get the below error:

Hi@Pratap, I think to find duplicate values using ...READ MORE

answered Jun 15, 2020 in Python by MD
• 95,060 points
198 views
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,830 points
620 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,100 points
745 views
0 votes
1 answer

Error in jarvis project (get url)

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

answered Dec 29, 2020 in Python by Gitika
• 65,870 points
55 views