creating dynamic list with jquery

Question

let me start by saying that i saw similar questions on forum, however i didn't find one which i managed to understand and apply to my situation.

Having said that, my question is as follows:

I want to build a list which dynamically changes. ( the list shows the names of useres who are currently logged in).

Let's say that the names of the logged in users are stored in an array = ["name1", "name2", "name3" ....] and that the data in the array is the updated data.

the form is:

<div id="users">
    <ul class="list">
      <li>
        <h3 class="name">name1</h3>
      </li>
      <li>
        <h3 class="name">name2</h3>
      </li>
    </ul>
  </div> 

how can i modify the list, using jquery, to display the names form the array and dynamically change by it's content?

many thanks.

Answer 1

You don't really need to use an event. When you get the updated list, call the update method directly.

However, as other users have indicated, using a data-binding library might be better.

start_with.html

<div id="users">
  <ul class="list">
    <li>
      <h3 class="name">name1</h3>
    </li>
    <li>
      <h3 class="name">name2</h3>
    </li>
  </ul>
</div> 

update_list.js

// Note: This method will clear any user selections and may cause other problems since the previous list is deleted and recreated.
function update_list(updated_users) {

  // clear the existing list
  $('#users .list li').remove();

  $.each(updatedUsers, function(index,userName) {
    $('#users .list').append('<li><h3 class="name">'+userName+'</h3></li>')
  });

}

example_1.js

// Get the updated list
var updated_users = ["name1", "name2", "name3"];
// Update it
update_list(updated_users);

after_example_1.html

<div id="users">
  <ul class="list">
    <li><h3 class="name">name1</h3></li>
    <li><h3 class="name">name2</h3></li>
    <li><h3 class="name">name3</h3></li>
  </ul>
</div> 

example_2.js

// Example by AJAX get using a made-up URL
$.get('http://api.example.com/users/active.json', function(data) {
  // What you do with data depends on what the API returns...
  // I'm assuming it returns an array of users.
  // data = ['user1', 'user2', 'user3'];

  update_list(data);
})

after_example_2.html

<div id="users">
  <ul class="list">
    <li><h3 class="name">user1</h3></li>
    <li><h3 class="name">user2</h3></li>
    <li><h3 class="name">user3</h3></li>
  </ul>
</div> 

Note: One drawback to this method is that the old list gets destroyed. This means that if your list has input boxes, for example, their user-entered content would be destroyed on update. If you have state in your list, you'll have to use a different method to update the list if you also want to preserve the state of elements.

Answer 2

Data-binding is traditionally handled best by other libraries, such as Knockoutjs. That being said, there are ways in which you can accomplish similar results in jQuery. One simple one is to merely publish an event when our updated list comes in, and rebuilt our DOM from that.

(function () {

    "use strict";

    var $list = $("#users .list");
    var tmplt = "<li><h3>{{name}}</h3></li>";

    $list.on( "updatedList", updateList );

    function updateList ( event, names ) {
        $list.html($.map( names, function ( name ) {
            return tmplt.replace( /{{name}}/, name );
        }).join(""));
    }

    // Anytime you want to update, pass the new names into a trigger
    $list.trigger( "updatedList", [ [ "Bob", "Richard", "Kendra", "Jake" ] ] );

}());

Demo: http://jsfiddle.net/wDFKC/1/

Please note that while you can do this with jQuery, it is best handled by other tools like Knockoutjs. The reason being is that other tools are a bit smarter, and will make decisions about which parts of the DOM need to be changed.

For instance, if a user is logged in according to our present list, and our updated list, there is no reason why we should be removing their entry, only to add it again. You can use jQuery along side Knockoutjs, so the two work nicely together in an app. You should take a few minutes and read about the benefits of using Observable Arrays.