We Keep Coding

Disabled dropdownlist not working (autopostback & updatepanel related) C# asp.net

After choosing a 2nd list item. The "Select Category..." for the 3rd drop down list is not disabled any more it became clickable/selectable.
The "Select Category..." should remain disabled in all drop down list.
I think it has something to do with Autopostback and UpdatePanel.
because I used updatepanel to keep the modal open when postingback and I used Autopostback to remove the selected item from drop down list.
This is my code:
<form class="form-horizontal" runat="server">
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-body">
<div class="form-group">
<div class="col-lg-10">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<asp:DropDownList ID="ddl1" runat="server" class="form-control" MaxLength="50" OnSelectedIndexChanged="ddl1_SelectedIndexChanged" AutoPostBack="true" required >
<asp:ListItem Value="" disabled="disabled">Select Category...</asp:ListItem>
<asp:ListItem>Artist/Curator</asp:ListItem>
<asp:ListItem>MCAD Exhibitor</asp:ListItem>
<asp:ListItem>Student</asp:ListItem>
<asp:ListItem>Collector/Buyer</asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<asp:DropDownList ID="ddl2" runat="server" class="form-control" MaxLength="50" OnSelectedIndexChanged="ddl2_SelectedIndexChanged" AutoPostBack="true" required >
<asp:ListItem Value="" disabled="disabled">Select Category...</asp:ListItem>
<asp:ListItem>Artist/Curator</asp:ListItem>
<asp:ListItem>MCAD Exhibitor</asp:ListItem>
<asp:ListItem>Student</asp:ListItem>
<asp:ListItem>Collector/Buyer</asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<asp:DropDownList ID="ddl3" runat="server" class="form-control" MaxLength="50" OnSelectedIndexChanged="ddl3_SelectedIndexChanged" AutoPostBack="true" required >
<asp:ListItem Value="" disabled="disabled">Select Category...</asp:ListItem>
<asp:ListItem>Artist/Curator</asp:ListItem>
<asp:ListItem>MCAD Exhibitor</asp:ListItem>
<asp:ListItem>Student</asp:ListItem>
<asp:ListItem>Collector/Buyer</asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
My code behind .cs:
protected void ddl1_SelectedIndexChanged(object sender, EventArgs e)
{
ddl2.Items.Remove(ddl1.SelectedItem);
ddl3.Items.Remove(ddl1.SelectedItem);
UpdatePanel1.Update();
}
protected void ddl2_SelectedIndexChanged(object sender, EventArgs e)
{
ddl1.Items.Remove(ddl2.SelectedItem);
ddl3.Items.Remove(ddl2.SelectedItem);
UpdatePanel1.Update();
}
protected void ddl3_SelectedIndexChanged(object sender, EventArgs e)
{
ddl1.Items.Remove(ddl3.SelectedItem);
ddl2.Items.Remove(ddl3.SelectedItem);
UpdatePanel1.Update();
}

This is not about your update panel(I tested). I think this is a bad behavior (or a bug) of drop down list that when you remove its item it select its first item and remove that disability. To solve this problem you can easily add this jquery to end of your codes:
$('select').each(function ()
{
$(this).children().eq(0).attr('disabled', 'disabled');
});
And if you do not want to use jquery, paste this script after yout dropdowns:
<script>
var arr = document.getElementsByClassName('form-control');
for (var i = 0; i < arr.length; i++)
{
console.log(arr[i]);
arr[i].children[0].setAttribute('disabled', 'disabled');
}
</script>

Unable to bind data based on dropdownlist value and radio button value

