Develop Reference

Create button OnClientClick asp net

I'm creating button from code c#:
Button btnAddCalculation = new Button();
btnAddCalculation.ID = "btnAddCalculation";
btnAddCalculation.Text = "Add count";
btnAddCalculation.SkinID = "middleButton";
btnAddCalculation.Visible = true;
string sPath = String.Format(
"WindowCalculationArenda.aspx?{0}={1}&TempGuid={2}&IdDocument={3}",
SessionViewstateConstants.CalculationType,
CalcType.New,
Guid.NewGuid(),
oEditedDocument.Id.ToString()
);
// btnAddCalculation.Attributes.Add("onclick", #"window.open('InformationAboutAddAddr.aspx', '_blank', 'location=yes,height=500,width=450,scrollbars=yes,status=yes');");
btnAddCalculation.Click += new EventHandler(btnClick_cl);
btnAddCalculation.OnClientClick = clsCommonHelper.sGetWindowOpen(sPath, 1100, 500) + "return false;";
public static string sGetWindowOpen(string sLink, int iWidth, int iHeight)
{
return "javascript:setTimeout(function(){ WindowOpen('" + sLink + "', " + iWidth + ", " + iHeight + "); }, 100); ";
}
but in the client side the function OnClientClick does not work, when I click
nothing happens. What Did I do wrong???
Generated HTML:
<input type="submit" name="ctl00$ctl00$Main$EditorMain$tabTabContainer$ctl00$Attr‌​433$btnAddCalculatio‌​n"
value="Add count"
id="ctl00_ctl00_Main_EditorMain_tabTabContainer_ctl00_Attr43‌​3_btnAddCalculation"
disabled="disabled" class="blue_button" />

For Button being disabled
If the dynamic button is added to a container that is itself disabled, then this dynamic button will also be disabled. To make this sure that button is added properly, use a new container in HTML (e.g. <asp:PlaceHolder>) and add button to that container from codebehind.
Also good to check following :-
When Creating the new button, use CausesValidation = false. This will avoid any RequiredFieldValidator getting fired when this button is clicked. RequiredFieldValidator also stops button from being clicked.
e.g.
Button btnAddCalculation = new Button();
btnAddCalculation.ID = "btnAddCalculation";
btnAddCalculation.Text = "Add count";
btnAddCalculation.SkinID = "middleButton";
btnAddCalculation.Visible = true;
btnAddCalculation.Enabled = true;
btnAddCalculation.CausesValidation = false;

Fix this:
Button btnAddCalculation = new Button();
btnAddCalculation.ID = "btnAddCalculation";
btnAddCalculation.Text = "Add count";
btnAddCalculation.SkinID = "middleButton";
btnAddCalculation.Visible = true;
btnAddCalculation.Enabled = true;
string sPath = String.Format(
"WindowCalculationArenda.aspx?{0}={1}&TempGuid={2}&IdDocument={3}",
SessionViewstateConstants.CalculationType,
CalcType.New,
Guid.NewGuid(),
oEditedDocument.Id.ToString()
);
// btnAddCalculation.Attributes.Add("onclick", #"window.open('InformationAboutAddAddr.aspx', '_blank', 'location=yes,height=500,width=450,scrollbars=yes,status=yes');");
btnAddCalculation.Click += new EventHandler(btnClick_cl);
btnAddCalculation.OnClientClick = clsCommonHelper.sGetWindowOpen(sPath, 1100, 500) + "return false;";
public static string sGetWindowOpen(string sLink, int iWidth, int iHeight)
{
return "javascript:setTimeout(function(){ WindowOpen('" + sLink + "', " + iWidth + ", " + iHeight + "); }, 100); ";
}
By default the asp.net server will create the button as disabled unless you specify explicitly otherwise.

The ASP.NET code you provided looks ok; so I suspect the problem is related to a script that is run on the clientside. Maybe the submit-button is disabled because the form contents are not valid yet. In this case your button might be disabled, depending on the selector that is used to identify the submit-button.
To avoid this, change the behavior of the button so that it is rendered as an input of type button instead of submit. You can use the UseSubmitBehavior-property to achieve this:
btnAddCalculation.UseSubmitBehavior = false;

How do I make keep these values from rewriting into the HTML?

I have a small piece of code that is writing some values into a textarea inside a form. The write whenever I click a button. However if I click the button more than once they will write over and over. I need to be able to click the button multiple times (for example if the user changes a value) and have the values that I am writing simply refresh rather than repeat. Here is what I have...
var endwallPanelLengths = [totalHeightInches];
var i = 0;
while (endwallPanelLengths[i] > eaveInches)
{
endwallPanelLengths.push(endwallPanelLengths[i] - peakHeightDecrease);
document.getElementById("test83").value += "4 - " + endwallPanelLengths[i] + "\n";
i++;
}
When I click the button the first time the values are correct however they write again after everytome i click it?

