We Keep Coding

Hiding a button inside a div from code

I have a aspx page and i want to hide the button from cs file based on my some condition
My .aspx looks like :
<asp: Content Id="contentid" >
<% if (!IsRedeemCardFlowOptin)
{ %>
<ul id="ulid" class="abc">
</ul>
<div class="bcd" id ="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="div4" runat="server">
<h4><%= m_AutoRenewInfo.NewPageContent.ArCsidOffHeader%></h4>
<button class="abc bcd cde" title="Button" id="buttondiv"><span>Button</span></button> //Want to hide this button
</div>
</div>
<% } %>
</asp:Content>
Now in the cs file i want to hide the button with id "buttondiv", how can i do that
In my cs file, i try this 2 things but it doesnt work
Control myDiv = (Control)FindControl("buttondiv");
myDiv.Visible = false;
Or
foreach (Control c in contentid.Controls)
{
if (c.ID == "buttondiv")
{
c.Visible = false;
}
}
Can anyone let me know

In order to be used as a server-side control, the button would need to be a server-side control. Add runat="server":
<button class="abc bcd cde" title="Button" id="buttondiv" runat="server">
Then (unless you've broken the designer somehow, it's been a while since I've used Web Forms) you should have an HtmlControl object in your class that you can set without the need to "find" the control:
this.buttondiv.Visible = false;

Kindly keep this in css file.
#buttondiv{
display:none;
}
Or apply style inline like below:
<button class="abc bcd cde" title="Button" id="buttondiv" style="display:none"><span>Button</span></button>

Extract text from a div

I am trying to make a DropDownList using divs and jquery (so that I can style it as I want)...and its working but the problem is I cant get the selected value from the list..
After selection of the option I am copying the selected value into the a div.. and I want to extract this using c# (in .aspx.cs page)... I've tried to do it using string builder and innerHtml(after adding runat="server" to the div).. but it doesn't work ...code is as follows
.aspx Page:
<div class="ddl">
<div id="lowertriangle" class="lowertriangle"></div>
<div id="uppertriangle" class="uppertriangle"></div>
<div id="label" class="labeldiv_dd" runat="server"></div>//***This is the div from which I want to extract value***
<div id="options" class="optionsidv_dd">
<ul id="options_ul">
<li id="0">Select One Option</li>
<li id="1">Option 1</li>
<li id="2">Option 2</li>
<li id="3">Option 3</li>
<li id="4">Option 4</li>
<li id="5">Option 5</li>
</ul>
</div>
</div>
aspx.cs page
Method 1 that I tried:
string sel_text = label.InnerHtml;
display_sel_value.Text = sel_text.ToString();
2nd method:
var sb = new StringBuilder();
label.RenderControl(new HtmlTextWriter(new StringWriter(sb)));
string s = sb.ToString();
Kindly point out my mistakes and help me in this regard(in extracting innerHTML of the div that is).
Thanks

No, putting content in a div won't work.
Your example isn't complete enough to see all that happens, but let's assume that you're in a standard <form>, you're setting the div's inner HTML to a value with Javascript and then you're submitting in the standard way.
Then one way to do what you want is to use a hidden input and setting its value attribute instead of its contents.
<input id="label" class="labeldiv_dd" runat="server" type="hidden">
In the codebehind, the C# can retrieve the value from this control after submitting with the .Value property.

Ok guys thx for your replies..I found a way around the problem...I used HiddenField control to store the selected value using jQuery like so
$("#options_ul li").click(function () {
var text = this.innerHTML;
***$('#<%= selectedvalue.ClientID %>').val(text);***
$("#options_ul li").css("background-color", "#c2c2c2");
$(this).css("background-color", "white");
//var prev = this.id;
//document.getElementById("label").innerHTML = text;
toggleHeight();
});
and then accessed it server side using
selectedvalue.value;
PS: "selectedvalue" is id of the hiddenfield control

Dynamic load of html code

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?

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.

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

