I am trying to set the disabled property for my CheckBox to true. However, when I do a postback the CheckBox is still enabled?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<head runat="server">
<title></title>
<script>
$(document).ready(
function () {
$("#CheckBoxList1_0").attr('disabled',true);
}
);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem>een</asp:ListItem>
<asp:ListItem>twee</asp:ListItem>
<asp:ListItem>drie</asp:ListItem>
</asp:CheckBoxList>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</form>
</body>
</html>
c#:
protected void Button1_Click(object sender, EventArgs e)
{
if (!CheckBoxList1.Items[0].Enabled)
{
Response.Write("it is disabled");
}
}
CSS properties like disabled added with jQuery, or added in any way for that matter, will not post to the server when you do a postback.
If you really need to keep track of which checkboxes are disabled, one way to accomplish this would be to store those elements' ids into a hidden input, the value of which will post to the server.
Something like this should work
<input type="hidden" runat="server" id="yourHiddenInput" />
$("form").submit(function(){
var allIds = [];
$("input[type='checkbox']:disabled").each(function() {
allIds.push($(this).attr("id"));
});
$("#yourHiddenInput").val(allIds.join());
//form is about to post. When it does,
//you'll be able to read the ids via yourHiddenInput.Value
});
When you change the checkbox using javascript that change is on the client only, I believe that the viewstate information for the checkbox won't be updated and so when the postback occurs as far as the page knows the checkbox is still unchecked
Related
I test jQuery and ASP.NET with Webcontrols and in my test load the Side everytime new if I click on the Button. The jQuery Code add a Css Class to a Label.
My aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="jQueryAnwendung.Main" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Anwendung</title>
<script src="Scripte/jquery-1.8.0.min.js" type="text/javascript"></script>
<style type="text/css">
.CssKlasse
{
background:red;
font-size:40px;
}
</style>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#<%= b1.ClientID%>").click(function (event) {
$("#<%= bild1.ClientID %>").slideToggle('slow');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="b1" runat="server" text="Bild verkleinern/vergrößern"/>
<asp:Image ID="bild1" runat="server" ImageUrl="~/Theme/net.png" Width="50" Height="50" />
</div>
</form>
</body>
</html>
What can I do?
tarasov
inside your handler, prevent the button from behaving normally:
$("#<%= b1.ClientID%>").click(function (event) {
event.preventDefault(); //prevent the control to act in its default way
$("#<%= bild1.ClientID %>").slideToggle('slow');
});
Asp button causes Post back when you click it - page reloads and your script is not executed, you can use HTML button instead or try to disable postback on this button.
if you using asp controls you have 2 ways to handle it
First is change "#b1 and "#l1" to "<%= #b1.ClientID%>" and "<%= #l1.ClientID %>" in your jQuery function
Second is to add attribute ClientIDMode="Static" to your asp:Button and asp:Label
The generated id is more verbose; open your browser and click View source. You will notice it. Copy and paste the ID into your jQuery selector.
Another way is to call b1.clientID inside your .aspx: $("<%= b1.ClientID %>"), which will output the generated clientID at runtime.
Since ASP.NET 4, StaticMode allows you to have complete control over the generated ID. For more information, check it out: http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx
I have an ASP.NET page with a Submit button. When I click the button my code runs and then the page reload/refresh....the whole page gets posted back.
What must I use or do to prevent the page from reload? AJAX? How would this be done?
Code examples would be great!
Check the below code with AJAX and Without AJAX
Case 1 With AJAX
In this we added following controls
1. Script Manager
2. Ajax Update Panel with Trigger and Content Template
3. Button
In this case, you will notice that on clicking the button, the controls which are outside the Update Panel will not be updated. That means controls inside the Update Panel will be updated on clicking the button. That means complete page will not be refreshed. I hope this fulfill your requirement....
Output
Date outside the update panel will not be updated and date inside the update panel will only be updated because it is inside the update panel so complete page will not be refreshed.
Source Code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<%=DateTime.Now %>
<br />
<asp:ScriptManager ID="scr" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="Upd" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%=DateTime.Now %>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="btn" runat="server" Text="Click Me" />
</div>
</form>
</body>
</html>
Case 2 Without AJAX
The below case will also update the date but this time page will be refreshed completely due to absence of Update Panel
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<%=DateTime.Now %>
<asp:Button ID="btn" runat="server" Text="Click Me" />
</div>
</form>
</body>
</html>
Hope this article will help you understand the quick basics
If you don't want the page to reload, you should take a look at the UpdatePanel Control: http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.aspx
If you want to avoid that your code is run again
you can do in your page_load event
If(!page.IsPostBack())
{
your code here
}
and ajax to avoid reload in jquery
with the example here
or with asp ajax panel
I am using jquery UI modal popup to show user login form.
The script adds html elements around the form to build the popup.
When i submit the login form - the textboxes appear to be empty in the code behind, even though I have entered the value in it.
I think it is because the input is moved from the original position it was rendered, thus the code somehow validates the request.
Question is: Is there a way to make the values pass thru any way? Or to disable this validation?
Example of code:
HTML:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="UI-login.aspx.cs" Inherits="tests_UI_login" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="/js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui-1.8.8.custom.min.js" type="text/javascript"></script>
<link href="/css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
Sys.Application.add_load(function (sender, args) {
// Dialog
$('#loginDialog').dialog({
autoOpen: true,
width: 600,
resizable: false,
modal: true,
show: 'slide',
hide: 'slide'
});})
</script>
<div id="loginDialog">
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:LinkButton ID="btnLogin" runat="server" onclick="btnLogin_Click1">Login</asp:LinkButton>
</div>
</form>
</body>
</html>
C# :
public partial class tests_UI_login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnLogin_Click1(object sender, EventArgs e)
{
string email = txtEmail.Text; //Here the value is empty
}
}
To get the values of the inputs in the code behind and access them through the server controls mechanism (textBox.Text), their state (and presence) needs to be persisted in the ViewState. Since you are building them with javascript, their state is not persisted, the only way you can get their values is using the Request.Form collection.
As usual, posting the relevant code, may produce more specific answers.
<body>
<div id="loginDialog">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:LinkButton ID="btnLogin" runat="server" onclick="btnLogin_Click1">Login</asp:LinkButton>
</form>
<script type="text/javascript">
Sys.Application.add_load(function (sender, args) {
// Dialog
$('#loginDialog').dialog({
autoOpen: true,
width: 600,
resizable: false,
modal: true,
show: 'slide',
hide: 'slide'
});
})
</script>
</div>
</body>
I did something like above it works. I kept form1 inside dialog.
Actually there are several issues, quickest solution would be to use an existing plugin, like the jQuery Form Plugin.
I found the solution. Just add the dialog to the form.
See http://labs.kaliko.com/2011/08/jquery-ui-dialog-aspnet-postback.html
Update 1:
To make all happy, the solution is to register the modal into the form:
var myDialog = jQuery("#myDialog").dialog({ width: 480, height: 400 });
myDialog.parent().appendTo(jQuery("form:first"));
$(document).ready(function() {
$('#chkRFI').click(
function() {
$("INPUT[type='checkbox']").attr('checked', $('#chkRFI').is(':checked'));
}); });
<div class="grid_3">
<div class="box">
<div class="boxheader">
<asp:CheckBox ID="chkRFI" runat="server" Text="RFI" />
</div>
<div class="boxbody">
<asp:CheckBoxList ID="chklstRFI" runat="server" CssClass="boxbodylist">
<asp:ListItem Text="RFI No" Value="RFI" />
<asp:ListItem Text="RFI Date" Value="RFI_Date" />
</asp:CheckBoxList>
</div>
</div>
</div>
How to solve? Please provide me any ideas...
Thanks
You should use $('#<%= chkRFI.ClientID %>') instead of $('#chkRFI')
I feel that solution by ysrb should work - but you may also try alternate selectors - for example:
var checkAll = $('.boxheader input');
checkAll.click(function() {
$('.boxbody input').attr('checked', checkAll.attr('checked'));
});
If you are using ASP.NET then all element IDs will be generated in very ugly form, e.g. $Form1$$MyCheckBox (in is not exactly the correct sample, but it shows the main idea). If you are using ASP.NET 4 you can disable this feature in web.config ([pages clientIDMode="static" /]). Analyze your checkbox with FireBug or simply view the page source to make sure that checkbox was generated with correct ID. Hope this helps...
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Check/Uncheck All CheckBoxes Using JQuery</title>
<script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#chkAll').click(
function() {
$("INPUT[type='checkbox']").attr('checked', $('#chkAll').is(':checked'));
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBox ID="chkAll" runat="server" Text="Check All" /><br />
<asp:CheckBoxList ID="cbList" runat="server">
</asp:CheckBoxList>
</div>
</form>
</body>
</html>
here is the complete example
Telerik radlistbox fires both OnClientItemChecked and OnClientSelectedIndexChanged when an item is checked in Firefox and IE but not in Chrome.
Chrome seems to have the proper behavior. Is there a reason for this?
Can I make IE and Firefox behave accordingly as well?
Some more context;
This radlistbox gets loaded in an ascx panel.
<telerik:RadListBox CheckBoxes="true" EnableDragAndDrop="True" Height="400"
ID="radListBox0" OnClientItemChecked="OnClientItemChecked"
OnClientSelectedIndexChanged="OnClientSelectedIndexChanged" runat="server"
SelectionMode="Single" Visible="true" Width="275" />
And here is the Javascript it calls declared within the same ascx file:
<telerik:RadCodeBlock ID="radCodeBlock" runat="server">
<script type="text/javascript">
function OnClientSelectedIndexChanged(sender, eventArgs) {
var ajaxManager =
$find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");
var t = sender._clientStateFieldID;
if (ajaxManager != null)
ajaxManager.ajaxRequest("ListBoxIndexChanged|" + t);
}
function OnClientItemChecked(sender, eventArgs) {
}
</script>
</telerik:RadCodeBlock>
9/22/2010 17:03 EDIT: So I'm on the latest version as in the first response.
Still no luck. I did what I should have done first and tried just a vanilla radlistbox on a blank aspx page.
There was no error there so I'm guessing that it has to do because the control problems is built inside an modal popup on a page with multiple layers of custom controls and even master pages. At least I know it's not Telerik now.
I tried to reproduce the problem but was unable to do so (Windows 7 x64). I've tested the following code under Chrome 6.0, FireFox 3.6.10 and IE 8 and all behaved the same:
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scm" runat="server" />
<telerik:RadCodeBlock ID="radCodeBlock" runat="server">
<script type="text/javascript">
function OnClientSelectedIndexChanged(sender, eventArgs) {
alert('OnClientSelectedIndexChanged');
}
function OnClientItemChecked(sender, eventArgs) {
alert('OnClientItemChecked');
}
</script>
</telerik:RadCodeBlock>
<telerik:RadListBox
CheckBoxes="true"
EnableDragAndDrop="True"
ID="radListBox0"
OnClientItemChecked="OnClientItemChecked"
OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"
runat="server"
SelectionMode="Single"
Visible="true">
<Items>
<telerik:RadListBoxItem Value="value1" Text="text1" />
<telerik:RadListBoxItem Value="value2" Text="text2" />
<telerik:RadListBoxItem Value="value3" Text="text3" />
</Items>
</telerik:RadListBox>
</form>
</body>
</html>
Only a single client handler was invoked: either OnClientItemChecked or OnClientSelectedIndexChanged