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.

will you have the ul element in the page already or that also need to be created? — Arun P Johny
– Arun P Johny, Commented Dec 19, 2013 at 15:29
This is a better job for something like knockoutjs than plain jQuery — Jamiec
– Jamiec, Commented Dec 19, 2013 at 15:30
What you're talking about is data-binding, which is typically handled best by another tool like knockoutjs, as Jamiec stated above. — Sampson
– Sampson, Commented Dec 19, 2013 at 15:30
i thought about something like: get the data fron the server every second and when that happens update the list. you say jqurey can't handle such things? — mosh
– mosh, Commented Dec 19, 2013 at 15:36
Sure jQuery can do that, but you'll end up writing loads of code to sync the data with the UI. a databinding lib will do most of that work for you! — Jamiec
– Jamiec, Commented Dec 19, 2013 at 15:50

Nate · Accepted Answer · 2017-05-24 16:05:33Z

10

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.

edited May 24, 2017 at 16:05

answered Dec 19, 2013 at 15:44

Nate

13.3k4 gold badges64 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sibish Over a year ago

var update_list(updated_users) should be function update_list(updated_users) {

Nate Over a year ago

Fixed. Thanks @Sibish!

Sampson · Accepted Answer · 2013-12-19 18:04:19Z

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.

Collectives™ on Stack Overflow

creating dynamic list with jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related