I am currently trying to load my gridview according to the value in dropdown list and radio button.
However, whenever I add in the code to check for the radio button checked or not, the gridview will not load any data.
At first I thought it'd be the AutoPostBack that is causing the problem, however, after solving the AutoPostBack issue, I still unable to get data based on radio button. Every time I change my drop down list value and I change my radio button value, no data appears.
I am currently doing in C# and I am using my gridview as Data Table (a JQuery plugin)
Here's my sample code
ASPX
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Content/DataTables-1.10.12/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".gvv").prepend($("<thead></thead>").append($(".gvv").find("tr:first"))).dataTable();
$(document).on("dblclick", ".gvv tbody tr", function () {
var $this = $(this);
var row = $this.closest("tr");
row.find('td:eq(1)');
var courseCode = row.find('td:first').text();
});
})
function onPageLoad() {
$(".gvv").prepend($("<thead></thead>").append($(".gvv").find("tr:first"))).dataTable();
$(document).on("dblclick", ".gvv tbody tr", function () {
var $this = $(this);
var row = $this.closest("tr");
row.find('td:eq(1)');
var courseCode = row.find('td:first').text();
});
}
</script>
<div class="row">
<div class="col-lg-1">
</div>
<div class="form-group">
<asp:Label ID="lblESTt" CssClass="col-lg-2 control-label" runat="server" Text="Test display: "></asp:Label>
<div class="col-lg-3">
<asp:DropDownList ID="ddlTest" CssClass="form-control input-lg" runat="server" OnSelectedIndexChanged="ddlTest_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
</div>
</div>
</div>
<div class="row" style="margin-top: 4%;">
<div class="col-lg-5">
</div>
<div>
<div class="btn-group" data-toggle="buttons">
<asp:RadioButton ID="currentOption" runat="server" Text="Current" CssClass="btn btn-primary active btn-lg" />
<asp:RadioButton ID="pastOption" runat="server" Text="Past" CssClass="btn btn-primary btn-lg" />
</div>
</div>
</div>
<div class="row" style="margin-top: 2%;">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<asp:GridView ID="gridView1" runat="server" CssClass="table table-striped table-bordered dataTable no-footer hover gvv" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="testA" />
<asp:BoundField DataField="testB" />
<asp:BoundField DataField="testC" />
</Columns>
</asp:GridView>
</div>
</div>
ASPX.CS
protected void ddlTest_SelectedIndexChanged(object sender, EventArgs e)
{
if (currentOption.Checked)
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "onPageLoad();", true);
loadCurrentData();
}
else
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "onPageLoad();", true);
loadPastData();
}
}
protected void loadCurrentData()
{
gridView1.DataSource = retrieveBAL.retrieveCurrent(ddlTest.SelectedValue, DateTime.Now.Year);
gridView1.DataBind();
}
protected void loadPastData()
{
gridView1.DataSource = retrieveBAL.retrievePast(ddlTest.SelectedValue, DateTime.Now.Year);
gridView1.DataBind();
}
UPDATE
I've tried creating a oncheckedchange event for my radio button, however, the event just doesn't trigger. Here's what I've tried
ASPX
<div class="btn-group" data-toggle="buttons">
<asp:RadioButton ID="currentOption" runat="server" Text="Current" Checked="true" CssClass="btn btn-primary active btn-lg" GroupName="currentPastOption" OnCheckedChanged="currentPastOption_CheckedChanged" AutoPostBack="true"/>
<asp:RadioButton ID="pastOption" runat="server" Text="Past" CssClass="btn btn-primary btn-lg" GroupName="currentPastOption" OnCheckedChanged="currentPastOption_CheckedChanged" AutoPostBack="true"/>
</div>
ASPX.CS
protected void currentPastOption_CheckedChanged(Object sender, EventArgs e)
{
if (currentOption.Checked)
{
loadCurrentData();
}
else if (pastOption.Checked)
{
loadPastData();
}
}

Try with below code for the radio button group.There I have removed the data-toggle="buttons" and it works fine.
ASPX:
<div class="btn-group">
<asp:RadioButton ID="currentOption" runat="server" CssClass="btn btn-primary active btn-lg" Text="Current" GroupName="timeSelector" OnCheckedChanged="timeSelector_CheckedChanged" AutoPostBack="true" />
<asp:RadioButton ID="pastOption" runat="server" CssClass="btn btn-primary active btn-lg" Text="Past" GroupName="timeSelector" OnCheckedChanged="timeSelector_CheckedChanged" AutoPostBack="true"/>
</div>
ASPX.cs
protected void timeSelector_CheckedChanged(object sender, EventArgs e)
{
if (currentOption.Checked)
{
loadCurrentData();
}
else
{
loadPastData();
}
}

