How to integrate jQuery select2 library into a Symfony3 form?

Question

I am trying to manually integrate the jQuery select2 library into my Symfony form as a replacement for my select boxes.

Following the manual I have added to the page header:

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>

In addition I have modified my form class, adding attr to each select:

->add('kontoWinien', EntityType::class, array(
    'class' => 'AppBundle\Entity\konto',
    'attr' => array('class'=>'select2')
))

My modified Twig template:

{{ form_start(form) }}
<SCRIPT type="text/javascript">
     $(document).ready(function() {
        $(".select2").select2();
    });
</SCRIPT>
{{ form_widget(form) }}
{{ form_end(form) }}

However the select2 is still not loaded.

HTML code generated by symfony3 looks like this:

 <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
</head>

<form name="dziennik" method="post">
<script type="text/javascript">
    $(document).ready(function() {
        $(".select2").select2();
    });
</script>

<select id="dziennik_kontoWinien" name="dziennik[kontoWinien]" class="select2 form-control">

Could you please advise what am i doing wrong?

Have you tried straight up HTML on a non-Symfony generated select box just to see if that works properly? Are you sure it's not working? The basic example looks very similar to a normal select box. — Jason Roman
– Jason Roman, Commented Feb 19, 2016 at 22:53

buphmin · Accepted Answer · 2016-02-20 05:49:30Z

Like fcpauldiaz said you'll need to load up jquery before hand. I took your code loaded jquery (and some options so we can see it work) and it worked fine.

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
  <!-- Loading jquery here--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
</head>

<form name="dziennik" method="post">
  <script type="text/javascript">
    $(document).ready(function() {
      $(".select2").select2();
    });
  </script>

  <select id="dziennik_kontoWinien" name="dziennik[kontoWinien]" class="select2 form-control">
    <option value="test1">test1</option>
    <option value="test2">test2</option>
  </select>

fcpauldiaz · Accepted Answer · 2016-02-19 23:15:41Z

1

Try this

 <script type="text/javascript">
     $('select').select2();
 </script>

answered Feb 19, 2016 at 23:15

fcpauldiaz

4236 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to integrate jQuery select2 library into a Symfony3 form?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related