CODEWITHSUNDEEP
djangopython-3.x
kampias
kampias

Reputation: 529

Javascript button not responding when clicked

I am attempting to use listjs in a django project i am making. But even when running a snippet taken from the documentation, django refused to run it properly. Take this pen for example. I copy this and put it in my html template. The template now has the following

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
        <script type="text/javascript">
var options = {
  valueNames: [ 'name', 'born' ]
};

var userList = new List('users', options);
    </script>

<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
    </li>
  </ul>

</div>

Result is the page loads fine with no errors in the console but the button or the search do not work at all. I think it is something obvious i am missing here but cant seem to track it.

Upvotes: 1

Views: 76

Answers (1)

kostans3k
kostans3k

Reputation: 467

Try loading scripts at the end of your snippet. listjs library is expecting DOM to be loaded before you can create new List.

<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
    </li>
  </ul>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<script type="text/javascript">

var options = {
  valueNames: [ 'name', 'born' ]
};

var userList = new List('users', options);

</script>

Upvotes: 1

Related Questions