samedi 27 juin 2015

Ajax search filter

I have a table 'content' you can assign categories to your content.

class Content
{

    private $name;

    private $categories;

    ...
    ...
    ...

    public function __construct()
    {
        $this->categories = new \Doctrine\Common\Collections\ArrayCollection();
    }

    public function addCategories(\Publicartel\AppBundle\Entity\Category $categories)
    {
        $this->categories[] = $categories;

        return $this;
    }

    public function removeCategories(\Publicartel\AppBundle\Entity\Category $categories)
    {
        $this->categories->removeElement($categories);
    }

    public function setCategories(\Publicartel\AppBundle\Entity\Category $categories = null)
    {
        $this->categories = $categories;

        return $this;
    }

    public function getCategories()
    {
        return $this->categories;
    }

}

Then I do a query to find all categories and display them on a page.

$categories = $em->getRepository('PublicartelAppBundle:Category')->getAllCategories();

public function getAllCategories()
    {

    $em = $this->getEntityManager();

    $dql = 'SELECT c FROM Publicartel\AppBundle\Entity\Category c';

    $query = $this->getEntityManager()
        ->createQuery($dql)
        ->setHydrationMode(\Doctrine\ORM\Query::HYDRATE_ARRAY);

    return $query->execute();
}

Showing all categories in the template twig.

<div class="form-group">
            <label for="publicartel_appbundle_category_name">Buscar por categoría:</label>
            <select id='selectCategory' class="form-control select2">
                {% for categories in categories %}
                    <option>
                        {{ categories.name }}
                    </option>
                {% endfor %}
            </select>
        </div>

I assign a handle to select that displays categories, to pass the value from the select, within the ajax.

I have a function to detect the change in the select option chosen.

Save select value to pass to the controller to perform the query:

$('#selectCategory').change(function() {
                var optionSelect = $(this).val();
                console.log(optionSelect);
                $.ajax({
                    url: '{{path('playlist_new') }}', 
                    data: '&category='+optionSelect,
                    type: 'POST',
                    success: function(catContent) {

                    {% for contentCategory in catContent %}
                        var nameContent =  '{{ contentCategory.name }}';
                        console.log(nameContent);
                    {% endfor %}

                    $('playlist_content_name').html(nameContent);
                },
                error: function(e){
                    console.log(e.responseText);
                }
            });
        });

$category = $request->query->get('category');

    $catContent = $em->getRepository('PublicartelAppBundle:Content')->findByCategory($category);

return $this->render('PublicartelAppBundle:Playlist:new.html.twig', array(
            'catContent' => $catContent, 
            'categories' => $categories,
            'entity'     => $entity,
            'form'       => $form->createView(),
        ));

The query to display the contents from the selected category:

public function findByCategory($category)
    {
        $em = $this->getEntityManager();

    $dql = 'SELECT c FROM Publicartel\AppBundle\Entity\Content c';

    if (!is_null($category)) {
        $dql .= " WHERE c.categories.name LIKE :category";
    }

    $query = $this->getEntityManager()
        ->createQuery($dql)
        ->setHydrationMode(\Doctrine\ORM\Query::HYDRATE_ARRAY);

    if (!is_null($category)) {
        $query->setParameter('category', '%'.$category.'%');
    }

    return $query->getResult();
}

But console always shows the same result but in my select choose different options.

Is to select the option you select, always shows the same result.

Aucun commentaire:

Enregistrer un commentaire