Develop Reference

Dropdown list selectedindex is not calling when we reset that DropDown to "select" and then after that select previously what we selected

I have a dropdown box which is filled by dataset at code behind and I have setted that Property as AutoPostback = true..
based on selected value I am again filling another dropdown box.
It is working well but when I reset to first Dropdown box to 0th index("Select") and again I can select the same dropdown value. In this case it is not calling PostBack.
Sample code:
<asp:DropDownList ID="ddlHeaderField" runat="server" Width="160px" OnSelectedIndexChanged="ddlHeaderField_SelectedIndexChanged" AutoPostBack="True">
</asp:DropDownList>
<asp:ImageButton runat="server" ID="btnAdd" ImageUrl="~/Images/add_btn.png" CssClass="ImageButton" OnClientClick="btnAdd_Click();return false;" />
JavaScript:
function btnAdd_Click() {
var ddlDocType =document.getElementById(ClientID + "ddlDocumentType");
var ddlHeader = document.getElementById(ClientID + "ddlHeaderField");
var ddlOperator = document.getElementById(ClientID + "ddlOperator");
AddRow(tbl, ddlDocType, ddlHeader, ddlOperator);
}
function AddRow(tbl, ddlDocType, ddlHeader, ddlOperator) {
//Here I am creating table and then reset to default values(like Select in Dropdown)
ddlHeader.selectedIndex = 0;
ddlOperator.selectedIndex = 0;
}
Now first I am selected index as 2 and its get postback and added a row, after that I am reset those values and now again if I select index 2 then the postback is not working.
Other than that index then I will postback.

This is because javascript is client side. You are changing the selected index back to your defaults only on the client side as you're doing it in you're function. Therefore, when you change the value again to 2, the 'OnSelectedIndexIndexChanged' method won't be fired, as the server doesn't believe it has been changed.
One option would be to change the values back to their defaults in the OnSelectedIndexChanged event in the code behind.

I have solved my problem.
I just add __doPostBack event in javaScript to call the SelectedIndexItemChanged then it is working fine....
__doPostBack("ctl00_TopPlace_ddlHeaderField", "ddlHeaderFieldchange");
Thanks

Update input type=text value or textbox control resize event

