Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- {% extends 'index.html' %}
- {% load static %}
- <title>
- {% block title %}
- Post List
- {% endblock title %}
- </title>
- {% block content %}
- <div class="row">
- <div class="container">
- <form id="post-form-id" class="post-form" action="{% url 'posts:post-list' %}" method="POST" enctype="multipart/form-data">
- {% csrf_token%}
- {{ form }}
- <div class="form-btns">
- <button type="submit">Submit</button>
- </div>
- </form>
- <div id="post-container">
- <!-- posts go here -->
- </div>
- </div>
- </div>
- <script>
- const postContainer = document.querySelector('#post-container')
- postContainer.innerHTML = `<h4>Loading...</h4>`
- const postForm = document.querySelector('#post-form-id')
- const handlePostFormSubmit = (e)=> {
- e.preventDefault()
- // const {content} = Object.fromEntries(new FormData(e.target))
- const form = e.target
- const formData = new FormData(form)
- const url = form.getAttribute('action')
- const method = form.getAttribute('method')
- const xhr = new XMLHttpRequest()
- xhr.open(method, url)
- xhr.setRequestHeader('HTTP_X_REQUESTED_WITH', 'XMLHttpRequest')
- xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
- xhr.onload = ()=> {
- console.log(JSON.parse(xhr.response))
- }
- xhr.send(formData)
- e.target.reset()
- }
- postForm.addEventListener('submit', handlePostFormSubmit)
- const createInnerHtmlElement = (post)=> {
- const element = `
- <div class="post-content">
- <a class="content" href=${post.url}>${post.content}</a>
- <p>${post.user} ${post.total_posts} ${parseInt(post.total_posts) > 1 ? 'Posts' : "post"}</p>
- <button
- class="post-like-btn"
- data_id=${post.id}
- onclick=handleLike("${post.id}","${post.likes}")
- type="button"
- >
- ${post.likes} ${parseInt(post.likes) > 1 ? "Likes" : "Like"}
- </button>
- </div>
- `
- return element
- }
- const loadPosts = ()=> {
- const xhr = new XMLHttpRequest()
- const method = 'GET'
- const url = '/posts?str=js-request'
- const responseType= 'json'
- xhr.responseType = responseType
- xhr.open(method, url)
- xhr.onload = ()=> {
- const response = xhr.response
- const elementArray = response.json_data.map((post)=> {
- return createInnerHtmlElement(post)
- }).join('')
- postContainer.innerHTML = elementArray
- }
- xhr.send()
- }
- loadPosts()
- </script>
- {% endblock content %}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement