How to open the edit section without refreshing the page for each post in Django Javascript?

user_14182446 0
Viewed 66

this is my html template:

<div class="posts">
  <h3> <a href ="{% url 'profile' p.user.id %}"> {{p.user}}: </a> </h3> <p>{{p.timestamp}}</p>
    <br>
<p><i class="fas fa-heart"></i> {{ p.likes.count }}</p>
<p style="text-align: center;"> {{ p.post }} </p> 
{% if p.user.id == user.id %}
<button class="btn btn-primary edit" style="display: inline;">Edit</button><hr></div>
<div id="editsec">
<textarea rows=6 cols=100 style="opacity: 0.7;">{{p.post}} </textarea>
<form action=""><button class="btn btn-success">Save</button></form>
 </div>
 {% endif %}  
   {% endfor %}

Now in css I hide the editsec, so only if user clicks on edit button, it will display editsec div and hide the posts div. Here is Javascript code:

      document.addEventListener('DOMContentLoaded', function() {
var edit = document.getElementsByClassName('edit')
for (var i = 0 ; i < edit.length; i++) {
edit[i].addEventListener('click', () => {
    document.getElementById('editsec').style.display = "block"; 
    document.querySelector('.posts').style.display = "none"; 
});
  }
 });

Now if I have two post in home page, if I click on second post's edit button, it is still displaying the first post's editsec div.

I tried to make this editsec a class and did this :

document.addEventListener('DOMContentLoaded', function() {
var edit = document.getElementsByClassName('edit')
var editsec = document.getElementsByClassname('editsec')
for (var i = 0 ; i < edit.length; i++) {
edit[i].addEventListener('click', () => {
   for (var a = 0 ; a < edit.length; a++) {
    editsec[a].style.display = "block"; 
    document.querySelector('.posts').style.display = "none"; 
   }
});
  }
 });

Now if I click on one edit button it will display all of the editsec div, How can I make it display only this particular posts' edit section?

css django html javascript
2 Answers

Well I had this problem as well when I was making a posting website. The best thing to do is this. Is give the button and the edit div an id as in a data-id="{{p.id}}" to both the button and the div.

And in the javascript just get the button dataset.id and only make the display if the button dataset.id is the same as the div dataset.id and make the that div appear.

P.S. are you doing CS50 Web cause it has an project similar to this. And here is mine https://youtu.be/A4SIMlZpADk

If you are not doing CS50 Web I would recommend it to you. https://cs50.harvard.edu/web/2020/

Well it's a great course from Harvard University.

Admin1

If you want to create dynamic content, do not put it in template but in your js code.

I recommend you to do not render the template in views.py instead 1) return a json response of posts.

2) in your js code fetch that data of posts, and create an element for displaying posts, stick it into your template with the method of

             document.QuerySelecctor(".posts").innerHtml = data

3) Now add your edit section like that:

        const bigsection = document.createElement('div');
        bigsection.id = `button-div-${post.id}`;
        // make this section hidden until user clicks the edit button
            const editsec = document.createElement('div');
            editsec.style.display = 'none'; 
            editsec.id = `edit-div-${post.id}`; Now you give each of your section different id accordingly.
            let form = `<textarea class="form-control" id="content-${post.id}" name="post_content">`
                + `${post.content}</textarea>;
            editsec.innerHTML = form; // now changed the content of your div
        }

add your button to event listener as you already did so when user clicks on the button it will display the dynamic content.

user_127274790
Related