thanks I will use this code below in my JS.
But I have got a problem with cookie. Always error 403
request seems good
XHRPOSThttps://bokeh.traimaocv.fr/index/slider
[HTTP/2 403 Forbidden 174ms]
-----------------------------2378569051379486391421896748
Content-Disposition: form-data; name="csrfmiddlewaretoken"
S2f5czHoE3hlT8aMGqFhfyJ8T7kpQIYPJPg4Ucb86L3QfkPToOwyKZ07gVsiciLz
Content-Disposition: form-data; name="freq"
2.6
my source code is
def sinus_slider(request: HttpRequest) -> HttpResponse:
freq = 1
b_ok, val = get_arg_post(request, ['freq'])
if b_ok:
freq = float(val[0])
phase = float(val[1])
x = np.linspace(0, 10, 500)
y = np.sin(freq*x)
source = ColumnDataSource(data=dict(x=x, y=y))
plot = figure(y_range=(-10, 10), width=400, height=400)
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)
amp_slider = Slider(start=0.1, end=10, value=freq, step=.1, title="Amplitude")
callback = CustomJS(args=dict(source=source, amp=amp_slider),
code="""
var inputElems = document.querySelectorAll('input');
var csrfToken = '';
var i=0;
for (i = 0; i < inputElems.length; ++i) {
if (inputElems[i].name === 'csrfmiddlewaretoken') {
csrfToken = inputElems[i].value;
break;
}
}
const data = source.data;
var xhr = new XMLHttpRequest();
xhr.open("POST", "/index/slider", true);
xhr.setRequestHeader('Content-Type', 'text/html; charset=utf-8');
xhr.setRequestHeader('mode', 'same-origin');
xhr.setRequestHeader("referer", "/index/slider");
var dataForm = new FormData();
dataForm.append('csrfmiddlewaretoken', csrfToken);
dataForm.append('freq', amp.value);
xhr.send(dataForm);
""")
amp_slider.js_on_change('value', callback)
layout = row(
plot,
column(amp_slider),
)
script1, div = components(layout, "my plot")
html2 = file_html(layout, CDN, "my plot")
#html2 = html2.replace("</head>","{% csrf_token %}</head>")
code_html = render(request,"sinus_slider.html", dict(script1=script1, div=div))
return code_html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>my plot</title>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
</head>
{{ div | safe }}
<body>
<div>
{{ script1|safe }}
<form method="post">{% csrf_token %}</form>
</div>
<div>
</div>
</body>
</html>
var xhr = new XMLHttpRequest();
xhr.open("POST", "/index/slider", true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
value: amp.value,
csrfmiddlewaretoken: cookie
}));