"Use jQuery Select2 with Ajax" doc inconclusive

wowpatrick commented 10 years ago

I'm trying to add a Select2 input as described in the "Use jQuery Select2 with Ajax" doc. Adding a jQuery Select2 Field following the jQuery Select2 Field (view demo) documentation works just fine. But the linked documentation on how to implement an Ajax-loading Select2 form is very inconclusive. If I unterstand the doc correctly, it aims to create the same as mentioned in the Select2 documentation. I added hidden field as well as the required JavaScript, but the only thing that I get is a Variable "id" does not exist in xBundle:x:new.html.twig at line x.

I think the doc could need some more information. For example is a extra Ajax Action needed to return the data, etc.?

Form builder (taken directly form the mentioned doc):

...
->add('field_name', 'genemu_jqueryselect2_hidden', array(
    'configs' => array(
        'multiple' => true // Wether or not multiple values are allowed (default to false)
    )
))
->add('field_name', 'genemu_jqueryselect2_entity', array(
    'class' => 'xBundle:Entity',
    'property' => 'foo',
))

View (also taken directly form the doc):

{% block stylesheets %}
    {{ form_stylesheet(form) }}
{% endblock %}

{% block javascript %}
    {{ form_javascript(form) }}
{% endblock %}

{% block genemu_jqueryselect2_javascript %}

    <script type="text/javascript">
        $field = $('#{{ id }}');

        var $configs = {{ configs|json_encode|raw }};

        // custom configs
        $configs = $.extend($configs, {
            query: function (query) {
                var data = {results: []}, i, j, s;
                for (i = 1; i < 5; i++) {
                    s = "";
                    for (j = 0; j < i; j++) {s = s + query.term;}
                    data.results.push({id: query.term + i, text: s});
                }
                query.callback(data);
            }
        });
        // end of custom configs

        $field.select2($configs);
    </script>

{% endblock %}

DougHayward commented 10 years ago

I too would like some information on this subject. Have been trying for the last 2 hours to make 'select2' work with a "Collection of Embedded Forms" as taught here http://symfony.com/doc/2.3/cookbook/form/form_collections.html

Symfony 2.3.11 by the way.

DougHayward commented 10 years ago

For me it is the Configs section that is throwing the errors:

Variable "configs" does not exist in xBundle:Bundle

Addressing 'Variable id does not exist error' I have ignored adding this line : $field = $('#{{ id }}'); on the basis it has already been declared here :

function triggerJavascript(id)
{
    $field = $('#' + id);

    {{ form_javascript(form.tags.vars.prototype, true) }} 
}

From here: https://github.com/genemu/GenemuFormBundle/blob/master/Resources/doc/tips/form_prototype.md

Adding the name of my field to the end of this line:{{ form_javascript(form.tags.vars.prototype, true) }} so it looks like this:{{ form_javascript(form.product.vars.prototype.product, true) }}

So my current code looks like this:

{% block stylesheets %}
    {{ form_stylesheet(form) }}
{% endblock %}