how to display picture after user selection

My problem is that I want to get the preview of the image after the user chooses one,
but unfortunately nothing is happening. I don't understand why.
Can anyone help me out?
Here is my aspx:
<div class="container-fluid">
<div class="row-fluid">
<div class="btn-toolbar">
<asp:Button runat="server" CssClass="btn btn-primary" ID="OK_btn" Text="OK" OnClick="OK_btn_Click" />
<asp:LinkButton PostBackUrl="ClientMembershipDetailList.aspx"
OnClientClick="return blockConfirm('Are you sure you want to cancel?', event, '')"
CausesValidation="false"
runat="server" CssClass="btn btn-primary" ID="Cancel_btn" Text="Cancel" />
</div>
</div>
<div class="well tab-primary ui-tabs">
<ul class="nav nav-tabs ui-tabs-nav">
<li class="active">Member Details</li>
<li>Dependants</li>
<li>Medical History</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane active in" id="home">
<div class="span6">
<div class="form-horizontal">
<div class="control-group">
<label class="control-label">Client:</label>
<div class="controls with-tooltip">
<asp:HiddenField runat="server" ID="ID_txt" />
<asp:TextBox runat="server" CssClass="input-large" ID="ClientID_Txt" Enabled="false" />
</div>
</div>
<asp:ScriptManagerProx ID="ScriptManager1" runat="server" />
<div class="control-group">
<label class="control-label">Picture</label>
<div class="controls with-tooltip">
<asp:HiddenField runat="server" ID="Picture_Txt" />
<asp:Image runat="server" Width="100" ImageUrl="~/Images/Pictures/PictureNA.jpg"
Height="120" ID="Picture_Img" />
<asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" OnUploadedComplete="AsyncFileUpload1_UploadedComplete"
UploadingBackColor="SteelBlue" />
<%--<asp:FileUpload runat="server" ID="PictureFileUpload" />--%>
</div>
</div>
and this is the aspx.cs,
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
System.Threading.Thread.Sleep(5000);
if (AsyncFileUpload1.HasFile)
{
string fileName = Server.MapPath("Images/") + Guid.NewGuid().ToString();
AsyncFileUpload1.SaveAs(fileName);
}
}

Make sure your image is inside an Ajax UpdatePanel and then, in your UploadedComplete handle, set the image source to that uploaded image.
For that, you need to save your image in a public visible place in your website.
Example:
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
if (AsyncFileUpload1.HasFile)
{
string fileName = Server.MapPath("Images/") + Guid.NewGuid().ToString();
AsyncFileUpload1.SaveAs(fileName);
Picture_Img.ImageUrl = "~/Images" + Guid.NewGuid().ToString();
}
}

trying to dynamic asp:FileUpload , refresh trouble

i need the users of my web system to do uploads ( up 4 ).
the upload itself its working , but i dont want all for box appering at start, so tried to hide the 2nd ,3rd and 4th upload boxes until the user need them .
here the aspx code part
<fieldset>
<div class="frm tam">
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload1" runat="server" /></div>
<div class="lin">
<asp:FileUpload ID="FileUpload2" runat="server" Visible="false" /></div>
<div class="lin">
<asp:FileUpload ID="FileUpload3" runat="server" Visible="false" /></div>
<div class="lin">
<asp:FileUpload ID="FileUpload4" runat="server" Visible="false" /></div>
<div class="lin">
<asp:Button ID="btnUpload" runat="server" Text="Upload"OnClick="btnUpload_Click" />
<asp:Button ID="btnAdd" runat="server" Text="ADD File" OnClick="btnAdd_Click" />
<asp:Button ID="btnRem" runat="server" Text="Remove File" OnClick="btnRem_Click" />
</div>
</fieldset>
and the code behind to show and hide the boxes
protected void btnAdd_Click(object sender, EventArgs e)
{
if (FileUpload2.Visible == false)
{
FileUpload2.Visible = true;
}
else if (FileUpload3.Visible == false)
{
FileUpload3.Visible = true;
}
else if (FileUpload4.Visible == false)
{
FileUpload4.Visible = true;
}
}
protected void btnRem_Click(object sender, EventArgs e)
{
if (FileUpload4.Visible == true)
{
FileUpload4.Visible = false;
}
else if (FileUpload3.Visible == true)
{
FileUpload3.Visible = false;
}
else if (FileUpload2.Visible == true)
{
FileUpload2.Visible = false;
}
}
and when i click on Add File, the new box appear but the filepaths selected on the other boxes are cleared. Can i avoid this clear ?
*edit: i´m using net framework 4.0 .

