Select Page

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);
       });
});
The following two tabs change content below.

Michael Cropper

Founder & Managing Director at Contrado Digital Ltd
Michael has been running Contrado Digital for over 10 years and has over 15 years experience working across the full range of disciplines including IT, Tech, Software Development, Digital Marketing, Analytics, SaaS, Startups, Organisational and Systems Thinking, DevOps, Project Management, Multi-Cloud, Digital and Technology Innovation and always with a business and commercial focus. He has a wealth of experience working with national and multi-national brands in a wide range of industries, across a wide range of specialisms, helping them achieve awesome results. Digital transformation, performance and collaboration are at the heart of everything Michael does.