In this line:
document.getElementById("test83").value += "4 - " + endwallPanelLengths[i] + "\n";
you're appending a value to test83. Presumably (since I can't see your html!!!) you just need to remove the + from the +=.
EDIT: in case you want to append all of the values in your loop, and nothing else, simply clear the value before you enter your loop and leave the +=
document.getElementById("test83").value = "";
var endwallPanelLengths = [totalHeightInches];
......

I think you want to do the whole iteration when the user change a value. Then you just need to reset the value of the textarea to empty before the loop. Something like this:
var endwallPanelLengths = [totalHeightInches];
var i = 0;
document.getElementById("test83").value = ''; //Reset the value
while (endwallPanelLengths[i] > eaveInches) {
endwallPanelLengths.push(endwallPanelLengths[i] - peakHeightDecrease);
document.getElementById("test83").value += "4 - " + endwallPanelLengths[i] + "\n";
i++;
}
I have worked out a demo page. Hope that is what you are after.

Try this:
var endwallPanelLengths = [totalHeightInches];
var i = 0;
document.getElementById("test83").value = '';
while (endwallPanelLengths[i] > eaveInches)
{
endwallPanelLengths.push(endwallPanelLengths[i] - peakHeightDecrease);
document.getElementById("test83").value += "4 - " + endwallPanelLengths[i] + "\n";
i++;
}
I'm assuming that all the code is executed eacht time you click the button, am I right ?

you need to implement a clickEventhandler that checks whether or not your texts exists.....

Getting the ID in of an ASP drop down list from client side

What I'm trying to do is get one of my drop down list to change its contents whenever the selected item in another one cahnges. I have this code in my aspx file:
function ModifyDDLItems(id1, id2)
{
var ddlcontrolShown = document.getElementById(id1);
var ddlcontrolHidden = document.getElementById(id2);
if (ddlcontrolShown.options[ddlcontrolShown.selectedIndex].value == "DD1")
{
//Get number of items of hidden ddl
var length = ddlcontrolHidden.options.length;
//Clear items of shown ddl
ddlcontrolShown.options.length = 0;
//Add itmems of hidden ddl to shown ddl
for (i = 0; i < length; i++)
{
ddlcontrolShown.options.add
var newoption = document.createElement("option")
newoption.text = ddlcontrolHidden.options[i].text;
newoption.value = ddlcontrolHidden.options[i].text.value;
}
}
}
Now, i give it the front end ID's thru this:
protected void SetDD1ConfItems(GridViewRow gvRow, DataSet BaseConfItems)
{
DataView dvConfType = new DataView(BaseConfItems.Tables[0]);
DataSet dsTemp = BaseConfItems.Clone();
DropDownList ddlConfType2 = (DropDownList)form1.FindControl("ddlConfType2");
DropDownList ddlBA = (DropDownList)gvRow.FindControl("ddlBA");
DropDownList ddlConfType = (DropDownList)gvRow.FindControl("ddlConfType");
dvConfType.RowFilter = "ref_code = 'FAX' or ref_code = 'EEX' or ref_code = 'EPD'";
dsTemp.Tables.Clear();
dsTemp.Tables.Add(dvConfType.ToTable());
ddlConfType2.DataSource = dsTemp;
ddlConfType2.DataBind();
//ddlBA.Attributes["onchange"] = "function GetDDLD(" + ddlConfType.ClientID + ", " + ddlConfType2.ClientID + ") {ModifyDDLItems(id1, id2);}";
ddlBA.Attributes.Add("onchange", "ModifyDDLItems('" + ddlConfType.ClientID + "', '" + ddlConfType2.ClientID + "')");
}
When I run it, VS keeps on telling me that id1 and id2 are both null, it seems the id's aren't passed to the client properly.

I think you have code wrongly, the first mistake i found at a glance is,
You cannot find the controls inside gridview by using
gvRow.FindControl("ddlBA");
There may be multiple rows in GridView, so you have to find your controls in each Row as all of them will have different ClientIDs. First to try to replace the below code
gvRow.Rows[RowIndex].FindControl("ControlID");
ALso, it should be written in the some kind of loop in order to find the RowIndex value of the Grid.
Describe your exact requirement in brief. So, that i can help you in writing the proper code.

How to change the title tag on a html page, depending on Div?

I have this site HERE and what it dose is tell you the size of your screen and the size of your window.
When you adjust your window size the numbers change and is then displayed on the page.
What I want to happen is when you do this, the title also displays the figure.
Similar to this HERE. As you change the number so does the title.
I am not sure how to do this?
Any help would be much appreciated :)
Thank you

