Why isn't list.js working when I click the button when I am trying to sort my list

Question

Here is my code. I do not know what I am missing. I went to the list.js documentation and I followed every step. I even went to jfiddle and did an example and it worked. I think I am doing something wrong maybe because I am using ejs. Can someone help me out. Below is my HTML code and Javascript.

Thanks

<div class="client-names">
  <!-- class="search" automagically makes an input a search field. -->
  <input class="search" placeholder="Search" />
  <!-- class="sort" automagically makes an element a sort buttons. The date-sort value decides what to sort by. -->
  <button class="sort" data-sort="fname">
                        Sort By First Name
                      </button>
  <button class="sort" data-sort="lname">
                      Sort by Last Name
                        </button>

  <ul class="list">
    <% clients.forEach(function(client) { %>

      <li>
        <span class="lname"><%= client.lname %></span>
        <span class="fname"><%= client.fname %></span>
        <br>
        <form class="delete-form" action="/clients/<%= client._id %>?_method=DELETE" method="POST">
          <button class="btn btn-danger btn-md" data-id="<%= client._id %>" id="delete-client">Delete Client</button>
        </form>
        <a href="/clients/<%= client._id %>" data-id="<%= client._id %>" class="btn btn-primary btn-md view-client-button">View Client</a>
      </li>
      <% }); %>
  </ul>
</div>

JAVASCRIPT

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

  var clientList = new List('client-names', options);
</script>

Answer 1

list.js requires an element as first parameter at init. From doc :

new List(id/element, options, values):

id or element *required Id the element in which the list area should be initialized. OR the actual element itself.

So, if you change this line:

<div class="client-names">

to:

<div id="client-names">

your code works.

Instead, if you need to use the class name, you need to get the element by class like in:

var clientList = new List(document.getElementsByClassName('client-names')[0], options);

HOW TO SORT...

It's enough to add the click event handler to your sort buttons and call the sort method :

$('.sort').on('click', function(e) {
    clientList.sort(this.dataset.sort, { order: "asc" });
})

or in javascript:

document.querySelectorAll('.sort').forEach(function(ele, idx) {
    ele.addEventListener('click', function(e) {
        clientList.sort(this.dataset.sort, { order: "asc" });
    });
});

 var options = { valueNames: ['lname', 'fname'] }; var clientList = new List(document.getElementsByClassName('client-names')[0], options); document.querySelectorAll('.sort').forEach(function(ele, idx) { ele.addEventListener('click', function(e) { clientList.sort(this.dataset.sort, { order: "asc" }); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script> <div class="client-names"> <!-- class="search" automagically makes an input a search field. --> <input class="search" placeholder="Search" /> <!-- class="sort" automagically makes an element a sort buttons. The date-sort value decides what to sort by. --> <button class="sort" data-sort="lname"> Sort By First Name </button> <button class="sort" data-sort="fname"> Sort by Last Name </button> <ul class="list"> <li> <span class="lname">name3</span> <span class="fname">name2</span> <br> <form class="delete-form" action="/clients/<%= client._id %>?_method=DELETE" method="POST"> <button class="btn btn-danger btn-md" data-id="<%= client._id %>" id="delete-client1">Delete Client</button> </form> <a href="/clients/<%= client._id %>" data-id="<%= client._id %>" class="btn btn-primary btn-md view-client-button">View Client</a> </li> <li> <span class="lname">name2</span> <span class="fname">name5</span> <br> <form class="delete-form" action="/clients/<%= client._id %>?_method=DELETE" method="POST"> <button class="btn btn-danger btn-md" data-id="<%= client._id %>" id="delete-client2">Delete Client</button> </form> <a href="/clients/<%= client._id %>" data-id="<%= client._id %>" class="btn btn-primary btn-md view-client-button">View Client</a> </li> </ul> </div>