Re: Django REST Framwork Use9-3

[hiroaki ono]

hello alex.l
Thank you for your support.

The following permissions will prevent the system from functioning as a cloud system:

'DEFAULT_PERMISSION_CLASSES': ('rest_framework.permissions.AllowAny',),

In Django Template THML, configure it as follows:

 
<form method="POST" enctype='multipart/form-data' name="form"> 
{%csrf_token%} 
{{ form.non_field_errors }} 
<div class="d-flex form-row"> 
<div class="p-1 w-25"> 
{{ form.estimate_no.label_tag }} 
{{ form.estimate_no }} 
<span class="helptext">{{ form.estimate_no.help_text }}</span> 
{{ form.estimate_no.errors }} 
</div> 
<div class="p-1 w-75"> 
{{ form.estimate_name.label_tag }} 
{{ form.estimate_name }} 
<span class="helptext">{{ form.estimate_name.help_text }}</span> 
{{ form.estimate_name.errors }} </div>
</div>

<div class="d-flex flex-row">
<button class="btn btn-primary btn-sm mx-2" type="submit">create</button>

<button class="btn btn-secondary btn-sm mx-2" type="reset">reset</button>

<a class="btn btn-warning btn-sm mx-2" href="{% url 'estimate:estimate_list' %}">estimate list</a>

</div>

</form>

Handling AJAX is described in the Django manual.

https://docs.djangoproject.com/ja/6.0/howto/csrf/

Setting the token on the AJAX request¶
Finally, you’ll need to set the header on your AJAX request. Using the fetch() API:

const request = new Request(
/* URL */,
{
method: 'POST',
headers: {'X-CSRFToken': csrftoken},
mode: 'same-origin' // Do not send CSRF token to another domain.
}
);
fetch(request).then(function(response) {
// ...
});

Is your company's system incomplete in terms of Django REST Framework support?

Hiroaki Ono from Tokyo

[ahmadzaheer]

Hello Hiroaki Ono,

The error you are facing is CSRF token is missing which is basically sent as 'X-CSRFToken' header with each request.

For this you can use the headers config in the ajax store which add this headers with each request originated within AjaxStore
https://bryntum.com/products/grid/docs/api/Core/data/AjaxStore#config-headers

Add the following config in the ajax store:

  fetchOptions: {
      credentials: 'same-origin'
  },
  headers: {
      'X-CSRFToken': getCookie('csrftoken') // You can create a function that get 'csrftoken' cookie from document.cookie
  }

Also update the headers in the beforeRequest method:

beforeRequest: (event) => {
	store.headers = {
              ...store.headers,
              'X-CSRFToken': getCookie('csrftoken')
          };
          

      // Do other things
}

This will send the csrf token with each request to the backend.

[hiroaki ono]

Please tell me the correct way to treat it.
grid.config.js:53 Uncaught SyntaxError: Unexpected token 'if' (at grid.config.js:53:13)

const store = new AjaxStore({
    createUrl: "/api/estimateD_info/",
    readUrl: "/api/estimateD_info/",
    updateUrl: "/api/estimateD_retrieve/",
    deleteUrl: "/api/estimateD_retrieve/",
    autoLoad: true,
    autoCommit: true,
    useRestfulMethods: true,
    transformFlatData : true,
    sendAsFormData : true,
    tree: true,
    modelClass : Item,
    parentIdParamName : "parent",

httpMethods: {
read: "GET",
create: "POST",
update: "PATCH",
delete: "DELETE",
},
fetchOptions: {
  credentials: 'same-origin'
},
headers: {
  'X-CSRFToken': getCookie('csrftoken') // You can create a function that get 'csrftoken' cookie from document.cookie
},
listeners: {
    beforeRequest: (event) => {
        store.headers = {'X-CSRFToken': getCookie('csrftoken')},
        if (event.action === "create") {
            const newItem = event.body.data[0];
            delete newItem.id;
            event.body = newItem;
            return
        }
        if (event.action === "update") {

            const updatedItem = event.body.data[0];
            const itemId = updatedItem.id;
            delete updatedItem.id;
            event.body.data = updatedItem;
            event.url = `/api/estimateD_retrieve/${itemId}/`;
            return
        }
            if (event.action === "delete") {
            const itemIds = event.body.ids;
            event.url = `/api/estimateD_retrieve/${itemIds[0]}/`;
            return
        }

    },
},
});

[Animal]

This is just a basic JavaScript syntax error in your code:

Screenshot 2026-03-25 at 07.04.43.png (79.94 KiB) Viewed 1732 times