Here is the code which changes the title, taken from the site which you provided :)
function invChange() {
changeField = invField;
var num = rate ? parseFloat(invField.inner.value) : null;
var prod = num ? round(rate * num, 4) : '';
with(numField) {
val(prod);
gauge();
if (prod) {
pulse();
doc.title = prod + ' ' + cur + ' · Preev'
}
}
}
function numChange() {
changeField = numField;
var num = rate ? parseFloat(numField.inner.value) : null;
var prod = num ? round(num / rate, 4) : '';
with(invField) {
val(prod);
gauge();
if (rate) {
pulse();
doc.title = prod + ' BTC · Preev'
}
}
}
Here doc is variable which holds document (var doc = document).
If you want to have look at the complete javascript file then check this fiddle

You just have to look at the source to see how it's done:
document.title = 'whatever'

You need to update this value using the DOM.
In JavaScript you can get the value of this by doing the following
document.title="some text";
In JQuery
$('title').text('some text');

document.title = 'whatever';
document.getElementsByTagName('title')[0].text = 'whatever';
document.getElementsByTagName('title')[0].innerHTML = 'whatever';
$('title').text('whatever'); //jQuery

How to get the value of id of innerHTML?

I have created a html like this:
<body onload = callAlert();loaded()>
<ul id="thelist">
<div id = "lst"></div>
</ul>
</div>
</body>
The callAlert() is here:
function callAlert()
{
listRows = prompt("how many list row you want??");
var listText = "List Number";
for(var i = 0;i < listRows; i++)
{
if(i%2==0)
{
listText = listText +i+'<p style="background-color:#EEEEEE" id = "listNum' + i + '" onclick = itemclicked(id)>';
}
else
{
listText = listText + i+ '<p id = "listNum' + i + '" onclick = itemclicked(id)>';
}
listText = listText + i;
//document.getElementById("lst").innerHTML = listText+i+'5';
}
document.getElementById("lst").innerHTML = listText+i;
}
Inside callAlert(), I have created id runtime inside the <p> tag and at last of for loop, I have set the paragraph like this. document.getElementById("lst").innerHTML = listText+i;
Now I am confuse when listItem is clicked then how to access the value of the selected item.
I am using this:
function itemclicked(id)
{
alert("clicked at :"+id);
var pElement = document.getElementById(id).value;
alert("value of this is: "+pElement);
}
But getting value as undefined.
Any help would be grateful.

try onclick = itemclicked(this.id) instead of onclick = 'itemclicked(id)'

Dude, you should really work on you CodingStyle. Also, write simple, clean code.
First, the html-code should simply look like this:
<body onload="callAlert();loaded();">
<ul id="thelist"></ul>
</body>
No div or anything like this. ul and ol shall be used in combination with li only.
Also, you should always close the html-tags in the right order. Otherwise, like in your examle, you have different nubers of opening and closing-tags. (the closing div in the 5th line of your html-example doesn't refer to a opening div-tag)...
And here comes the fixed code:
<script type="text/javascript">
function callAlert() {
var rows = prompt('Please type in the number of required rows');
var listCode = '';
for (var i = 0; i < rows; i++) {
var listID = 'list_' + i.toString();
if (i % 2 === 0) {
listCode += '<li style="background-color:#EEEEEE" id="' + listID + '" onclick="itemClicked(this.id);">listItem# ' + i + '</li>';
}
else {
listCode += '<li id="' + listID + '" onclick="itemClicked(this.id);">listItem# ' + i + '</li>';
}
}
document.getElementById('thelist').innerHTML = listCode;
}
function itemClicked(id) {
var pElement = document.getElementById(id).innerHTML;
alert("Clicked: " + id + '\nValue: ' + pElement);
}
</script>
You can watch a working sample in this fiddle.
The problems were:
You have to commit the id of the clicked item using this.id like #Varada already mentioned.
Before that, you have to build a working id, parsing numbers to strings using .toString()
You really did write kind of messy code. What was supposed to result wasn't a list, it was various div-containers wrapped inside a ul-tag. Oh my.
BTW: Never ever check if sth. is 0 using the ==-operator. Better always use the ===-operator. Read about the problem here
BTW++: I don't know what value you wanted to read in your itemClicked()-function. I didn't test if it would read the innerHTML but generally, you can only read information from where information was written to before. In this sample, value should be empty i guess..
Hope i didn't forget about anything. The Code works right now as you can see. If you've got any further questions, just ask.
Cheers!

You can pass only the var i and search the id after like this:
Your p constructor dymanic with passing only i
<p id = "listNum' + i + '" onclick = itemclicked(' + i + ')>
function
function itemclicked(id)
{
id='listNum'+i;
alert("clicked at :"+id);
var pElement = document.getElementById(id).value;
alert("value of this is: "+pElement);
}
is what you want?

I am not sure but shouldn't the onclick function be wrapped with double quotes like so:
You have this
onclick = itemclicked(id)>'
And it should be this
onclick = "itemclicked(id)">'
You have to modify your itemclicked function to retrieve the "value" of your p element.
function itemclicked( id ) {
alert( "clicked at :" + id );
var el = document.getElementById( id );
// depending on the browser one of these will work
var pElement = el.contentText || el.innerText;
alert( "value of this is: " + pElement );
}
demo here