making div/htmlgeneric control visible using asp.net

I have a user control with a div like this:
<div runat="server" id="pnlShippingMethods" class="checkoutstep">
<div class="steptitle">
<%=GetLocaleResourceString("CheckoutOnePage.ShippingMethods.Title")%>
<div style="float: right;">
</div>
Date from checkout page one for ship method update panel is <%= DateTime.Now.ToString() %>
</div>
<asp:Panel runat="server" ID="pnlShippingMethodsContent" class="stepcontent">
<nopCommerce:CheckoutShippingMethod ID="ctrlCheckoutShippingMethod" runat="server"
OnePageCheckout="true" />
</asp:Panel>
</div>
I am making in visible = false on page load where this control is placed. Then from another control on the same page I am trying to make it visible like this:
HtmlGenericControl pnlShippingMethods = this.Parent.Parent.Parent.Parent.Parent.FindControl("pnlShippingMethods") as HtmlGenericControl;
pnlShippingMethods.Visible = true;
I am able to make visible/invisible user control CheckoutShippingMethod from other user control but not the div. Please suggest how to make it visible

You can use public method instead of it.
1) Make public method/Property in the custom control where you want to show/hide
panel.
public void ShowPanel(bool isVisible)
{
this.pnlShippingMethods.Visible = isVisible;
}
2) Call this from the other control to show hide panel.
yourCustomrControlObject.ShowPanel(true);

How to use getElementId for tag in an asp:Repeater

I have a div inside an asp:Repeater:
<ItemTemplate>
<div id="myDiv" style="display:none" />
</ItemTemplate>
</asp:Repeater>
<script type="text/javascript">
window.onload = function() {
document.getElementById('myDiv').style.display = 'block';
</script>
This works great except my div elements occur within a repeater which means only the first div is found. Could some please explain to me how to get all the divs in the ItemTemplate?

It is invalid to use the same id more than once on a page. Instead you'll have to use some other means of finding your elements, such as css class. jQuery makes this task easy.
$(".someClass").show();
However, you may not even need to do that. If all you are trying to do is change some styles on a set of elements under a common parent, you can just change the class name of the parent. Consider the following repeater:
<div id="repeaterParent">
<asp:Repeater runat="server">
<ItemTemplate>
<div class="repeaterItemDiv"></div>
</ItemTemplate>
</asp:Repeater>
</div>
Set up your css like this:
#repeaterParent .repeaterItemDiv
{
display: none;
}
#repeaterParent.showDivs .repeaterItemDiv
{
display: block;
}
Then use this JavaScript:
document.getElementById("repeaterParent").className = "showDivs";
Or, this jQuery:
$("#repeaterItemParent").addClass("showDivs");

You can't have multiple elements with the same ID value on the page. Use classes instead:
<ItemTemplate>
<div class="myDiv" style="display:none" />
</ItemTemplate>
Selecting the DIVs:
document.getElementsByClassName('myDiv')
// or
document.querySelectorAll('.myDiv')
// or
$('.myDiv') // jQuery

If you want to do this in javascript, you can do something like the following:
<div id="repeaterParent">
<asp:Repeater runat="server">
<ItemTemplate>
<div id="myDiv" style="display:none" runat="server"/>
</ItemTemplate>
</asp:Repeater>
</div>
<script type="text/javascript">
window.onload = function(){
//get the parent element
var ParentEle=document.getElementById('repeaterParent');
//get all the div tags within parent element
var AllDivInParentEle=ParentEle.getElementsByTagname('DIV');
//loop div elements and do what is required
for(var i=AllDivInParentEle.length-1;i>=0;i--){
AllDivInParentEle[i].style.display = 'block';
}
}
</script>
Using runat="server" for the div will give it its own id.
But if the div does not need to have an id, the javascript method will still work as it relies on the parent elements id.
So you could replace
<div id="myDiv" style="display:none" runat="server"/>
with
<div style="display:none">