Geeks With Blogs
Brian Schroer Don't Call Me Mort!
Technorati Tags: ,


I'm sure I've "invented" a technique that's been done by many others (and I don't doubt that there's a slicker way to do it), but…

Sometimes I'll want to have an identical chunk of HTML repeated more than once on a web page, for example: a search page with "Search" and "Clear Fields" buttons both above and below the search field inputs. I'd like to just render that HTML once on the server, than "clone" it on the client.

For my site, I established a convention where the "clone source" div has a class name with the prefix "jsCloneSource_", and the "clone target" div(s) include a class name with the prefix "jsCloneTarget_" (and both class names have the same suffix).

Here's what my search page looks like. Lines 3-5 describe a div with the class name "jsCloneSource_SearchButtons" where the buttons child view is rendered. Line 11 contains an empty div with the class name "jsCloneTarget_SearchButtons":

   1:      <% Html.BeginForm(MVC.Widget.Search()); %>
   3:      <div class="jsCloneSource_SearchButtons buttonsAboveForm">
   4:          <% Html.RenderAction(MVC.Search.SearchFormButtons());%>
   5:      </div>
   7:      <fieldset class="searchFormFieldset">
   8:          <!-- (search Labels and TextBoxes) -->
   9:      </fieldset>
  11:      <div class="jsCloneTarget_SearchButtons buttonsBelowForm"></div>
  13:      <% Html.EndForm(); %>

The JavaScript file referenced in my site's master page looks for divs with a "jsCloneSource_" prefix. For each one it finds, it finds divs with the "jsCloneTarget_" prefix and the same suffix (in this example, "_SearchButtons") and replaces the target div HTML with a copy of the source div HTML:

   1:  $(document).ready(function () {
   2:      $("div[class*='jsCloneSource_']").each(function () {
   3:          var html = $(this).html();
   4:          var targetCssClass = getCloneTargetClass($(this).attr("class"));
   5:          if (targetCssClass) {
   6:              $("div." + targetCssClass).html(html);
   7:          }
   8:      });
   9:  });
  11:  function getCloneTargetClass(sourceClasses) {
  12:      var classNames = sourceClasses.split(" ");
  14:      for (var i = 0; i < classNames.length; i++) {
  15:          var className = classNames[i];
  16:          if (className.substr(0, 14) === "jsCloneSource_") {
  17:              return className.replace("jsCloneSource_", "jsCloneTarget_");
  18:          }
  19:      }
  21:      return null;   
  22:  }

It doesn't save a lot of server processing in this example, but I think it could greatly simplify things in scenarios like a grid where the same dropdown list is displayed in each row.

If I've reinvented the wheel, please let me know. I love to write code, but I also love to delete it when there's an existing tested alternative.

Posted on Saturday, June 26, 2010 9:42 AM | Back to top

Comments on this post: "Cloning" divs with jQuery

# re: "Cloning" divs with jQuery
Requesting Gravatar...
We use to do a similar type of thing with our AJAX calls. We pass back JSON, run it through the template and then insert it into the DOM.
Left by Mark Borcherding on Jun 28, 2010 9:47 AM

# re: "Cloning" divs with jQuery
Requesting Gravatar...
We used for something similar with our AJAX stuff. Return the JSON, run it through the template, and add it to the DOM.
Left by Mark Borcherding on Jun 28, 2010 11:31 AM

Your comment:
 (will show your gravatar)

Copyright © Brian Schroer | Powered by: