Single page with multiple states controlled by URL

Question

tried searching around for this, but having a hard time coming up with the right terms for what I'm looking for.

Basically, I want to be able to display a specific page state (show/hide a div) based on the URL.

I have a single page that has 3 divs, and there is a group of radio buttons that targets the associated div, adds a show/hide class to its container, and also modifies the URL in the address bar to match the current view.

Example:

• localhost:8888/account/orders/history
• localhost:8888/account/orders/recurring
• localhost:8888/account/orders/feedback

The only file that exists is /account/orders/index.php though.

My markup for these buttons is like this:

<div class="sidebar__group">
  <div class="tab__group is--vertical" data-target="#ordersContent">
    <label class="tab" value="history">
      <input type="radio" name="ordersTabs">
      <span><a class="link">Order History</a></span>
    </label>
    <label class="tab" value="recurring">
      <input type="radio" name="ordersTabs">
      <span><a class="link">Recurring Orders</a></span>
    </label>
    <label class="tab" value="feedback">
      <input type="radio" name="ordersTabs">
      <span><a class="link">Rate Vendors</a></span>
    </label>
  </div>
</div>

.tab__group 's data-target attribute is the container div that gets the correct show/hide div based on each radio input's value. The value is what is appended to the URL.

Here's the jQuery that controls it:

$('.tab').on('click', function(e){
  var targetState = $(this).attr('value');
  if (!$(this).children('input').is(':checked')){
      var states = $(this).parents('.tab__group').find('.tab').map(function(){
        return $(this).attr('value');
      }), string = [];

      $.each(states, function(index, value){
          var state = value;
          string.push(state);
      });

      var classes = string.join(' '),
      groupTarget = $(this).closest('.tab__group').data('target');
      $(groupTarget).removeClass(classes);
      $(groupTarget).addClass(targetState);
      e.preventDefault();
      $(this).children('input').prop("checked", true);

      // Add the appropriate state to the current url
      window.history.pushState("string", "Title", targetState);
  }
});

What's strange is that when I'm running this locally, it all works fine. But when running on a live server, I get a "Not Found" error. I'm guessing this is because there's nothing actually at the above URLs. Is there a way to force it to go to the main index.php page?

Answer 1

So the solution was to use mod_rewrite. Here's an example htaccess file:

RewriteEngine On
RewriteCond %{REQUEST_URI} path/
RewriteRule ^path/to/state$ path/to/ [L]

^path/to/state$ is the URL that will be rewritten path/to/ is what it's rewritten to.