The file get lost on postback. Alternatively, you can achieve that with JavaScript
<div id="div1">
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
<div id="div2" style="display:none"> <!-- visibility:hidden -->
<asp:FileUpload ID="FileUpload2" runat="server" />
</div>
<div id="div3" style="display:none">
<asp:FileUpload ID="FileUpload3" runat="server" />
</div>
<div id="div4" style="display:none">
<asp:FileUpload ID="FileUpload4" runat="server" />
</div>
Then put each FileUpload control in each of the divs.
<input type="button" valud="Add" onclick="addControls()" />
Then use JavaScript to make them visible
function addControls()
{
document.getElementById('div2').style.display = 'inline-block';
//$('#div2').show(); <--- JQuery
}

The problem here is that uploading files works slightly differently to most input controls...
Rather than posting the file path value that is entered, it actually posts the file content so
on postback this value gets lost.
It seems to me like your best bet is to do something with javascript on the client to show/hide these upload controls. This would also be a better user experience as the user wouldn't have to wait for postback each time.
You could do this with jQuery...
http://jsfiddle.net/BAwfH/2/
<fieldset>
<div class="frm tam">
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload2" runat="server" />
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload3" runat="server" />
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload4" runat="server" />
</div>
<div>
<asp:Button ID="btnUpload" runat="server" Text="Upload"OnClick="btnUpload_Click" />
<asp:Button ID="btnAdd" class="add-button" runat="server" Text="ADD File" OnClick="btnAdd_Click" />
<asp:Button ID="btnRem" runat="server" Text="Remove File" OnClick="btnRem_Click" />
</div>
<script type="text/javascript">
$(document).ready(function(){
var lines = $('.lin');
lines.hide();
lines.filter(':first').show();
$('.add-button').click(function(){
lines.filter(':hidden:first').show();
if(lines.filter(':hidden').length == 0)
$(this).hide();
});
});

Passing Control's Value to Modal Popup

Just would like know how to pass textbox value to a modal popup after clicking a button using ModalPopUpExtender in ASP.NET, I've tried these codes but seems that I have no luck :(
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Button1.Attributes.Add("onclick", "showModalPopup(); return false;");
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick='showModalPopup(); return false;' />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
PopupControlID="Panel1" CancelControlID="btnCancel" OkControlID="btnOkay" BackgroundCssClass="ModalPopupBG">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" Style="display: none" runat="server">
<div class="HellowWorldPopup">
<div class="PopupHeader" id="PopupHeader">
Header</div>
<div class="PopupBody">
<asp:Label ID="Label1" runat="server"></asp:Label>
</div>
<div class="Controls">
<input id="btnOkay" type="button" value="Done" />
<input id="btnCancel" type="button" value="Cancel" />
</div>
</div>
</asp:Panel>
javascript
function showModalPopup() {
//show the ModalPopupExtender
var value;
value = document.getElementById("TextBox1").value;
$get("<%=Label1.ClientID %>").value = value;
$find("<%=ModalPopupExtender1.ClientID %>").show();
}
I wonder what I miss out :(, Thanks and I hope someone could help me :)

use
value = document.getElementById('<%=TextBox1.ClientID %>').value;
instead of
value = document.getElementById("TextBox1").value;