CODEWITHSUNDEEP
javascriptjqueryajaxdjangotwitter-bootstrap
Viji123
Viji123

Reputation: 105

Opening bootstrap modal view in Django for editing a post

I am learning basic Django development and am creating a simple blog app with several posts that I create. My home page includes this code that iterates through all posts and displays them. 

{% for post in all_posts %}
    <div class="post-card">
      {{post.title}}
      {{post.description}}
      <a data-toggle="modal" data-target="#postEditModal">
        Edit Post
      </a>
    </div>
{% endfor %}

I have a #postEditModal which links to the Bootstrap data-target method and shows the following 

<div id=#postEditModal class="modal fade" style="overflow: scroll;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    {{editpostform}}
</div>

My goal is to be able to click on the "Edit Post" link for each individual post, which should redirect to the slug for the post and open the modal all on top of the same page, and from there I should be able to edit the post using my {{editpostform}}. Clicking outside of the modal area should revert back to the same page.

I have tried many things like post.get_absolute_url and {% url 'single_post' post.id %}, but nothing so far has worked properly. I am assuming there is some level of Javascript/AJAX involved but I am not sure where to start with that.

Upvotes: 2

Views: 2070

Answers (1)

afilardo
afilardo

Reputation: 527

You are creating several modals with the same id, and all your links point (data-target) to the same modal, which is not unique.

An easy solution is to add the post ID to the modal and the link. Try this:

<div id="#postEditModal{{ post.id }}" class="modal fade" style="overflow: scroll;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    {{editpostform}}
</div>

And modify the links like this:

<a data-toggle="modal" data-target="#postEditModal{{ post.id }}">Edit Post</a>

Upvotes: 1

Related Questions