Develop Reference

Unable to change visibility of a div in asp.net C#

I have a div that displays loading symbol. I am setting visibility on change of a dropdown box. I want to set its visibility to false in C# after the SelectedIndexChanged method is complete.
Here is the div tag :
<div runat="server" clientidmode="Static" id="loadingImage" class="loadingImage" >
<img class="loadingImg" src="../Images/ajax-loader.gif" />
</div>
Here is the jQuery function :
$(document).ready(function () {
//$('#loadingImage').hide();
var modal = document.getElementById('loadingImage');
modal.style.display = "none";
$("#selectSegment").change(function () {
var modal = document.getElementById('loadingImage');
modal.style.display = "block";
});
});
and this is how i am trying to set the visibility in C#
protected void selectSegment_SelectedIndexChanged(object sender, EventArgs e)
{
ckBLBusinessUnits.Visible = true;
loadingImage.Style["display"] = "none";
}
I tried various ways in C# like set visibility to false etc but nothing worked. Kindly help.

Change this:
loadingImage.Style["display"] = "none";
To this:
loadingImage.Style.Add("display", "none");

You can use hide and show methods to perform that action.
<div runat="server" clientidmode="Static" id="loadingImage" class="loadingImage">
<img class="loadingImg" src="loading.gif" />
</div>
<asp:DropDownList ID="selectSegment" ClientIDMode="Static"
runat="server">
<asp:ListItem Value="0">none</asp:ListItem>
<asp:ListItem Value="1">display</asp:ListItem>
</asp:DropDownList>
JS
$(document).ready(function () {
var modal = document.getElementById('loadingImage');
modal.style.display = "none";
$("#selectSegment").change(function () {
if (this.value === "1") {
$("#loadingImage").show();
} else {
$("#loadingImage").hide();
}
});
});

The div tag was outside of the updatepanel, moving the div inside of the updatepanel resolved the issue.

"CheckAll" checkbox works only with the first page of asp:Repeater. How to fix?

I have a Repeater with CheckBoxes:
<asp:Repeater ID="rpt_users" runat="server" OnItemCommand="rpt_users_ItemCommand" OnItemDataBound="rpt_users_ItemDataBound">
<HeaderTemplate>
<table id="usersTable">
<tr>
<th rowspan="2">All<br /><asp:CheckBox runat="server" ID="checkAll" OnCheckedChanged="checkAll_CheckedChanged"/></th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr class="c0">
<td><asp:CheckBox ID="CheckSelect" runat="server" /></td>
</tr>
</ItemTemplate>
</asp:Repeater>
Here's a script that I placed right after Repeater control:
<script type="text/javascript">
var repeater1Control = document.getElementById('<%= rpt_users.ClientID %>');
$('input:checkbox[id$=checkAll]', repeater1Control).click(function (e) {
if (this.checked) {
$('input:checkbox[id$=CheckSelect]', repeater1Control).attr('checked', true);
}
else {
$('input:checkbox[id$=CheckSelect]', repeater1Control).removeAttr('checked');
}
});
$('input:checkbox[id$=CheckSelect]', repeater1Control).click(function (e) {
//To uncheck the header checkbox when there are no selected checkboxes in itemtemplate
if ($('input:checkbox[id$=CheckSelect]:checked', repeater1Control).length == 0) {
$('input:checkbox[id$=checkAll]', repeater1Control).removeAttr('checked');
}
//To check the header checkbox when there are all selected checkboxes in itemtemplate
else if ($('input:checkbox[id$=CheckSelect]:checked', repeater1Control).length == $('input:checkbox[id$=CheckSelect]', repeater1Control).length) {
$('input:checkbox[id$=checkAll]', repeater1Control).attr('checked', true);
}
});
Unfortunately, It works only at the first page of repeater. If I go to the second page or further, then nothing happens when I press "CheckAll" checkbox in header. How to fix this issue?

