Dynamic load of html code

Question

In my Asp.net website I have a repeater which loads dynamically from code-behind. In code outside the repeater I have an "add" button. On click, I want to add the same controls from repeater asynchronously. On click of the "add" button function NewRow() is called:

function NewRow(){
    var guid = jQuery.guid++;
    var panel = $('#MainContent_Panel1');
    var textboxText = $('#MainContent_TextBox');

    panel.after("<span LabelGroup="+i+">Test Text:</span>
                 <span TextGroup="+i+">"+textboxText.val()+"<br /></span>
                 <span LabelGroup="+i+">Test Text : </span>
                 <input  type='text' customID="+guid+"/>
                 <input type='button' Class='Button' ButtonGroup='"+i+"' value='Button Text' /></br>
   ");

   i++;
}

I hate what I am currently doing, because there is so much hardcoded code. Is there any way I can make it more dynamic?

And is there any way to place my newly added row more precisely in dynamic control like repeater?

Modesto · Accepted Answer · 2012-09-23 00:42:05Z

You could try a templating engine like mustache.js, or you can do it by hand like this:

In your HTML, include a script tag, with type="text/html". This will tell the rendering engine to do not try to render the contents. Inside this tag, you will write the template code for each column.

I marked each variable section as $variable:

$i
$textboxText
$guid

<script type="text/html" id="template">

  <span LabelGroup='$i'>Test Text:</span>
  <span TextGroup='$i'>$textboxText<br /></span>
  <span LabelGroup='$i'>Test Text : </span>
  <input  type='text' customID='$guid'/>
  <input type='button' Class='Button' ButtonGroup='$i' value='Button Text' /></br>

</script>

<!-- And here, some testing elements -->

<input type="button" id="New" value="New Row">
<input type="text" id="MainContent_TextBox" value="Some Value">

<div id="MainContent_Panel1"></div>

And then, in your javascript, you only need to get the html contents of the script tag, then replace each $variable with the value to use. Please note that you should use /g when calling .replace, to replace all ocurrencies of your $variable in the template.

i = 1;

$("#New").click(NewRow);

function NewRow(){
    var guid = jQuery.guid++;
    var panel = $('#MainContent_Panel1');
    var textboxText = $('#MainContent_TextBox').val();

    var html = $("#template").html()
        .replace(/\$i/g,i)
        .replace(/\$guid/g,guid)
        .replace(/\$textboxText/g,textboxText);

    panel.append(html);

    i++;
}

Using this approach, you are separating html from js code. Something that will help you in the future if you have to maintain this.

Hope it helps.

Jupaol · Accepted Answer · 2012-09-22 23:19:31Z

0

You could create your tags on the fly like this:

var $span1 = $("<span />").text("your text").attr("TextGroup", i);
...
var $text = $('<input type="text" />').attr("customID", guid);
...
var $button = $('<input type="button" />').addClass("Button").val("Button text").attr("ButtonGroup", i);

And then just add them to the control container

$panel.append($span1).append(...);

Try it live on Fiddler

edited Sep 22, 2012 at 23:19

answered Sep 22, 2012 at 23:10

Jupaol

21.4k9 gold badges71 silver badges101 bronze badges

1 Comment

Timsen Over a year ago

that would work, but there are no way to maybe load User Control dynamicly, and then add it to repeater?

Collectives™ on Stack Overflow

Dynamic load of html code

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related