{% block javascript %}
    {{ form_javascript(form) }}
{#{{ form_javascript(form.product.vars.prototype) }}#}
{% endblock %}
{% block genemu_jqueryselect2_javascript %}

<script>
    var $collectionHolder;
    var $addProductsLink = $('<a href="#" class="add_product_link">Add a product</a>');
    var $newLinkLi = $('<li></li>').append($addProductsLink);

    jQuery(document).ready(function() {
        $collectionHolder = $('ul.product');
        $collectionHolder.find('formrowprod').each(function() {
            addProductsFormDeleteLink($(this));
        });
        $collectionHolder.append($newLinkLi);
        $collectionHolder.data('index', $collectionHolder.find(':input').length);
        $addProductsLink.on('click', function(e) {
            e.preventDefault();
            addProductsForm($collectionHolder, $newLinkLi);
        });
    });
    function triggerJavascript(id)
    {
        $field = $('#' + id);

      {{ form_javascript(form.product.vars.prototype.product, true) }}
    }

    function addProductsForm($collectionHolder, $newLinkLi) {
        var prototype = $collectionHolder.data('prototype');
        var index = $collectionHolder.data('index');
        var newForm = prototype.replace(/__name__/g, index);
        var id = '{{ form.product.vars.id }}_' + id;
        $collectionHolder.data('index', index + 1);
        var $newFormLi = $('<li></li>').append(newForm);
        $newLinkLi.before($newFormLi);
        addProductsFormDeleteLink($newFormLi);
        triggerJavascript(id);
{#        var $configs = {{ configs|json_encode|raw }};#}
{#var $configs = {{  }};#}
{#        $field.select2($configs);         $configs = $.extend($configs, {#}
{#            query: function (query) {#}
{#                var data = {results: []}, i, j, s;#}
{#                for (i = 1; i < 5; i++) {#}
{#                    s = "";#}
{#                    for (j = 0; j < i; j++) {s = s + query.term;}#}
{#                    data.results.push({id: query.term + i, text: s});#}
{#                }#}
{#                query.callback(data);#}
{#            }#}
{#        });#}

    }
    function addProductsFormDeleteLink($productsFormLi) {
        var $removeFormA = $('<a href="#">Delete</a>');
        $productsFormLi.append($removeFormA);

        $removeFormA.on('click', function(e) {
            e.preventDefault();
            $productsFormLi.remove();
        });
    }

</script>
    {% endblock %}

RecipeType

/**

@param FormBuilderInterface $builder
@param array $options */ public function buildForm(FormBuilderInterface $builder, array $options) { $builder ->add('product', 'genemu_jqueryselect2_hidden', array( 'configs' => array( 'multiple' => false // Wether or not multiple values are allowed (default to false) ) )) ; $builder ->add('amount') ->add('product', 'genemu_jqueryselect2_entity', array( 'class' => 'BCInventoryBundle:Product', 'read_only' => 'true', ))
->add('measure', 'genemu_jqueryselect2_entity', array( 'class' => 'BCInventoryBundle:Measures', 'read_only' => 'true' )) ->add('productcost', 'money', array( 'read_only' => 'true' ));

}```



I have no errors at all if I comment all the config section but ... the fields just look normal?

DougHayward commented 10 years ago

Have just found this https://github.com/genemu/GenemuFormBundle/issues/235

~~not in a position to try it out at moment (in pub) but will do once home.~~

Have tried it just now but to no avail.

webdevilopers commented 10 years ago

I would like to see some info about the initial issue by @wowpatrick .

As far as I understand the docs there should only be one field added:

->add('field_name', 'genemu_jqueryselect2_hidden', array(
    'configs' => array(
        'multiple' => false
    )
))

Since I can't add fields to my form if they don't exist in my Entity e.g. field_name_select2_text.

This at least solved the Variable "id" does not exist in xBundle:x:new.html.twig at line x. problem.

The error message I'm getting now from select2 is: query function not defined for Select2 contract_branch

So I guess there must be some options missing to set on the configs key.

webdevilopers commented 10 years ago

I found this solution in french, but the bottom code indeed adds functionality: http://fr.openclassrooms.com/forum/sujet/symfony-fosuserbundle-autocompletion-champ-ville

$builder->add('ville', 'genemu_jqueryselect2_hidden', array(
    'configs' => array(
        'multiple' => false // Wether or not multiple values are allowed (default to false)
    )  
));

        $builder->add('ville', 'genemu_jqueryselect2_entity', array(
    'class' => 'CreativeFolio\UtilisateurBundle\Entity\Ville',
    'property' => 'nom',
    'configs' => array(
        'minimumInputLength' => 2, // Wether or not multiple values are allowed (default to false)
        'placeholder' => 'Votre ville',
        'allowClear' => true,
        'width' => '250px'
    )
));

But unfortunately it won't create a remote / ajax request.

genemu / GenemuFormBundle

"Use jQuery Select2 with Ajax" doc inconclusive #330