0

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>

4
  • 1
    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 Commented Oct 7, 2019 at 12:45
  • I just get this warning A cookie associated with a cross-site resource at 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 chromestatus.com/feature/5088147346030592 and chromestatus.com/feature/5633521622188032.
    – Eman Emad
    Commented Oct 7, 2019 at 12:52
  • and yes it works fine after you edited it but still get the error that what makes me cinfused
    – Eman Emad
    Commented Oct 7, 2019 at 12:53
  • The code works fine. Maybe this could help: stackoverflow.com/questions/58211333/… Commented Oct 8, 2019 at 3:16

2 Answers 2

3

The DOM is not ready. Try this:

$(document).ready(function() {
    $('.js-example-basic-single').select2();
});
3
  • Your code should with with document.ready as Jonathan suggested, please check console errors and inspect if select options are populating correctly Commented Oct 7, 2019 at 12:39
  • I include it & select option is populating correctly and still have the error..I edit my question
    – Eman Emad
    Commented Oct 7, 2019 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 </body> as the OP is Commented Oct 7, 2019 at 12:45
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.