Creating a generic AJAX tab/replace function

Recently, when starting out on new projects I’ve been working to ensure that the code I write is more generic so that it is reusable throughout both the initial build of the project as well as in the future.

It’s easy, especially when writing JavaScript/jQuery, to write code for a section that targets specific class or id selectors that then makes it more difficult to use this code elsewhere in your website.

Previously I’ve created a generic show/hide function for features such as drop-down menus. This time I wanted to tackle replacement content, such as that you might see in a tabbed section.

Use-case

When rebuilding the homepage for a long-term client one of our goals was to improve the loading speed of the website, and reduce the overall page weight.

The page included third-party widgets used to display Instagram and Youtube playlists that could not be replaced or edited to make them less impactful to the speed of the website. Removing them also wasn’t an option.

But we could look at delaying their inclusion on the page thus reducing their impact on a number of speed metrics.

To do this we would place the widgets within a tabbed section. Traditionally this may mean that the widgets are still present in the code and so some, if not all, assets would be loaded even though they’re not in view. To ensure this isn’t the case we would instead utilise AJAX loading to request the content only on user selection; ensuring the page is lightweight on initial load as the widget would not be anywhere in the code.

Building a generic script to replace the tabbed content

Here is our example code. When the relevant tab is clicked the jQuery makes the request tot he server and new content replaces the existing tabbed content.

See the Pen Replace Tabs by Kean Richmond (@keanr) on CodePen.

As you’ll see we target the data-replace attribute which can be placed on an individual <a> element or on a parent container as shown in the example.

Note: In this instance we’ve used jQuery, but there is nothing here that could not be easily achieved with vanilla JavaScript.

The ideal solution?

This worked great, but in our specific case there was an issue. With tabbed content it’s common for new users to click around the tabs to view the content present, before returning to what they might actually wish to view.

While any request back to the server could appear slow to some users, this was especially obvious with the widgets where, after being added to the page, would subsequently request a number of assets from a third party. This results in a much more obvious delay when clicking around the various tabs.

What we needed was a solution where new content would be appended to the page, and for this to be made visible on subsequent views rather than reloading the content each time.

See the Pen Append Tabs by Kean Richmond (@keanr) on CodePen.

Note: You may need to open dev tools to confirm that the newly added content remains in the code, rather than replaced as occurs on the example furth up this article

While the original replace only function allows PHP to be used to determine the current state of the tabs (as these can be replaced alongside the content), with the append function we’re having to update the current state of the tabs as well as the content that is shown within our JavaScript function.

Though this potentially makes the function somewhat less generic it’s only by finding other cases where we might want to use such a function that we can determine what is specific to the implementation we’ve tested and what changes are necessary to make things more versatile.

The right mindset

It can be easy at the start of a project to code up something quick for a particular purpose. But as the project grows it’s likely that you’ll find yourself writing similar code that already exists. You could revisit the original code but there’s always the concern you may cause something to break that you hadn’t accounted for.

Instead starting from a more generic mindset at the start of project helps ensure that the code you’re writing is more versatile, not just on this project but potentially future projects too.