Repeat block using javascript

Too many characters in character literal

[Mahati]

---

System: The following message was cut out of thread at: http://www.webmasterworld.com/javascript/4169757.htm [webmasterworld.com] by fotiman - 11:25 am on Dec 7, 2010 (utc -4)

---

Hi Fotiman,
I'm facing a similar problem. It'd be of great help if you could take time out and look into it once.

I want to repeat a block of code in html,

Here is the function in javascript that i wrote :

function createcontrols(div) {
var ediv=document.getElementById(div);
var temp=ediv.innerhtml;
var newdiv = document.createElement('div');
newdiv.innerhtml =temp;
ediv.parentNode.insertBefore(newdiv, ediv.nextSibling);

}

And here's the html code :
<asp:Button ID="btnAddTaxDoc" runat="server" onclick="createcontrols('item')" Text="+"/>
<br />
<div id="item">
<a onclick="Toggle(this)" style="cursor:pointer;"><img src="plus.gif" alt="Expand/Collapse" />
<asp:Label ID="lblTaxDocument" runat="server" Text="Tax Document"></asp:Label></a>
<table class="style5" id="tbltax">
<td>
<asp:Label ID="lblTaxDocName" runat="server" Text="Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtTaxDocName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblTaxDocDate" runat="server" Text="Date"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtTaxDocDate" runat="server"></asp:TextBox>
</td>
</tr> </table>
</div>


P.S : I have written function for Toggle(node)

The error i am getting when i execute this is "Too many characters in character literal".

Could you please direct me where i'm going wrong?

Thanks in advance.

[Fotiman]

Welcome to WebmasterWorld!

The problem is that the onclick event handler refers to the server side onclick event, not the client side JavaScript onclick event. To add the client side onclick event handler, you need to add it to your code-behind:

btnAddTaxDoc.Attributes.Add("onclick", "createcontrols('item');");

[Mahati]

Hi Fortiman,
Thanks much for the help. Here's something else:

I cant seem to get a control display permanently when its being added to a container - this happens when i use javascript to load the control.

function createcontrols(div) {
var re = new RegExp(div);
var doc = document.getElementsByTagName('div');

for (j = 0; i < doc.length; j++) {
var eleId = doc[j].id;
var match = re.exec(eleId);
if (match != null) {
var ediv = document.getElementById(eleId);
break;
}
}
var newdiv = document.createElement("div");
newdiv.innerHTML = ediv.innerHTML;
ediv.parentNode.insertBefore(newdiv, ediv.nextSibling);
}

Here's the html code :

<asp:Button ID="btnAddTaxDoc" runat="server" Text="+" OnClientClick="createcontrols('item');"/>

<a onclick="Toggle(this)" style="cursor:pointer;"><asp:Label ID="lblTaxDocument" runat="server" Text="Tax Document"></asp:Label></a>
<br />
<div id="item">
<a onclick="Toggle(this)" style="cursor:pointer;"><img src="plus.gif" alt="Expand/Collapse" /></a><div style="display:none";>

<table class="style5" id="tbltax">
<tr>
<td>
<asp:Label ID="lblTaxDocName" runat="server" Text="Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtTaxDocName" runat="server"></asp:TextBox>
</td>
</tr>

</div>
</div>

The problem here is, when i load this page and click on the button it is displaying the set of controls dynamically, but vanishing immediately as the page completely renders.
Would be great if you could help me as soon as you can :)

P.S : I'm just giving you a part of the html code, there are some more controls to display apart from a textbox.

[Fotiman]

Can you post the actual HTML output (instead of the ASP code)? In other words, do view > source on the page and post the content here. I suspect that what is happening is that your button is submitting a form to the server. Do you need the runat="server" for this button? That is, why does this button need to be a server control if you're only using it for client side functionality?

[Mahati]

Hi,
This is just a part of a big solution. I do need the button on the server side to fill in some values to the controls.
Here's the html output :

<script type="text/javascript">
function Expand(node) {
// Change the image (if there is an image)
if (node.childNodes.length > 0) {
if (node.firstChild.tagName == "IMG") {
node.firstChild.src = "minus.gif";
}
}
node.nextSibling.style.display = '';
}

