Question

I need to prepend a huge DIV block, which can be seen at the bottom of the question.

My current idea would be to put inside one

$('#content').prepend();

and break each like up, when I need to insert the content of a variable. That would be all the places which says TMPL_VAR

The code would be quite hard to maintain and read.

Is there a clever way to do this?

<form action="" method="post">
  <input name="anchor" value="<TMPL_VAR ID>" type="hidden">
  <div class="row">
    <div class="cellData">                                                          <TMPL_VAR ID>                                  </div>
    <div class="cellData"> <input name="title" id="<TMPL_VAR ID>_title"      value="<TMPL_VAR TI>" type="text" />                  </div>
    <div class="cellData"> <input name="owner" id="<TMPL_VAR ID>_owner"      value="<TMPL_VAR OW>" type="text" />                  </div>
    <div class="cellData"> <input name="from"  id="<TMPL_VAR ID>_begin_date" value="<TMPL_VAR BD>" type="text" class="datepick" /> </div>
    <div class="cellData"> <input name="to"    id="<TMPL_VAR ID>_end_date"   value="<TMPL_VAR ED>" type="text" class="datepick" /> </div>
    <div class="cellData cellRadios"> <input name="ctype" value="individuel" type="radio" <TMPL_VAR IN>/> Individuel <br> <input name="ctype" value="course" type="radio" <TMPL_VAR CO>/> Course </div>
    <div class="cellEdit"> <a href="javascript:showhide('<TMPL_VAR ID>');">Members</a> <input value="Save" type="submit">                 </div>
  </div>
  <div id="<TMPL_VAR ID>" style="display: none; background-color: #fff8e7;">
    <div class="rowMembers">
      <span>
    <label> Users  </label> &nbsp; <input name="users"  id="<TMPL_VAR ID>_users"  size="35" value="<TMPL_VAR US>" type="text" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <label> Groups </label> &nbsp; <input name="groups" id="<TMPL_VAR ID>_groups" size="35" value="<TMPL_VAR GR>" type="text" />
      </span>
    </div>
  </div>
</form>

Answer 1

I would personally go for jQuery.tmpl() to handle this sort of issue.

This way you could specify a template like so:

   <script type="text-x-jquery/template" id="template"> 
    <form action="" method="post">
      <input name="anchor" value="${id}" type="hidden">
      <div class="row">
        <div class="cellData">                                                          <TMPL_VAR ID>                                  </div>
        <div class="cellData"> <input name="title" id="${id}_title"      value="${ti}" type="text" />                  </div>
        <div class="cellData"> <input name="owner" id="${id}_owner"      value="${ow}" type="text" />                  </div>
        <div class="cellData"> <input name="from"  id="${id}_begin_date" value="${bd}" type="text" class="datepick" /> </div>
        <div class="cellData"> <input name="to"    id="${id}_end_date"   value="${ed}" type="text" class="datepick" /> </div>
        <div class="cellData cellRadios"> <input name="ctype" value="individuel" type="radio" ${in}/> Individuel <br> <input name="ctype" value="course" type="radio" ${co}/> Course </div>
        <div class="cellEdit"> <a href="javascript:showhide('${id}');">Members</a> <input value="Save" type="submit">                 </div>
      </div>
      <div id="${id}" style="display: none; background-color: #fff8e7;">
        <div class="rowMembers">
          <span>
        <label> Users  </label> &nbsp; <input name="users"  id="${id}_users"  size="35" value="${us}" type="text" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <label> Groups </label> &nbsp; <input name="groups" id="${id}_groups" size="35" value="${gr}" type="text" />
          </span>
        </div>
      </div>
    </form>
    </script>

and then with jQuery populate the template with

  $('#template').tmpl(myData).appendTo('#myContainer')

which will insert the populated template into #myContainer given that you have data in the javascript scope myData wich corresponds to the data format specified in the template, and that you have defined a html element with an id of myContainer which is appendable.