couldnt make it work....

[RodolVelasco]

Maybe with more examples ....

Edited on 27-June-2014

My AppKernel

public function registerBundles()
    {
        $bundles = array(
            new Symfony\Bundle\FrameworkBundle\FrameworkBundle(),
            new Symfony\Bundle\SecurityBundle\SecurityBundle(),
            new Symfony\Bundle\TwigBundle\TwigBundle(),
            new Symfony\Bundle\MonologBundle\MonologBundle(),
            new Symfony\Bundle\SwiftmailerBundle\SwiftmailerBundle(),
            new Symfony\Bundle\AsseticBundle\AsseticBundle(),
            new Doctrine\Bundle\DoctrineBundle\DoctrineBundle(),
            new Sensio\Bundle\FrameworkExtraBundle\SensioFrameworkExtraBundle(),
        new APY\DataGridBundle\APYDataGridBundle(),
    new Liuggio\ExcelBundle\LiuggioExcelBundle(),
    new MBence\OpenTBSBundle\OpenTBSBundle(),
            new daci\myBundle\dacimyBundle(),
            new daci\my2Bundle\dacimy2Bundle(),
            new daci\UserBundle\daciUserBundle(),
    new FOS\UserBundle\FOSUserBundle(),
    new Genemu\Bundle\FormBundle\GenemuFormBundle()
);

My composer.json

   "require": {
    "php": ">=5.3.3",
    "symfony/symfony": "2.3.*",
    "doctrine/orm": ">=2.2.3,<2.4-dev",
    "doctrine/doctrine-bundle": "1.2.*",
    "twig/extensions": "1.0.*",
    "symfony/assetic-bundle": "2.3.*",
    "symfony/swiftmailer-bundle": "2.3.*",
    "symfony/monolog-bundle": "2.3.*",
    "sensio/distribution-bundle": "2.3.*",
    "sensio/framework-extra-bundle": "2.3.*",
    "sensio/generator-bundle": "2.3.*",
    "incenteev/composer-parameter-handler": "~2.0",
"apy/datagrid-bundle": "dev-master",
"liuggio/excelbundle": ">=1.0.4",
"mbence/opentbs-bundle": "dev-master",
"friendsofsymfony/user-bundle": "~2.0@dev",
    "genemu/form-bundle": "2.2.*"
},

My app/config.yml

genemu_form:
    select2: ~

In my controller I just pasted this and also trying different combinations

$builder
    // ...
    ->add('choice', 'genemu_jqueryselect2_choice', array(
        'choices' => array(
            'foo' => 'Foo',
            'bar' => 'Bar',
        )
    ))
    ->add('country', 'genemu_jqueryselect2_country')
    ->add('entity', 'genemu_jqueryselect2_entity', array(
        'class' => 'MyBundle\Entity\Class',
        'property' => 'name',
    ))
;

[WedgeSama]

Can you be more specific, what do not worked?

Some tricks:

• Have you add JS librairies of what you want to use? Cause the bundle do not pack with them.
• Have you add the require cofiguration to your config.yml?

[RodolVelasco]

I edited the original post

[soullivaneuh]

What do you mean by "couldnt make it work" ?

No form generation ? No CSS ? No JS ?

[WedgeSama]

When you said "couldnt make it work", is that you got aPHP exception or you get the form without Select2?

[RodolVelasco]

This is how It looks

http://prntscr.com/3y75m9

This is my controller

    public function genemuAction()
    {
        $defaultData = array('message' => 'Type your message here');
        $form = $this->createFormBuilder($defaultData)
                    ->add('choice', 'genemu_jqueryselect2_choice', 
                        array(
                            'choices' => array(
                                'foo' => 'Foo',
                                'bar' => 'Bar',
                                'ita' => 'Italia',
                                'bra' => 'Brasil',
                                'hol' => 'Holanda',
                                'ale' => 'Alemania',
                                'chi' => 'Chile',
                            )
                        )
                    )
        ->getForm();

        return $this->render('AcmeDemoBundle:Welcome:genemu.html.twig', array(
                    'form' => $form->createView(),));
    }

This is my twig

{% extends 'AcmeDemoBundle::layout.html.twig' %}

{% block title %}Symfony - Welcome{% endblock %}

{% block content_header '' %}

{% block content %}

    <h1 class="title">Welcome!</h1>

    <p>Genemu</p>

    <p>
        {{ form_start(form) }}

       {{ form_end(form) }}
    </p>

{% endblock %}

What am I missing?

[WedgeSama]

If you have this result, it means you did not include Select2's js file. Go on http://ivaynberg.github.io/select2/index.html, get the last version of the librairy and add it to your project.

Remember, this bundle do not include any js librairy, it only provide interface to use them with Symfony2.

[soullivaneuh]

Do not forget to include form javascripts too!

{% block javascripts %}
    {{ parent() }} {% if you already have js on parent template %}
    {{ form_javascript(form) }}
{% endblock %}

[RodolVelasco]

Thanks guys!! I had to download libraries from the select2 github site. Then added some code to the layout and the twig. This is how it works.

My Controller

<?php

namespace Acme\DemoBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;

class WelcomeController extends Controller
{
    public function indexAction()
    {
        /*
         * The action's view can be rendered using render() method
         * or @Template annotation as demonstrated in DemoController.
         *
         */
        return $this->render('AcmeDemoBundle:Welcome:index.html.twig');
    }

    public function genemuAction()
    {
        $defaultData = array('message' => 'Type your message here');
        $form = $this->createFormBuilder($defaultData)
                    ->add('autocomplete_example', 'genemu_jqueryselect2_choice', 
                        array(
                            'choices' => array(
                                'foo' => 'Foo',
                                'bar' => 'Bar',
                                'ita' => 'Italia',
                                'bra' => 'Brasil',
                                'hol' => 'Holanda',
                                'ale' => 'Alemania',
                                'chi' => 'Chile',
                            ),
                        'attr' => array(
                                    'class' => 'this_is_not_required',
                                    'style' => 'width: 550px;'
                                ),
                        )
                    )
        ->getForm();

        return $this->render('AcmeDemoBundle:Welcome:genemu.html.twig', array(
                    'form' => $form->createView(),));
    }
}

Default symfony2 layout

{% extends "TwigBundle::layout.html.twig" %}

{% block head %}
    <link rel="icon" sizes="16x16" href="{{ asset('favicon.ico') }}" />
    <link rel="stylesheet" href="{{ asset('bundles/acmedemo/css/demo.css') }}" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
{% endblock %}

{% block title 'Demo Bundle' %}

{% block body %}
    {% for flashMessage in app.session.flashbag.get('notice') %}
        <div class="flash-message">
            <em>Notice</em>: {{ flashMessage }}
        </div>
    {% endfor %}

    {% block content_header %}
        <ul id="menu">
            {% block content_header_more %}
                <li><a href="{{ path('_demo') }}">Demo Home</a></li>
            {% endblock %}
        </ul>

        <div style="clear: both"></div>
    {% endblock %}

    <div class="block">
        {% block content %}{% endblock %}
    </div>

    {% if code is defined %}
        <h2>Code behind this page</h2>
        <div class="block">
            <div class="symfony-content">{{ code|raw }}</div>
        </div>
    {% endif %}
{% endblock %}

My html twig

{% extends 'AcmeDemoBundle::layout.html.twig' %}

{% block head %}
{{ parent() }}
    <link href="{{ asset('bundles/genemuform/select2-3.5.0/select2.css') }}" rel="stylesheet"/>
    <script src="{{ asset('bundles/genemuform/select2-3.5.0/select2.js') }}"></script>
    <script>
        $(document).ready(function() { $("#form_autocomplete_example").select2(); });
    </script>
{% endblock %}

{% block title %}Symfony - Welcome{% endblock %}

{% block content_header '' %}

{% block content %}

    <h1 class="title">Welcome!</h1>

    <p>Genemu</p>

    <p>
        {{ form_start(form) }}

        {{ form_end(form) }}
    </p>

{% endblock %}

This is a pic http://prntscr.com/3yk5w4

Thanks again!!!

[WedgeSama]

You are close to use correctly the bundle. In your example, you wrote

<script>
    $(document).ready(function() { $("#form_autocomplete_example").select2(); });
</script>

But in this case, if you change something in your form builder, you have to update your JS code too. If you use the code @Soullivaneuh tell you {{ form_javascript(form) }}, this will generate automaticaly the code wrote manualy.

[soullivaneuh]

Agree with @WedgeSama, if you put the code manually, you loose all the interest of this bundle. ;)

[RodolVelasco]

I addded {{ form_javascript(form) }} but nothing happened. This is how it looks right now http://prntscr.com/3zff3j

[RodolVelasco]

Didnt work with form_javascript and form_stylesheet. Heres my code

My layout.html.twig

{% extends "TwigBundle::layout.html.twig" %}

{% block head %}
    <link rel="icon" sizes="16x16" href="{{ asset('favicon.ico') }}" />
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('bundles/acmedemo/css/demo.css') }}" />
    <link href="{{ asset('bundles/genemuform/select2-3.5.0/select2.css') }}" rel="stylesheet"/>
    {# <!--
    <link href="{{ asset('css/ui-lightness/jquery-ui-1.8.16.custom.css') }}" rel="stylesheet" />
    <link href="{{ asset('css/uploadify/uploadify.css') }}" rel="stylesheet" />
    <link href="{{ asset('css/jcrop/jquery.Jcrop.css') }}" rel="stylesheet" />
    <link href="{{ asset('css/tokeninput/token-input-facebook.css') }}" rel="stylesheet" />
    --> #}        
    {{ form_stylesheet(form) }}
{% endblock %}

{% block javascripts %}
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="{{ asset('bundles/genemuform/select2-3.5.0/select2.js') }}"></script>
    {# <!--
    <script src="{{ asset('js/jquery-1.7.min.js') }}"></script>
    <script src="{{ asset('js/jquery-ui-1.8.16.custom.min.js') }}"></script>
    <script src="{{ asset('tinymce/tiny_mce.js') }}"></script>
    <script src="{{ asset('js/i18n/jquery-ui-i18n.js') }}"></script>

    <script src="{{ asset('js/uploadify/jquery.uploadify.v2.1.4.min.js') }}"></script>
    <script src="{{ asset('js/uploadify/swfobject.js') }}"></script>

    <script src="{{ asset('js/jquery.Jcrop.min.js') }}"></script>

    You have to apply the fix https://github.com/loopj/jquery-tokeninput/pull/172/files 
    for tokeninput to get it work!!
    <script src="{{ asset('js/jquery/jquery.tokeninput.js') }}"></script> 
    --> #}
    {{ form_javascript(form) }}
{% endblock %}

{% block title 'Demo Bundle' %}

{% block body %}
    {% for flashMessage in app.session.flashbag.get('notice') %}
        <div class="flash-message">
            <em>Notice</em>: {{ flashMessage }}
        </div>
    {% endfor %}

    {% block content_header %}
        <ul id="menu">
            {% block content_header_more %}
                <li><a href="{{ path('_demo') }}">Demo Home</a></li>
            {% endblock %}
        </ul>

        <div style="clear: both"></div>
    {% endblock %}

    <div class="block">
        {% block content %}{% endblock %}
    </div>

    {% if code is defined %}
        <h2>Code behind this page</h2>
        <div class="block">
            <div class="symfony-content">{{ code|raw }}</div>
        </div>
    {% endif %}
{% endblock %}

My genemu.html.twig

{% extends 'AcmeDemoBundle::layout.html.twig' %}

{#
{% block head %}
{{ parent() }}  
    <script>
        //$(document).ready(function() { $("#form_autocomplete_example").select2(); });
    </script>
{% endblock %} 
#}

{% block title %}Symfony - Welcome{% endblock %}

{% block content_header '' %}

{% block content %}

    <h1 class="title">Welcome!</h1>

    <p>Genemu</p>

    <p>
        {{ form_widget(form) }}
    </p>

{% endblock %}

[WedgeSama]

Have you add select2 to your config.yml?

genemu_form:
    select2: ~

[RodolVelasco]

I have this config file in xml version. How can I change it to yml? Or how can I do this configuration for xml?

edited Does this line

<service id="genemu.form.jquery.type.select2" class="Genemu\Bundle\FormBundle\Form\JQuery\Type\Select2Type" abstract="true" />

is the equivalent of

genemu_form:
    select2: ~

[WedgeSama]

Normaly, the equivalent is that, but not sure, I always use yaml instead of xml.

<genemu_form:config select2>
</genemu_form:config>

Just to be sure, when I talk about config.yml (or config.xml), I mean the one in app/config.

[RodolVelasco]

Thanks @WedgeSama . Now I think I could make it work.

My layout is

{% extends "TwigBundle::layout.html.twig" %}

{% block head %}
    <link rel="icon" sizes="16x16" href="{{ asset('favicon.ico') }}" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link href="{{ asset('bundles/genemuform/select2-3.5.0/select2.css') }}" rel="stylesheet"/>
    <script src="{{ asset('bundles/genemuform/select2-3.5.0/select2.js') }}"></script>
{% endblock %}

{% block title 'Demo Bundle' %}

{% block body %}
    {% for flashMessage in app.session.flashbag.get('notice') %}
        <div class="flash-message">
            <em>Notice</em>: {{ flashMessage }}
        </div>
    {% endfor %}

    {% block content_header %}
        <ul id="menu">
            {% block content_header_more %}
                <li><a href="{{ path('_demo') }}">Demo Home</a></li>
            {% endblock %}
        </ul>

        <div style="clear: both"></div>
    {% endblock %}

    <div class="block">
        {% block content %}{% endblock %}
    </div>

    {% if code is defined %}
        <h2>Code behind this page</h2>
        <div class="block">
            <div class="symfony-content">{{ code|raw }}</div>
        </div>
    {% endif %}
{% endblock %}

And my genemu.html.twig is

{% extends 'AcmeDemoBundle::layout2.html.twig' %}

{% block head %}
{{ parent() }}
{{ form_javascript(form) }}
{% endblock %}

{% block title %}Symfony - Welcome{% endblock %}

{% block content_header '' %}

{% block content %}

    <h1 class="title">Welcome!</h1>

    <p>Genemu</p>

    <p>
        {{ form_widget(form) }}
    </p>

{% endblock %}

And in my app/config.yml I added this

genemu_form:
    select2: ~