Home/ Questions/Q 9151397
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T11:47:30+00:00

I’ve got a page that is made up of a container that has several

  • 0

I’ve got a page that is made up of a container that has several component divs in it. There are dozens of these containers in the markup (a suite type and version) and I show/hide the appropriate ones based on selections the user makes via select boxes.

The content of the component divs changes, but the HTML markup is essentially the same.

The component HTML framework is:

<div class="docs basicEdition720">  // 2nd class here is the suite type/version
  <div class="component" title=" /* component title here */ ">
    <p class="componentName"> /*component name here */ </p>
    <p class="componentType"> /*component type here */ </p>
    <p class="links"> /*component links here */ </p>
  </div>
</div>

The point here is that I have the "whizbang" component and it might occur in several different containers and it would have exactly the same content, so long as the version of the container is the same. When the version of the container changes, generally the only change the the whizbang component would be the links.

For example, in the Basic Edition 720 suite type and version, the contents of the whizbang component would be exactly the same as the whizbang component in the Enterprise Edition 720 suite.

Relationships:

Title/Name

The component title and name never change based on version. They concretely correlate directly to each other. If ‘A’, then ‘B’.

Type

The component type occasionally changes based on the VERSION of the component name we’re using. The "bojangle" component might be type "admin" for 7.2.0, but might be type "user" for version 7.0.4. If ‘A’ and ‘1’, then ‘B’. If ‘A’ and ‘2’, then ‘C’.

Sometimes the type concretely correlates to the name, as in, The "gadget" component ALWAYS has the type "reference".

Links

The links always change based on the version of the component.

Objective:

I’d like to only update the links for different component versions ONE time in the document, not the dozen or so I am currently doing.

I’d like the javascript to churn out the containers automatically based on the known suite type and version. I can give it a framework to know which components belong where, such as:

<div class="docs basicEdition720">  // Here we have the basic edition of the
  <div class="comp gadget">         // suite, version 7.2.0. That means I know 
  <div class="comp bojangle">       // we have the gadget, bojangle, widget, 
  <div class="comp widget">         // and gizmo components.
  <div class="comp gizmo">
</div>

<div class="docs basicEdition704">  // Now we have the basic edition suite, 
  <div class="comp gadget">         // version 7.0.4. Knowing that, I know we 
  <div class="comp gizmo">          // only have the gadget, gizmo,and whatsit
  <div class="comp whatsit">        // components.
</div>

<div class="docs enterpriseEdition720">  // Now we have the enterprise edition
  <div class="comp gadget">              // suite, version 7.2.0. Hey, looks 
  <div class="comp bojangle">            // pretty much the same as the basic 
  <div class="comp widget">              // edition of the same version...
  <div class="comp gizmo">
</div>

<div class="docs enterpriseEdition704">  // Ditto for enterprise suite v7.0.4.
  <div class="comp gadget">
  <div class="comp gizmo">
  <div class="comp whatsit">
</div>

/* more suites and versions */

Or if it’s better to handle the versioning all in JS, that’s fine too.

I’ve written so much basic JS that DOES NOT accomplish my objectives and I’m so bad with JS that I hesitate to give you any kind head-start/jsFiddle. Basically, it should use the HTML framework and fill in the gaps based on variables and the suite version it knows it is in.

So far I’ve been using stuff like

var gadgetName = " long name here ";
var bojangleName = " long name here ";
var gadgetLink720 = " version 720 link here";
var bojangleLink720 = " version 720 link here";
var gadgetTitle = " Gadget is a thingie that does...";
var bojangleTitle = " Bojangle is this thing that does...";

$(this).html("<div class=\"component\" title=\"" + myTitle + "\">\
    <p class=\"componentName\">" + myName +"</p>\
    <p class=\"componentType\">Setup Guide</p>\
    <p class=\"links\"><a href=\"\" class=\"html\">HTML</a> <a href=\"\" class=\"pdf\">PDF</a></p>\
  </div>");
});

but have been pretty unsuccessful. NOTE: That’s not the best example of what I’ve accomplished, I’ve actually (at one point) had it reading what the parent div class was to know what version to automatically throw in, etc.

TL;DR

"WTF dude?! This is thing is huge! You are as stupid as you are ugly."

I know, I’m sorry. I don’t know if I can make it more concise than that. The TL;DR is:
"Gee, I have a page that works, but I’m reusing the same content over and over and over. Every time we have a new release, I should just update the dozens of links manually like a good peon, instead of scripting a single-source solution. Ignore me."

🙁

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Handlebars will do this for you. The basic idea is that you can substitute JavaScript variables into the HTML DOM using templates like this:

    <p>{{hello}}</p>

    It also allows for basic looping and logic.

    A fiddle to your question is here: http://jsfiddle.net/Yk43x/

    For more complex templating, including bindings (so your templates update as your JavaScript model does), I’d recommend Knockout. EmberJS, which uses Handlebars, and Google Angular also enable templating (and bindings), as well as a lot more.

    • 0