Yes, there are a lot of front-end frameworks that are available for use in WordPress development, and no I wouldn’t say I have a favorite (though I tend to use Bootstrap or Foundation for most of my work, at this time).

At the time of this writing, I’m currently working on a project in which I’m using Bootstrap 3.3.5 to handle the front-end.

Bootstrap

Part of the project calls for use of the tab functionality in such a way that you can, y’know, tab through several panes of information without actually leaving the page.

If you’ve ever used Bootstrap, you know it’s easy to setup and integrate into a project; however, if you’re looking to introduce more complicated functionality such as having to make asynchronous requests whenever the pages tabs change and then you need to update the DOM accordingly, it can actually be a little frustrating in nature.

Sure, there are some ways in which you can track which tab is active – class names, using hidden fields, etc., but depending on how you’ve architected the front-end and what’s happening with the Ajax response, you may actually end up with needing to do something a little more advanced than that.

Generally speaking, whenever I’m working with JavaScript and I’m trying to handle an asynchronous event (or even synchronous events, for that matter), I want to use exactly that – events.

But when it comes to needing to handle when a tab has been changed to toggle a pane in Bootstrap, what event do we use? again hanks

Tab Events in Bootstrap

To make this example as general as possible (so that it’s hopefully as applicable as possible).

1. Navigation Tabs

I’m assuming that you have your navigation setup in such a way that your markup looks something like this:

In the markup above, I’ve got a simple unordered list of three tabs the first of which is active as denoted by its classname. This will create a list of navigation options:

  1. Home
  2. Questions
  3. Settings

The first of which will be marked as active and the others that will be marked as active when clicked and then will trigger a pane of content to change on the page.

2. Listening For Tab Events

Next, I’ll write some JavaScript that will attach an event handler to each of the anchors contained in the above list items that will read the href attribute of the anchor when it has been clicked.

Ultimately, this is going to be the way that we can respond to the event, but more on that in a moment.

Notice that I’m listening for the shown.bs.tab event. If you’re used to working with JavaScript, then you’re likely familiar with other events like keypress, click, change, and so on.

This event is no different except in the fact that it’s related specifically to Bootstrap. This way, we’re able to setup a listener that will respond whenever this event is fired. You can find more about this particular event on this page in the documentation

Why Are You Reading Attributes?

Note that at this point you may be asking why I’ve opted to read the href attribute versus the text.

In the example above, the text is the same as the href attribute so, really, either would be fine; however, when you’re working with tabs in Bootstrap, the href attribute will correspond to the tab pane that will be displayed when the anchor is clicked.

As such, it’s normally safer to read the value of that attribute than the text; the text can be anything but the href attribute must be tied to the tab pane that will be displayed.

3. Responding To The Event

Really, this is up to you – for some, you may just want to toggle the visibility of another element of change the next of something else.

For others, you may want to do something more complicated like get more involved with the DOM, initiate some type of Ajax request, and so on. Obviously, there’s no way for me to know.

But one of the biggest tips that I can provide is make sure that if you’re going to be doing something complicated or even something that may be called elsewhere in the code is to abstract the functionality into it’s own function.

This will make the code that you’ve written in your JavaScript that much easier to follow and easier to test when needed. Plus, it adheres to DRY.

So for the purposes of rounding out this example, let’s say that you want to want to initiate an Ajax request that will toggle the display of the an element based on the request’s response.

Sure, it’s a little contrived but it demonstrates the point:

In short, an Ajax request is made to a server-side function, acme_should_toggle_element based on the specified anchor as set when its clicked. Then the response is sent back to the client and it will decide whether or not to take care of the toggling the element.

General Solutions For Specific Problems

It can be difficult to write up posts like this because the nuances that exist from project to project, but the goal is to show a general process for how you can go about doing the same using:

  • A given framework
  • A set of pre-defined events
  • WordPress’ built-in Ajax framework
  • And how to tie it all together

No, it’s not necessarily going to how to show you exactly how to do whatever it is that you need to do, but this should provide enough information through the examples to give you a skeleton of what’s needed to achieve what it is that you do need should you face a similar problem.