function Collapse(node) {
// Change the image (if there is an image)
if (node.childNodes.length > 0) {
if (node.firstChild.tagName == "IMG") {
node.firstChild.src = "plus.gif";
}
}
node.nextSibling.style.display = 'none';
}

function Toggle(node) {
// Unfold the branch if it isn't visible
if (node.nextSibling.style.display == 'none') {
Expand(node);
}
// Collapse the branch if it IS visible
else {
Collapse(node);
}
//node.childNodes[1].nodeValue = (node.nextSibling.style.display == 'none') ? 'More...' : 'Less...';
}

function createcontrols(div) {
var re = new RegExp(div);
var doc = document.getElementsByTagName('div');

for (j = 0; j < doc.length; j++) {
var eleId = doc[j].id;

var match = re.exec(eleId);
if (match != null) {
var ediv = document.getElementById(eleId);

break;
}

}
var newdiv = document.createElement("div");
newdiv.innerHTML = ediv.innerHTML;
ediv.parentNode.insertBefore(newdiv, ediv.nextSibling);
}
</script>
</head>
<br />
<div id="MainContent_test11_Panel1" style="overflow:scroll;">

<input type="submit" name="ctl00$MainContent$test11$btnAddTaxDoc" value="+" onclick="createcontrols(&#39;item&#39;);" id="MainContent_test11_btnAddTaxDoc" />
<a onclick="Toggle(this)" style="cursor:pointer;">
<span id="MainContent_test11_lblTaxDocument">Tax Document</span>
</a>
<br />
<!-- <input name="ctl00$MainContent$test11$temp" type="hidden" id="MainContent_test11_temp" /> -->
<div id="item" >
<a onclick="Toggle(this)" style="cursor:pointer;">
<img src="plus.gif" alt="Expand/Collapse" />
</a>
<div ;="" style="display:none">
<table id="tbltax" class="style5">
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>
<span id="MainContent_test11_lblTaxDocName">Name</span>
</td>
<td>
<input name="ctl00$MainContent$test11$txtTaxDocName" type="text" value="," id="MainContent_test11_txtTaxDocName" />
</td>
</tr>
<tr>
<td>
<span id="MainContent_test11_lblTaxType">Tax Type</span>
</td>
<td>
<input name="ctl00$MainContent$test11$txtTaxType" type="text" value="," id="MainContent_test11_txtTaxType" />
</td>
</tr>
<tr>
<td>
<span id="MainContent_test11_lblEnergyTaxDoc">Energy Tax Document</span>
</td>
<td>
<input type="submit" name="ctl00$MainContent$test11$btnEnergyTaxDoc" value="Attach Tax Document" id="MainContent_test11_btnEnergyTaxDoc" />
</td>
</tr>
<tr>
<td>
<span id="MainContent_test11_lblTaxDocDate">Date</span>
</td>
<td>
<input name="ctl00$MainContent$test11$txtTaxDocDate" type="text" value="," id="MainContent_test11_txtTaxDocDate" />
</td>
</tr>
<tr>
<td>
<span id="MainContent_test11_blTaxDocExpiryDate">Expiry Date</span>
</td>
<td>
<input name="ctl00$MainContent$test11$txtTaxDocExpiryDate" type="text" value="," id="MainContent_test11_txtTaxDocExpiryDate" />
</td>
</tr>
<tr>
<td>
<span id="MainContent_test11_lblStatus">Status</span>
</td>
<td>
<input name="ctl00$MainContent$test11$txtStatus" type="text" value="," id="MainContent_test11_txtStatus" />
</td>
</tr>
<tr>
<td>
<span id="MainContent_test11_lblTaxDocRemark">Remark</span>
</td>
<td>
<input name="ctl00$MainContent$test11$txtTaxDocRemark" type="text" value="," id="MainContent_test11_txtTaxDocRemark" />
</td>
</tr>


</table>
</div>
</div>

<br />

</div>

[Fotiman]

<input type="submit" name="ctl00$MainContent$test11$btnAddTaxDoc" value="+" onclick="createcontrols(&#39;item&#39;" id="MainContent_test11_btnAddTaxDoc" />

Ok, so as expected, this is creating a submit button. If you don't want to submit the form with this button click, you might be able to do:

onclick="createcontrols(...);return false;"

To prevent the control from performing its default behavior. But again, that defeats the purpose of having a server side control.