Most efficient way to update a bunch of HTML elements with jQuery / JavaScript?

Question

I have a partial view that is updated with info from an AJAX request every time you click on an HTML element. The partial view holds a profile of a person, and has a bunch of different HTML elements (Name, Age, etc.)

I have about 20 different elements that I have to update on click - right now I manually set an ID for each one (e.g. #prof_name, #prof_age, #prof_gender, etc). Needless to say it looks pretty bad and sloppy.

Is there a more efficient way to update a ton of HTML elements?

score 2 · Accepted Answer · edited May 23 '17 at 12:31

2

jQuery templates used to be a thing, but you might also check out this discussion about other options. Backbone is a popular library for this, but as you'll discover there are plenty of alternatives.

In short, it sounds like a template library is going to be a far cleaner solution than manually updating HTML through jQuery.

edited May 23 '17 at 12:31

Community

1
1

answered Nov 12 '15 at 20:25

arthurakay

5,631
8
37
62

score 1 · Answer 2 · answered Nov 12 '15 at 20:30

1

I agree with @Arthur

You can find templates in underscore and mustache

answered Nov 12 '15 at 20:30

Sagi

8,972
3
33
41

score 1 · Answer 3 · answered Nov 12 '15 at 20:31

1

Yes. You can use classes instead of IDs.

Then you can do

$(".class_name").method()

This will apply "method" to all elements that have "class_name" as class.

answered Nov 12 '15 at 20:31

Ivo Pereira

42
3

score 1 · Answer 4 · answered Nov 12 '15 at 20:42

Personaly I would go with {{ mustache }} templates, other than this jQuery offers a .each() function. https://api.jquery.com/each/

Iterate over a jQuery object, executing a function for each matched element.

Example:

<ul>
  <li>Jack Sparrow</li>
  <li>33</li>
  <li>Male</li>
</ul>

function updateDate(arr){
  $( "li" ).each(function( index ) {
    $( this ).html(arry[i]);
  });
}

var el = document.getElementById("clickableElement");
el.addEventListener("click", function(){
  var response = {
    'name': 'Jack Sparrow',
    'age': 34,
    'gender': 'Male'    
  }
  updateDate([response.name, response.age, response.gender]);
});

score 1 · Answer 5 · answered Nov 12 '15 at 20:44

I don't think jquery is the tool you are looking for. This is a job for an observable. You may want to try Knockout JS. http://knockoutjs.com/

When a knockout variable changes the DOM is automatically updated. They also have lots of form methods that you may want to use.

<div data-bind="text: name"></div>

var myController = function()
{
    var self = this;
    this.name = ko.observable();

    $.ajax().done(function(data)
    {
        self.name(data.name);
    });
};

Most efficient way to update a bunch of HTML elements with jQuery / JavaScript?

5 Answers5