Как сделать updateview в django с помощью ajax

models.py

from django.db import models

# Create your models here.

class Login(models.Model):
    username=models.TextField(max_length=30)
    password=models.TextField(max_length=30)

class CreateProduct(models.Model):
    title = models.CharField(max_length=200)
    description = models.CharField(max_length=200)
    image = models.FileField(blank=True)

    def __str__(self):
         return self.title

views.py

from django.db import models
from django.db.models import fields
from django.shortcuts import redirect, render
from django.views.generic import TemplateView,CreateView,FormView,ListView,DetailView
from django.views.generic.edit import UpdateView
from django.contrib.auth.models import User,auth


from .models import CreateProduct

from django.urls import reverse_lazy
from django.shortcuts import get_object_or_404

# Create your views here.
def home(request):
    return render(request,'index.html')

def login(request):
    if request.method=="POST":
        username=request.POST['username']
        password=request.POST['password']
        
        user = auth.authenticate(username=username, password=password)
        if user is not None:
            auth.login(request, user)
            return redirect('productslist')
        else:
            return redirect('/')
    else:
        return render(request, 'index.html')

class ProductsList(ListView):
     model = CreateProduct
     context_object_name = 'products'
     template_name = "productslist.html"  
    

class ProductsCreate(CreateView):
    model = CreateProduct
    fields = ['title','description','image']
    template_name = "productscreate.html"     
    success_url=reverse_lazy('productslist')


class ProductsDetailView(DetailView):
     template_name = "productsdetail.html"
     queryset = CreateProduct.objects.all()
     context_object_name = 'products'
     model = CreateProduct


class ProductsUpdate(UpdateView):
    model = CreateProduct
    fields = ['title','description','image']
    template_name = "productsupdate.html"     
    queryset = CreateProduct.objects.all()
    success_url=reverse_lazy('productsdetail')

productdetail.html

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
  <!-- <title>Bootstrap Example</title> -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <!-- <div class="navbar-header">
        <a class="navbar-brand" href="#">WebSiteName</a>
      </div> -->
      <ul class="nav navbar-nav">
        <li class="active"><a href="/">Home</a></li>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="{% url 'productscreate' %}"><span></span>Create</a></li>
        <li><a href="{% url 'productslist' %}"><span></span>Product Lists</a></li>
    
      </ul>
    </div>
  </nav>
    <h1 style="text-align: center;">PRODUCTS DETAILVIEW</h1>

    <form>
     Title:- {{products.title }} <br><br>
     
     Description:- {{ products.description}}<br><br>

     Image :- <img src="{{products.image.url}}"><br><br>
 
     <input type="submit" value="Edit" href="{% url 'productsupdate' product.id %}">
    </form>
    


</body>
</html>

productcreate.html

productupdate.html

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
  <!-- <title>Bootstrap Example</title> -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <!-- <div class="navbar-header">
            <a class="navbar-brand" href="#">WebSiteName</a>
          </div> -->
          
        </div>
      </nav>

<h1>Create Products</h1>

    <form method="post">
        {% csrf_token %}
        <table>
    <tr>
        <td>Title:<br>
        <input type="text" name="title" id="title"></td>
        <br>
    </tr>
    <tr>
        <td>Description:<br>
        <textarea name="description" id="description">Description</textarea></td>
        <br>
    </tr>
    <tr>
        <td>Image:<br>
        <input type="file" name="image" id="image"></td>
        <br>
    </tr>
    
    <tr>
        <td><button type="button" id="update">Update</button></td>
    </tr>

</table>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script>
  var formData = new FormData();
 
    $(document).on('click', '#submit', function(e) {
      formData.append('title', $('#title').val())
      formData.append('description', $('#description').val())
      formData.append('image',  $('#image')[0].files[0])
      formData.append('action', 'create-post')
      formData.append('csrfmiddlewaretoken', '{{ csrf_token }}')
        $.ajax({
            type: 'POST',
            url: '{% url "productscreate" %}',
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            enctype: 'multipart/form-data',
            success: function (){
                window.location = '{% url "productslist" %}'; 
            },
            error: function(xhr, errmsg, err) {
                console.log(xhr.status + ":" + xhr.responseText)
            }
        })
    })
</script>


</body>
</html>

Я хочу кнопку редактирования на странице подробностей и когда я нажимаю кнопку редактирования, она должна отображать форму обновления и после того, как я нажму кнопку обновления, она должна обновить страницу подробностей. В этом коде обновление не работает Как редактировать и обновлять с помощью пользовательской формы django, используя ajax пожалуйста, помогите мне Заранее спасибо

Вернуться на верх