(..).select2 is not a function

Question

I've tried the solution from 'Select2() is not a function' but I still can't figure where the problem is..I got this warning in my console & I don't know is it related to the problem or not

A cookie associated with a cross-site resource at http://cloudflare.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer

<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.12.3.js" integrity="sha256-1XMpEtA4eKXNNpXcJ1pmMPs8JV+nwLdEqwiJeCQEkyc=" crossorigin="anonymous"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
  <script src="/assets/newDailyDetail.js"></script>
  <link rel="stylesheet" href="/css/new.css">
  <link rel="stylesheet" href="/css/css/bootstrap.min.css">
</head>

<body>
  <select class="browser-default custom-select" name="childId" id="childName">
    <option disabled selected>Select the Child..</option>
    <% child.forEach((childItem) => { %>
      <option value="<%= childItem.childId %>">
        <%=childItem.childName %>
      </option>
      <%    })  %>
  </select>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#childName').select2({

      })
    })
  </script>
</body>
</html>

The code in your question works fine, as you can see from the snippet I edited in. Check the console for other errors, such a scripts being blocked — Rory McCrossan, Oct 07 '19 at 12:45
I just get this warning **A cookie associated with a cross-site resource at http://cloudflare.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.** — Eman Emad, Oct 07 '19 at 12:52
and yes it works fine after you edited it but still get the error that what makes me cinfused — Eman Emad, Oct 07 '19 at 12:53
The code works fine. Maybe this could help: https://stackoverflow.com/questions/58211333/chrome-console-samesite-cookie-attribute-warning — Jonathan Dion, Oct 08 '19 at 03:16

score 3 · Answer 1 · answered Oct 07 '19 at 12:34

3

The DOM is not ready. Try this:

$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

answered Oct 07 '19 at 12:34

Jonathan Dion

1,651
11
16

Your code should with with `document.ready` as Jonathan suggested, please check console errors and inspect if select options are populating correctly – Bhushan Kawadkar Oct 07 '19 at 12:39
I include it & select option is populating correctly and still have the error..I edit my question – Eman Emad Oct 07 '19 at 12:42
You don't need a document.ready handler when you place your jQuery logic at the end of the page just before `
` as the OP is
– Rory McCrossan Oct 07 '19 at 12:45

score 0 · Accepted Answer · answered Oct 15 '19 at 20:13

0

I've solved it out..I was using jQuery in my layOut so when I remove jquery cdn in my layOut.ejs..It works fine

answered Oct 15 '19 at 20:13

Eman Emad

77
1
4
13

(..).select2 is not a function

2 Answers2