try this
(function($){
var bindEvents = function(){
// bind events here;
var repeater1Control = document.getElementById('<%= rpt_users.ClientID %>');
$('input:checkbox[id$=checkAll]', repeater1Control).click(function (e) {
if (this.checked) {
$('input:checkbox[id$=CheckSelect]', repeater1Control).attr('checked', true);
}
else {
$('input:checkbox[id$=CheckSelect]', repeater1Control).removeAttr('checked');
}
});
$('input:checkbox[id$=CheckSelect]', repeater1Control).click(function (e) {
//To uncheck the header checkbox when there are no selected checkboxes in itemtemplate
if ($('input:checkbox[id$=CheckSelect]:checked', repeater1Control).length == 0) {
$('input:checkbox[id$=checkAll]', repeater1Control).removeAttr('checked');
}
//To check the header checkbox when there are all selected checkboxes in itemtemplate
else if ($('input:checkbox[id$=CheckSelect]:checked', repeater1Control).length == $('input:checkbox[id$=CheckSelect]', repeater1Control).length) {
$('input:checkbox[id$=checkAll]', repeater1Control).attr('checked', true);
}
});
};
// initial load
$(document).ready( bindEvents);
// every async load by update panel
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindEvents);
})(jQuery);

Load second dropdown based on first - JQuery Dialog

I need to update my second drop down list from database according to the value selected from first drop down list in the Jquery dialog.
ASPX
<asp:UpdatePanel ID="upnl" OnLoad="upnl_Load" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="dv" style="display: none;" title="Tile">
<table>
<tr>
<td>Parent</td>
<td>
<asp:DropDownList ID="ddlDialog1" runat="server" /></td>
</tr>
<tr>
<td>Child</td>
<td>
<asp:DropDownList ID="ddlDialog2" runat="server" /></td>
</tr>
</table>
</div >
</ContentTemplate>
</asp:UpdatePanel>
JQuery
function EditBookingDialog() {
jQuery(document).ready(function () {
$("#dvEditBooking").dialog({
draggable: true,
modal: true,
width: 500,
height: 400
,
open: function (type, data) {
$("#<%= ddlDialog1.ClientID %>").change(function () {
__doPostBack('<%= upnl.ClientID %>', "DialogOnChange");
});
}
});
});
}
Code behind
protected void upnl_Load(object sender, EventArgs e)
{
if (arg.ToString().IndexOf("DialogOnChange") > -1)
{
// Here ddlDialog1.SelectedValue is always " ", Even I get a data set of values,ddlDialog2 is not populated with new values
ddlDialog2.DataSource = objMngr.GetData(ddlDialog1.SelectedValue);
ddlDialog2.DataValueField = "Id";
ddlDialog2.DataTextField = "name";
ddlDialog2.DataBind();
}
upnl.Update();
}
Problem here is,
How to Populate second drop down list(ddlDialog2) upon value change in the first drop down list.
Any idea?

