фильтр категорий с ajax и symfony
На веб-сайте, созданном с помощью Symfony, я бы хотел, чтобы пользователь мог отображать вопросы категории, нажимая кнопку.
На данный момент, нажав на категорию возвращает всю страницу. И у меня нет никаких ошибок в моей консоли.
Вот код:
app.js
function helpFilterAction() {
$(".helpCategoryFilter").on('click', function (e) {
e.preventDefault();
var $this = $(this);
var category = $(this).text().trim();
$.ajax({
url: $this.attr('action'),
type: $this.attr('method'),
data: 'category='+category,
success: function(data) {
if (!$.trim(data)){
$('#faq_list').html("<p class='content__text'>Nothing</p>");
}
else{
$('#faq_list').html(data);
$(".loading").hide();
}
}
});
});
}
FaqController.php
/**
* Search for faq entities with categories
*
* @Route("/category", name="faq_category")
* @Method({"POST"})
*/
public function helpFilterAction(Request $request)
{
if ($request->isXmlHttpRequest()) {
$category = '';
$category = $request->get('category');
$em = $this->getDoctrine()->getManager();
if ($category != '') {
$qb = $this->createQueryBuilder('a');
$qb->add('select', 'a');
$qb->leftJoin('a.category', 'c');
$qb->where('c.name LIKE :category');
$qb->setParameter('category', $category);
$query = $qb->getQuery();
$faqs = $query->getResult();
} else {
$faqs = $em->getRepository('AppBundle:Faq')->findAll();
}
return $this->render(
'faq/list.html.twig',
array(
'faqs' => $faqs,
)
);
} else {
return $this->indexAction();
}
}
faq.php
/**
* Faq
*
* @ORM\Table(name="faq")
* @ORM\Entity(repositoryClass="AppBundle\Repository\FaqRepository")
*/
class Faq
{
/**
* @var int
*
* @ORM\Column(name="id", type="integer")
* @ORM\Id
* @ORM\GeneratedValue(strategy="AUTO")
*/
private $id;
/**
* @var string
*
* @ORM\Column(name="question", type="string", length=255)
*/
private $question;
/**
* @var string
*
* @ORM\Column(name="answer", type="text")
*/
private $answer;
/**
* @ORM\ManyToOne(targetEntity="FaqCategory", inversedBy="faqs")
*/
private $category;
...
}
FaqCategory.php
/**
* FaqCategory
*
* @ORM\Table(name="faq_category")
* @ORM\Entity(repositoryClass="AppBundle\Repository\FaqCategoryRepository")
*/
class FaqCategory
{
/**
* @var int
*
* @ORM\Column(name="id", type="integer")
* @ORM\Id
* @ORM\GeneratedValue(strategy="AUTO")
*/
private $id;
/**
* @var string
*
* @ORM\Column(name="name", type="string", length=255, unique=true)
*/
private $name;
/**
* @ORM\OneToMany(targetEntity="Faq", mappedBy="category")
*/
private $faqs;
...
}
index.html.twig
{% extends 'base.html.twig' %}
{% block body %}
<div class="linearBg site-pusher help--pusher">
<div class="content">
<div class="content__title">
<h2 class="content__titleText">Aide</h2>
</div>
<div class="content__text mobile-not-displayed">
<p class="content__textText">Vous retrouverez-ici les nombreux conseils et informations concernant les différents services qu’offrent notre plateforme</p>
</div>
<form id="faq_search" action="{{ path('faq_search') }}" method="post" class="searchForm--help">
<input id="appbundle_research_faq_keyword" type="search" name="search" placeholder="Comment réserver mon billet ?" class="searchForm__input--help">
<button type="submit" class="searchForm__submit--help">CHERCHER</button>
</form>
</div>
<div id="helpCategoriesFilter" class="helpCategoriesFilter">
{% for faqcategory in faqcategorys %}
<div class="helpCategoryFilterContent">
<div class="helpCategoryFilter">
<div class="helpCategoryFilterTitle">
{{ faqcategory.name }}
</div>
</div>
<div class="helpCategoryFilterBg">
</div>
</div>
{% endfor %}
</div>
<div class="loading"></div>
<div id="faq_list" class="content content__help">
{% include 'faq/list.html.twig' %}
</div>
</div>
{% endblock %}
list.html.twig
{% for faq in faqs %}
<div class="helpContent">
<div id="helpCard1" class="helpContent__card">
<div class="helpContent__title">
{{ faq.question }}
</div>
<div class="helpContent__chevron">
<img src="{{ asset('img/icons/Chevron.svg') }}" alt="">
</div>
</div>
<div id="helpContent1" class="helpContent__text not-displayed">
{{ faq.answer }}
</div>
</div>
{% endfor %}
Может ли кто-нибудь помочь мне с этим?
Решение
FaqController.php
Вы должны заменить $category = $request->get('category'); от $category = $request->request->get('category');,
Вы можете посмотреть документацию Symfony на https://symfony.com/doc/current/introduction/http_fundamentals.html#symfony-request-object
Вы также должны перенаправить на indexAction вместо того, чтобы называть это. Так должно выглядеть вот так return $this->redirectToRoute('index'); вместо. куда index это название вашего маршрута.
Кроме того, как вы указали в своем комментарии, вы должны иметь изменения $qb = $this->createQueryBuilder('a'); в $qb = $em->createQueryBuilder('a'); а также $qb = $this->createQueryBuilder('a'); $qb->add('select', 'a'); $qb->leftJoin('a.category', 'c'); в $qb = $em->createQueryBuilder('a'); $qb->select('a'); $qb->from('AppBundle:Faq', 'a'); qb->leftJoin('a.category', 'c');
index.html.twig
Заменить линию <div class="helpCategoryFilter"> от <div class="helpCategoryFilter" data-href="{{ path('faq_category') }}">
app.js
Вместо этого он должен выглядеть так, чтобы получить действие и метод из вашей формы, а не из div, из которого вы получаете категорию.
function helpFilterAction() {
$(".helpCategoryFilter").on('click', function (e) {
e.preventDefault();
var $this = $(this);
var url = $(this).attr('data-href');
var category = $(this).text().trim();
$.ajax({
url: url,
type: 'POST',
data: 'category='+category,
success: function(data) {
if (!$.trim(data)){
$('#faq_list').html("<p class='content__text'>Nothing</p>");
}
else{
$('#faq_list').html(data);
$(".loading").hide();
}
}
});
});
}
Другие решения
Просто увидел, что вы не добавили action атрибут в вашем интерактивном элементе div.
Быстрый ответ, вот как вы должны добавить путь для чтения в jQuery Click Событие :
<div id="helpCategoriesFilter" class="helpCategoriesFilter">
{% for faqcategory in faqcategorys %}
<div class="helpCategoryFilterContent">
<div class="helpCategoryFilter" data-href="{{ path('ajax_path_route_name_here') }}">
<div class="helpCategoryFilterTitle">
{{ faqcategory.name }}
</div>
</div>
<div class="helpCategoryFilterBg">
</div>
</div>
{% endfor %}
</div>
А вот как вы должны собрать data-href значение в вашем событии jQuery:
function helpFilterAction() {
$(".helpCategoryFilter").on('click', function (e) {
e.preventDefault();
var $url = $(this).data('href');
var category = $(this).text().trim();
$.ajax({
url: $url,
type: 'GET',
data: {"category" : category},
success: function(data) {
if (!$.trim(data)){
$('#faq_list').html("<p class='content__text'>Nothing</p>");
}
else{
$('#faq_list').html(data);
$(".loading").hide();
}
}
});
});
}
Я не детально рассмотрел ваш код. Но я бы посоветовал вам отладить Symfony Controller только после того, как вы увидите Ajax бьет правильный URL.
Надеюсь это поможет!
detector