This can be a fun one to deal with, particularly when working with scalable web applications. To keep things simple, remember that according to the W3C standards, the ID attribute on any element on a page should always be unique. This enables you to refer to this specific element whenever you want which is handy. This is perfect on simple web applications as you can just name everything as you wish. When working with scalable web applications, this becomes a little more challenging. Let’s keep things simple and use Twitter as an example. At any one point in time when a user searches for “Show me Twitter Accounts Matching ‘Michael'” for example. This will return an unknown number of results and the front end will loop through each of these accordingly. As part of this process, you are going to want to add relevant actions to each of the user accounts, such as Follow Account or Unfollow Account etc. Most scalable web applications these days will use jQuery to perform these kinds of actions on the front end which is perfect as within jQuery you can update the page content when a user does something such as clicking a button. And here’s the snag, the way all of this works is on the ID attribute for the relevant element.
So we need to implement a bit of clever technology to deal with unknown IDs to firstly identify the relevant ID that has been clicked, for example, and then use that ID to update something based on what the user has done. Let’s break this code down and provide a working example for how to do this;
$(document).ready(function () {
//This line of code is telling jQuery to handle any actions when a user Clicks on an element
//that has an ID attribute which starts with 'api-follow-button', i.e. 'api-follow-button-user-account-id-123'
$(document).on('click', '[id^="api-follow-button"]', function followButton(e) {
//This line of code prevents the element performing its default action, such as a link being clicked for example
e.preventDefault();
//This line below ensures that you can then use the ID selector to update the relevant part of the HTML as needed
//This code is identifying the full ID attribute for the element that has been clicked
var buttonID = $(this).attr("id");
var buttonText = "Unfollow";
var currentState = "Following";
//Update Links
//This line of code is allowing you to use a Variable in JavaScript to update the element using jQuery
$("button[id=" + buttonID + "]")
.html(buttonText)
.attr("currentState", currentState);
});
});
Michael Cropper