You need to add the Server side change event of the 1st dropdown.
Modify the html of 1st drop down as follows.
<asp:DropDownList ID="ddlDialog1" runat="server" OnSelectedIndexChanged="upnl_Load()" />
remove jquery change and manually calling _do postback
$("#<%= ddlDialog1.ClientID %>").change(function () {
$.ajax(function{
url: "/YourPage.aspx"
type:"POST"
data:{"FirstDropDownValue" : $(this).val() }
success:function(msg){
//bind your second dropdown here.
if(msg.d != null)
{
// Looping over list
$.each(msg.d, function (index, value) {
$("#ddlDialog1").append($("<option> </option>").val(value["Id"]).html(value["name"]));
});
}
});
Update the server side method as follows
[WebMethod]
public static List<Myclass> void upnl_Load( string FirstDropDownValue)
{
if (FirstDropDownValue != "-1")
{
return objMngr.GetData(FirstDropDownValue);
}
upnl.Update();
}

Setting style.display from asp.net c#

I am using a Panel in an ASP.NET webpage to hide or display a selection of control in response to a client side button click. Simple script toggles the visibility
<script>
function SetToAddSurvey() {
var x = document.getElementById("NewSurveyPanel");
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
I now need to toggle the display property on the server side following a database transaction. I know I can't use the code
NewSurveyPanel.visible = false;
as it will cause the control to not be rendered and the above jscript to fail when it is called next.
NewSurveyPanel.Attributes["display"] = "block";
also doesn't work.
Is there an easy solution for this?
Ta.

Try this
NewSurveyPanel.Attributes["style"] = "display: none";
or
NewSurveyPanel.Attributes["style"] = "visibility: hidden";
What this does is to render the opening tag like this:
<div ....... style="display: none" ....>

Use a CSS class:
.hidden {
display: none;
}
....
NewSurveyPanel.CssClass = "hidden";

Code Behind
NewSurveyPanel.Attributes["style"] = "display: block";
ASPX
<asp:Panel ID="NewSurveyPanel" runat="server">
test
</asp:Panel>
<asp:Button runat="server" OnClientClick="SetToAddSurvey(); return false;" />
<script>
function SetToAddSurvey() {
var x = document.getElementById("<%= NewSurveyPanel.ClientID%>");
alert(x);
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>

jQuery in .net validate dropdownlist, fadein and fadeout panels

I have a dropdownlist control ddlAffilation, a panel pnlForms, a panel Complete, a button Submit, a button Return.
I have a validationcontrol on the dropdownlist.
here is my jquery code
<script type="text/javascript">
$(document).ready(function () {
$("#<%= Submit.ClientID %>").click(function () {
$("#<%= pnlForms.ClientID %>").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
});
$("#<%= Return.ClientID %>").click(function () {
$("#Complete").fadeOut('slow');
$("#<%= pnlForms.ClientID %>").delay(800).fadeIn('slow');
});
});
</script>
I have 2 problems:
1) With this jQuery code, I can go back and forth (fade out pnlForms, fade in Complete when click on Submit and vice versa when click on Return) only when i don't choose any value in the dropdownlist box. If I choose any value in the dropdownlist, the Return button doesn't work.
2) The jquery code bypass the .net server validation control. I need the code not do anything if no value is selected from the dropdownlist. I have tried
var isValid = true;
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
isValid = false;
return false;
}
if (isValid == true) {
...
but it doesn't work. What's the best way to do this?
Thanks,
==================================================================================
I can't add an answer to my own question so I reply to John here:
Thanks John. I have my code like this and it solves problem 2.
<script type="text/javascript">
$(document).ready(function () {
$("#<%= Submit.ClientID %>").click(function (e) {
if (IsValid() == false) {
e.preventDefault();
return false;
}
else {
$("#<%= pnlForms.ClientID %>").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
}
});
$("#<%= Return.ClientID %>").click(function () {
alert('blah2');
$("#Complete").fadeOut('slow');
$("#<%= pnlForms.ClientID %>").delay(800).fadeIn('slow');
});
function IsValid() {
// Add any other validation in here
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
return false;
}
return true;
}
});
</script>
However, problem 1 still exists. Let me clarify. I have a few textboxes, a dropdownlist and a submit button to collect feedback from the users. They are all in the panel pnlForms.
All controls can be empty except for the dropdownlist. We took care of this using your code and a server validation control.
when the users click the submit button, I want the pnlForms to fadeOut and a hidden panel called pnlComplete to fadeIn. The pnlComplete has a text saying thanks for the feedback and a button called Return that let the users send another feedback.
When the users click on the Return button, the opposite happens here. The pnlComplete fadeOut and the pnlForms fadeIn.
The Submit button works well but the Return button doesn't work at all. I set some alert() inside the Return.click(function but it doesn't hit.
Any ideas?
Here is the code of the whole page.
<%# Page Title="" Language="C#" MasterPageFile="~/Master.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="content" runat="Server">
<asp:UpdatePanel ID="pnlForms" runat="server">
<ContentTemplate>
<fieldset>
<legend>Your Information</legend>
<ol>
<li>
<label for="ctl00_content_name">
Your Name:</label>
<asp:TextBox ID="Name" runat="server" Width="150px"></asp:TextBox>
<em class="optional">Optional </em></li>
<li>
<label for="ctl00_content_status">
Your Affiliation:*</label>
<asp:DropDownList ID="ddlAffilation" runat="server" Width="155px">
<asp:ListItem Text="--Select One--" Value="" Selected="True" />
<asp:ListItem>F</asp:ListItem>
<asp:ListItem>S</asp:ListItem>
<asp:ListItem>T</asp:ListItem>
</asp:DropDownList>
<em class="required">Required
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage=" - Please select your affiliation"
ControlToValidate="ddlAffilation" SetFocusOnError="True" ForeColor=""></asp:RequiredFieldValidator>
</em></li>
</ol>
</fieldset>
<div style="text-align: center;">
<asp:Button ID="Submit" runat="server" Text="Submit" OnClick="submit_Click" /></div>
</ContentTemplate>
</asp:UpdatePanel>
<div id="Complete" style="display: none;">
<asp:UpdatePanel ID="pnlComplete" runat="server">
<ContentTemplate>
<p>Thank you</p>
<div style="text-align: center;">
<asp:Button ID="Return" runat="server" Text="Return" /></div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
<asp:Content ID="Content3" runat="server" ContentPlaceHolderID="cpClientScript">
<script type="text/javascript">
$(document).ready(function () {
$("#<%= Submit.ClientID %>").click(function (e) {
if (IsValid() == false) {
e.preventDefault();
return false;
}
else {
$("#<%= pnlForms.ClientID %>").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
}
});
$("#<%= Return.ClientID %>").click(function () {
$("#Complete").fadeOut('slow');
$("#<%= pnlForms.ClientID %>").delay(1000).fadeIn('slow');
});
function IsValid() {
// Add any other validation in here
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
return false;
}
return true;
}
});
</script>
</asp:Content>

I'm not sure if I read your question right or not, but if your issue is that you don't want the jquery to continue firing and allow the form to submit if the dropdown is empty do this:
Instead of attaching a .click event to your button, attach a .submit event to your form. Then you want to use e.PreventDefault() to stop the main submit execution if its not valid
Eg:
$("#FORMNAME").submit(function(e) {
if (IsValid() == false) {
e.preventDefault();
return false;
}
// Submitting form...
}
function IsValid() {
// Add any other validation in here
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
return false;
}
return true;
}
Also, you should ALWAYS do server validation along with your client validation.. otherwise all someone has to do is directly submit / bypass your javascript checks
Edit for your edit:
Is the return button being created dynamically or is it there on page load? If its dynamic, its probably never getting assigned to in your jquery, as it doesn't exist when it runs.
Here is a quick test you could try:
var returnButton = $("#<%= Return.ClientID %>");
alert(returnButton.attr("id");
If you don't get back the ID of your return button, its not matching up in your code and thats why your click event isn't working. If thats the case, do a view source on your page and find out what the actual return button ID is set to (this is easier with FireBug or similar tool)

Adding this as a separate answer since its just a huge chunk of code that isn't exactly related to the original answer, but does work as intended. I took the code you gave and converted to basic html from asp.net, and it does work correct, does it work for you?
Could you try posting the output from the asp.net page instead of the code itself? Maybe something isn't being set right on the button element's ID.
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js" type="text/javascript"></script>
</head>
<body>
<div ID="Content1">
<div ID="pnlForms">
<fieldset>
<legend>Your Information</legend>
<ol>
<li>
<label for="ctl00_content_name">
Your Name:</label>
<textbox ID="Name" runat="server" Width="150px"></TextBox>
<em class="optional">Optional </em></li>
<li>
<label for="ctl00_content_status">
Your Affiliation:*</label>
<select ID="ddlAffilation" Width="155px">
<option Value="" Selected="True">--Select One--</option>
<option>F</option>
<option>S</option>
<option>T</option>
</select
</li>
</ol>
</fieldset>
<div style="text-align: center;">
<Button ID="Submit" Value="Submit" OnClick="submit_Click">Submit</Button></div>
</div>
<div id="Complete" style="display: none;">
<div ID="pnlComplete">
<p>Thank you</p>
<div style="text-align: center;">
<Button ID="Return" Value="Return">Return</Button></div>
</div>
</div>
</div>
<div ID="Content3">
<script type="text/javascript">
$(document).ready(function () {
$("#Submit").click(function (e) {
if (IsValid() == false) {
e.preventDefault();
return false;
}
else {
$("#pnlForms").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
}
});
$("#Return").click(function () {
$("#Complete").fadeOut('slow');
$("#pnlForms").delay(1000).fadeIn('slow');
});
function IsValid() {
// Add any other validation in here
if ($("#ddlAffilation").val() == "") {
return false;
}
return true;
}
});
</script>
</div>
</body>
</html>