wip: make the getMore button work again with new Request

This commit is contained in:
Yohan Boniface 2024-01-24 12:00:44 +01:00
parent 49f600adfa
commit 8b2778116d
3 changed files with 25 additions and 20 deletions

View file

@ -63,6 +63,14 @@ export const Request = BaseRequest.extend({
// Adds uMap specifics to requests handling // Adds uMap specifics to requests handling
// like logging, CSRF, etc. // like logging, CSRF, etc.
export const ServerRequest = Request.extend({ export const ServerRequest = Request.extend({
_fetch: async function (method, uri, headers, data) {
// Add a flag so backend can know we are in ajax and adapt the response
// See is_ajax in utils.py
headers = headers || {}
headers['X-Requested-With'] = 'XMLHttpRequest'
return await Request.prototype._fetch.call(this, method, uri, headers, data)
},
post: async function (uri, headers, data) { post: async function (uri, headers, data) {
const token = document.cookie.replace( const token = document.cookie.replace(
/(?:(?:^|.*;\s*)csrftoken\s*\=\s*([^;]*).*$)|^.*$/, /(?:(?:^|.*;\s*)csrftoken\s*\=\s*([^;]*).*$)|^.*$/,

View file

@ -36,33 +36,24 @@
{% block bottom_js %} {% block bottom_js %}
{{ block.super }} {{ block.super }}
<script type="text/javascript"> <script type="text/javascript">
window.addEventListener('DOMContentLoaded', (event => { window.addEventListener('DOMContentLoaded', event => {
!(function () {
const ui = new L.U.UI(document.querySelector('header')) const ui = new L.U.UI(document.querySelector('header'))
const getMore = function (e) { const server = new window.umap.ServerRequest(ui)
const getMore = async function (e) {
L.DomEvent.stop(e) L.DomEvent.stop(e)
xhr._ajax({ const [{html}, response] = await server.get(this.href)
uri: this.href, const container = this.parentNode
verb: 'GET', container.innerHTML = html
callback: function (data) { const more = document.querySelector('.more_button')
const container = this.parentNode if (more) {
container.innerHTML = data L.DomEvent.on(more, 'click', getMore, more)
const more = document.querySelector('.more_button') }
if (more) {
L.DomEvent.on(more, 'click', getMore, more)
}
},
context: this,
})
} }
const more = document.querySelector('.more_button') const more = document.querySelector('.more_button')
if (more) { if (more) {
L.DomEvent.on(more, 'click', getMore, more) L.DomEvent.on(more, 'click', getMore, more)
} }
})(this) })
}
))
</script> </script>
{% endblock bottom_js %} {% endblock bottom_js %}
{% block footer %} {% block footer %}

View file

@ -108,6 +108,12 @@ class PaginatorMixin:
return [self.list_template_name] return [self.list_template_name]
return super().get_template_names() return super().get_template_names()
def get(self, *args, **kwargs):
response = super().get(*args, **kwargs)
if is_ajax(self.request):
return simple_json_response(html=response.rendered_content)
return response
class PublicMapsMixin(object): class PublicMapsMixin(object):
def get_public_maps(self): def get_public_maps(self):