Всем привет.
Есть у меня js клас который при клике на фильтры обновляет контент на странице.
В контенте на странице тоже есть кнопки по типу добавить в корзину.
Так вот при нажатие на такую кнопку уходит
ajax POST запрос и вторым действием проходит подгрузка контента в
badge иконки корзины.
вот так выглядет код :
| Javascript |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| window.addProduct = e => {
let target = e.currentTarget;
if (target.classList.contains('js-add-product')) {
target.classList.remove('js-add-product');
target.classList.add('active', 'js-cart');
$.ajax({
url: target.getAttribute('data-url'),
method: 'POST'
}).done(setTimeout( function(){
$( "#cart" ).load(location.href + " #cart span" );
}, 200));
} else {
window.location.href = "/cart";
}
}; |
|
тут то и проблема. Подробнее ниже сначала скину класс фильтр и кусок контролера обрабатывающий запрос.
Кусок контролера:
| PHP |
1
2
3
4
5
6
7
8
| // if ($request->get('ajax')) {
if ($request->isXmlHttpRequest()) {
return new JsonResponse([
'content' => $this->renderView('catalog/filters/_products.html.twig', ['product_pager' => $pager, 'asd' => $countFilter]),
'sorting' => $this->renderView( 'catalog/filters/_head_sort.html.twig', ['sort' => $sort]),
'pagination' => $this->renderView( 'catalog/filters/_pagination.html.twig', ['product_pager' => $pager])
]);
} |
|
Класс фильтра:
| Javascript |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
| /**
* @property {HTMLElement} pagination
* @property {HTMLElement} content
* @property {HTMLElement} sorting
* @property {HTMLFormElement} form
*/
export default class Filter {
/**
* @param {HTMLElement|null} element
*/
constructor(element) {
if (element === null){
return
}
this.pagination = element.querySelector('.js-filter-pagination');
this.content = element.querySelector('.js-filter-content');
this.sorting = element.querySelector('.js-filter-sorting');
this.form = element.querySelector('.js-filter-form');
this.bindEvents();
}
/**
* Add the behaviors to the different elements
*/
bindEvents () {
// const aClickListener = e => {
// if (e.target.tagName === 'A') {
// e.preventDefault();
// this.loadUrl(e.target.getAttribute('href'));
// }
// };
this.sorting.addEventListener('change', e => {
if (e.target.tagName === 'SELECT'){
let sort = this.form.querySelector('#' + e.target.getAttribute('id').split('-')[1] );
sort.value = e.target.value;
sort.dispatchEvent(new Event('change'));
}
});
// this.pagination.addEventListener('click', aClickListener);
this.form.querySelectorAll('input').forEach(input => {
input.addEventListener('change', this.loadForm.bind(this));
});
}
async loadForm () {
const data = new FormData(this.form);
const url = new URL(this.form.getAttribute('action') || window.location.href);
const params = new URLSearchParams();
data.forEach((value, key) => {
params.append(key, value);
});
return this.loadUrl(url.pathname + '?' + params.toString())
}
async loadUrl (url) {
// const ajaxUrl = url + '&ajax=1'; //порождает другой баг с пагинацией
const response = await fetch(url, {
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
});
if (response.status >= 200 && response.status < 300) {
const data = await response.json();
this.content.innerHTML = data.content;
this.sorting.innerHTML = data.sorting;
this.pagination.innerHTML = data.pagination;
history.replaceState({}, '', url);
} else {
console.error(response);
}
}
} |
|
Короче
$request->isXmlHttpRequest() перехватывает запрос
.load() который в свою очередь GET и возращает мне данные из class Filter.
Я конечно могу обновлять
badge в этом классе но не знаю стоит ли это делать и есть ли другой способ?
Просто такого поведения я не ожидал и вот теперь думаю можно ли заменить
.load() на другой метод который бы не перехватывался или не стоит так заморачиваться?
(