I have been having trouble updating the value for my input type=text or the texbox control text value with the jquery $(window).resize(function(){}); I know that the event fires because when i resize the browser an alert will appear. I also am using the functionality for something else.
It currently looks like this:
$(window).resize(function(){
if($(window).width()>1080){
var innerwidth = $(window).width()-170;
$("#div1").width(innerwidth);
}
I want to add this:
$(window).resize(function(){
if($(window).height()>500){
var innerheight = $(window).height();
$('input.hiddentest').val(innerheight);
}
I know that the issue lies with:
$('input.hiddentest').val(innerheight);
I have also tried this:
$('#texttest.ClientID').text(innerheight);
This is the input and the textbox below that I am using(note that the type used to be hidden, but i dont think that makes an issue and I wanted it to be visible for debugging purposes)
<input id="hiddentest" type="text" visible="true" name="hiddentest" onclick="test();" runat="server" value="1000" />
<asp:TextBox id="texttest" Visible="true" runat="server" Text="1000" />
Overall I have been looking for a way to dynamically update the values as the page resizes with the size of the page. My geuss is that i am not using the right thing to identify the id's. Thanks for taking the time to look at this and for any replies.
P.S. I am also open to the idea of using a javascript function instead but i can't even seem to get the function to fire for the resize event so it would require more help.
This is what i have so far:
window.onresize=Test();
function Test(){
var hdnfld= document.getElementById("texttest");
var testing = window.innerWidth;
alert(testing);
hdnfld.text= testing;
}

Use just ID of elements without dots (that actually represent the classes you don't have).
So use
$('#hiddentest').val(innerheight)
and
$('#texttest').val(innerheight)
Note that asp:TextBox renders as inptut type="text" so you still have to use .val() on it, not .text()

Hidden text box id is "hiddentest" so the code will be
$('#hiddentest').val(innerheight);

hiddentest is an id not a class in your case
Try,
$(window).resize(function(){
if($(window).height()>500){
var innerheight = $(window).height();
$('#hiddentest').val(innerheight);
}
});

<asp:TextBox id="texttest" Visible="true" runat="server" Text="1000" />
For the above asp.net textbox control, the ID changes dynamically when rendered (prepended with master and page information), id looks similar to main_ctrl100_texttest
var hdnfld= document.getElementById("texttest");, so this no longer holds good. Use a class instead.
<asp:TextBox id="texttest" Visible="true" runat="server" CssClass="texttest" Text="1000" />
var hdnfld = document.getElementsByClassName("texttest");
If you need more info on how to access .net controls using jquery, see here.

How to set HTMLEditorExtender HTML from client side

I cannot get this to work, here is code that I found in another thread but it is not working for me, I'm getting "set_content is not a function" :
$find("<%=Hee.ClientID%>").set_content("whatever");
Is this still valid?
I also tried to set value of the textbox it extends, tried setting InnerHtml of both,none worked.

I was going nuts for hours looking for a way to change the content and here's what I've come up with that works quite well:
This is the TextBox and Extender:
<asp:Textbox ID="replyBody" Height="450px" Width="892px" runat="server" TextMode ="MultiLine" />
<ajaxToolkit:HtmlEditorExtender ID="replyBody_HtmlEditorExtender" runat="server" Enabled="True" EnableSanitization="false" TargetControlID="replyBody">
</ajaxToolkit:HtmlEditorExtender>
Now this is the javascript that changed the value:
<script type = "text/javascript" >
function changeText(someString){
document.getElementById('ctl00_ContentPlaceHolder1_replyBody_HtmlEditorExtender_ExtenderContentEditable').innerHTML = someString;
}
</script>
This works like a charm. The above element ID is actually that of a div, however changing its contents updates the replyBody.Text property

$find("<%= Hee.ClientID %>")._editableDiv.innerHTML = "whatever";

Try this:
$("#<%=Hee.ClientID%>").html("whatever");

You could try this out:
var ctrl = $get("<%=Hee.ClientID%>").control;
ctrl.set_content("whatever");

asp.net/c# ---how to loop checkbox in a div?

In one of my web page, there are 12 checkbox controls in a div tag. I want to make sure the user check at least one checkbox in a div after they submit the form.in one of my asp.net web page. Any idea? I mean server side. I have done client side, but as you know, no one could guarantee all client browser enable javascript.

Since you're using ASP.Net, you may want to consider using the
<asp:CheckboxList />
control, and add an <asp:CustomValidator> plus validation functions that ensure one checkbox was checked.

While I agree with what others said about the validators, this code does what you want:
int i = 0;
foreach (Control ctl in myForm.FindControl("myDiv").Controls)
{
if (ctl is CheckBox)
{
if (((CheckBox)ctl).Checked)
i++;
}
}

Can you use JQuery? If so, check this out:
Get a list of checked checkboxes in a div using jQuery

Does it have to be is C#? Sounds a lot simplier if you just did it in javascript.

You want to look at the OnClientClick property of the asp:CheckBox control.
Here is an example:
<asp:CheckBox runat="server" OnClientClick="alert(this.checked);" />
In your javascript code (called by the handler) you can loop through all children of the div, looking for checkbox type inputs. jQuery is best for that. You could use something like this:
function countChecked() {
return $("input:checked").length;
}
That function above will return the number of checked checkboxes. After that it's trivial to validate your form. Just remember to return false from the handler called by OnClientClick to avoid a postback (in the event your form doesn't validate).
I just realized you edited your question while I was typing an answer. The above is a client side solution only.

If you just want a server side check for this and dont mind autopostback, give this a try. Just set an event handler for the SelectedIndexChanged event and check to see if an option is selected there. You can then display an error of your choice.
Here is the checkboxlist code:
<asp:CheckBoxList ID="chkBxList" runat="server" AutoPostBack="true"
onselectedindexchanged="chkBxList_SelectedIndexChanged">
<asp:ListItem>option1</asp:ListItem>
<asp:ListItem>option2</asp:ListItem>
<asp:ListItem>option3</asp:ListItem>
</asp:CheckBoxList>
<asp:Label id="lblError" runat="server"></asp:Label>
Codebehind:
protected void chkBxList_SelectedIndexChanged(object sender, EventArgs e)
{
bool oneSelected = false;
foreach (ListItem item in chkBxList.Items)
{
if (item.Selected)
oneSelected = true;
}
if (!oneSelected)
lblError.Text = "Please select an option from the checkbox list.";
else
lblError.Text = "At least one checkbox is selected";
}
Even if the client disables JS this will still make sure they choose at least one.

Change background colour of dropdownlist selected item in ASP.NET with CSS

I would like to change the background colour of the selected item in dropdownlists, listboxes, and textboxes. Is this possible with CSS?
Thanks
UPDATE
Just tried this CSS:
::-moz-selection
{
background-color:#8CCA1E;
color:Black;
}
Works great for selected text but not for hover colours or selected item colours on dropdownlists or listboxes.

You can set background colors from the .aspx page by specifying either the CssClass, or the BackColor property.. it looks like:
<asp:ListBox CssClass="MyListBox" BackColor="#e0e0e0"></asp:ListBox>
Setting the selected item is a little trickier... I don't believe there is an attribute for this directly. You can set it in javascript, or jQuery, something like:
// Never mind, this won't work
<script type="text/javascript">
$(document).ready(function() {
$('#MyListBox').click(function() {
$("#MyListBox option:selected").css("background-color", "#e0e0e0");
});
});
</script>
I'll test that to make sure it works... if you need a straight javascript solution, I'll see what I can come up with. But if you're not using jQuery, and you want fine-grained control over your controls, now is a good time to learn it : )
Thanks to Justin for corrections to the script!
EDIT
Hover is easy... add a style:
select > option:hover {
background-color: #ffffd0;
}
That will set the background color on any listbox item you hover over on the page. jQuery can be used to set the click function on all listboxes, not just specifically #MyListBox... give me a couple of minutes, I'll add some code
UPDATE
After extensive research, exhausting every resource I had or can put my hands on, the best answer I come up with is: Setting the selected color can't be done.
Not even the jQuery code I came up with will work. The selected color is set by the OS, and can't be overridden.
Sorry, best I can do is the :hover pseudo-selector
: (
.

You might want to try out the css selector ::selection which sounds like it will do what you want. Here's a good article on it. The only problem is it seems to be css3 only, so you may want to try the jquery solution James B posted, depending on what your browser requirements are.

Another approach is using JS..
<asp:DropDownList ID="DropDownList1" runat="server" onchange="SelectedItemCLR(this);">
<asp:ListItem Text="Name1" Value="1"></asp:ListItem>
<asp:ListItem Text="Name2" Value="2"></asp:ListItem>
<asp:ListItem Text="Name3" Value="3"></asp:ListItem>
<script type="text/javascript">
function SelectedItemCLR(source) {
for (var i = 0; i < source.options.length; i++) {
if (i != source.selectedIndex)
source.options[i].style.backgroundColor = "White";
else
source.options[i].style.backgroundColor = "Red";
}
}

You could create CSS rules for this and apply them programmatically in the change handlers in your code. Or you could tap into the System.Drawing namespace to achieve the same thing in your handlers.
// CSS
.dropDownBackColor { background-color:#00ff00; }
// Code-Behind: in your selected index changed event handler
// for the drop down list
ddl.CssClass = "dropDownBackColor";
OR
ddl.BackColor = System.Drawing.Color.Yellow;