I have a modal popup with a formview with a default mode of Edit. The controls inside the form are bound to data. I have JavaScript that shows a textbox and a label only if a certain value is selected from a dropdownlist. I want to do this on load also.
<tr>
<td align="left">
<asp:DropDownList
ID="ddl5"
AutoPostBack ="false"
onchange = showifother('12',this.value);"
SelectedValue='<%# Eval("event_type") %>'
runat="server"
DataSourceID="SqlDataSource5"
AppendDataBoundItems ="true"
DataTextField="Description"
DataValueField="ID">
<asp:ListItem
Selected="True"
style="color:gray"
Value="" >Causes of Damage</asp:ListItem>
</asp:DropDownList>
<tr id="treditpropdamage" style="display:none">
<td align="left">
<asp:TextBox
ID="txt2"
runat="server"
TextMode ="MultiLine"
ondatabinding="TextBox2_DataBinding"
ValidationGroup ="Editprop"
Text = '<%# Bind("bounddata") %>'></asp:TextBox>
</td>
</tr>
function showifother(num, value)
{
var treditpropdamage = document.getElementById('treditpropdamage');
if (num == '12')
{
if (value == '4')
{
treditpropdamage.style.display = '';
}
else
{
treditpropdamage.style.display = 'none';
}
}
}
How can I set the tr tag to visible if 4 is the value of the bound value for the Dropdownlist in C#? Adding Runat="server" is not an option because I want to access the controls in JavaScript via document.getelementbyid
A few choices:
Add the style (display:none) on the server side (this means you have duplicate logic in the C# and Javascript)
Check the value of your dropdown when the form loads (putting something like: showifother('12',document.getElementById('ddl5').value in your javascript might help)
I'd really recommend you download and learn to use a framework, like jQuery, dojo or Prototype .js - they'll speed up your development and provide you with lots of tools to make your life easier.
If you're using a MasterPage I think this would do:
1) set the body tag of your Master Page or Page to runat="server" and give it an id: id="MainBody"
2) Reference the javascript file like you would normally do:
<-script src="yourJavascriptFile.js" type="text/javascript">
3) Now, in code-behind you can attach the onload attribute to the body tag:
protected void Page_Load(object sender, EventArgs e)
{
MasterPageBodyTag = (HtmlGenericControl)Page.Master.FindControl("MainBody");
MasterPageBodyTag.Attributes.Add("Onload", "YourJSFunction()");
}
Keep in mind that I have not tested the above example :)
You can set the TR's display style using a quick script block and a ternary operator
<tr id="treditpropdamage"
style="display:<%= ddl5.SelectedValue == "12" ? "" : "none" %>">
Also as an FYI you can still access runat="server" elements in javascript, you just need to provide javascript with the elements clientID. You can do that by injecting the id into the javascript like so:
<script>
var element = document.getElementById("");
</script>
Use jQuery! Download the .js from http://jquery.com/ or link the jQuery lib from Google's CDN http://code.google.com/apis/libraries/devguide.html#jquery
Here is my sample code:
http://jsfiddle.net/jphellemons/rPK52/
if ($("#ddl5").val() == 4)
$("#treditpropdamage").show();
With Asp.Net 4 you can use clientidmode
otherwise use:
if ($("#<%=ddl5.ClientId%>").val() == 4)
$("#treditpropdamage").show();
Related
Sounds a bit cluttered, but basically I have a databound repeater. On the ASP side, I have this:
<asp:Label ID="Label2" runat="server" Text='<%#Eval("uMessage") %>'></asp:Label>
I'm using the same template for 4 different datasets, and for 2 of them this should be a hyperlink and for the other 2 it shouldn't. So, I'm guessing you have to add a hyperlink programmatically in the code-behind? Has anyone ever done something like this?
Easiest way without all kinds of code-behind and therefor less code fragmentation, I would say you need a property that is set based on your condition prior to data binding.
protected bool LinkVisible { get; set; }
Then you just do this:
<asp:Label ID="Label2" runat="server" Text='<%#Eval("uMessage") %>' Visible="<%# !LinkVisible %>"></asp:Label>
<asp:HyperLink ID="Link" runat="server" Visible="<%# LinkVisible %>" ><%#Eval("uMessage") %></asp:HyperLink>
This sets the Visible for either the Label or the HyperLink. Visible false means it won't even get rendered. In your markup you can see that there will be a label or a hyperlink and no special things popup from the code behind.
You don't need to add the property LinkVisible, but can do the condition there too.
yes it is possible in code behind on DataItem bound
if (e.Row.RowType == DataControlRowType.DataRow)
{
Label lbl = (Label)e.Row.FindControl("Label2");
if (lbl.Text == "your condition")
{
HyperLink yourLink = (HyperLink)e.Row.FindControl("yourID");
yourLink.enabled = false;
}
}
I have one TextBox for Password and i want to set character for password, so which property can be used in asp.net?
<asp:TextBox TextMode="Password" runat="server" />
PasswordChar property is under this namespace, System.Windows.Forms. It is not available for asp .net web applications.
You could try JavaScript to change it into other characters such as "*" or "#".
You can see the following example to do so:
<script type="text/javascript">
function onTextChange(obj)
{
document.getElementById('hdnActualTextValue').value = obj.value;
obj.value = '';
for(int i=0; i<obj.value.length;i++)
{
obj.value +='*';//OR ANY OTHER CHARACTER OF YOUR CHOICE
}
}
</script>
<asp:TextBox ID="txtValue" runat="server" onblur="javascript:onTextChange(this);"
onkeyup="javascript:onTextChange(this);" onkeypress="javascript:onTextChange(this);"></asp:TextBox>
<asp:HiddenField ID="hdnActualTextValue" runat="server" />
OR maybe you could use input in HTML.
<label>PW: <input type="password"></label>
I think if you are using the Web Forms then in that the Password Characters are fixed. You can not change unless you use Javascript to change some behavior at run time
When we use WebForms in that PasswordCharacters are set by default.
Check out this link. You can get some Idea what I am telling you.
Simply use TextMode property in asp
<asp:TextBox ID="txtValue" runat="server" TextMode ="Password"> </asp:TextBox>
Was using a repeater to display a list on screen. For each record I added a <asp:checkbox, which I would like updated in real time to the corresponding table in the DB, depending on whether or not it was clicked.....So far I got: (Using JS)
ASPX:
<th style="width:200px;"><asp:CheckBox Name='<%# CallUtilityChangeId((int)Eval("id")) %>' runat="server"
onclick='UtilityChanged(<%#((int)Eval("id"))%>);'
Checked='<%# Convert.ToBoolean(Eval("Checked")) %>'/></th>
<th style="width:200px;"><%# Eval("Comment") %></th>
C#
protected string CallUtilityChangeId(int id)
{
return "Utilitychanged('" + id.ToString() + "');";
}
JavaScript:
function UtilityChanged(id) {
userId = userIdentifier;
}
The source code returns:
<th style="width:200px;">
<span Name="Utilitychanged('55');">
<input id="ctl00_ContentPlaceHolder1_rptSelectedUtilities_ctl01_ctl00" type="checkbox" name="ctl00$ContentPlaceHolder1$rptSelectedUtilities$ctl01$ctl00" onclick="UtilityChanged(<%#((int)Eval("id"))%>);" />
</span></th>
<th style="width:200px;"></th>
Instead of onclick="UtilityChanged(<%#((int)Eval("id"))%>);" />
I need it to return UtilityChanged("71") for eg. just the identification no. of the id.
Correct me if I'm wrong, but it sounds like you want to have a checkbox in a repeater that has a server sided event, where you can get an ID value to use in a database command, all done asynchronously? If so, you can use the update panels to do this.
First, you must wrap your repeater in an update panel and add a script manager:
<asp:UpdatePanel ID="UpdatePanel4" runat="server" >
<ContentTemplate>
<!-- put repeater in here -->
</ContentTemplate>
</asp:UpdatePanel>
Next, you want to add a checkbox with a server event attached to it. this gets added to the repeater row. You also want to add a label that has the ID value. In this example, its added by the data source
<ItemTemplate>
<tr class="listcolor">
<td style="display:none;border-right:0px solid #808080 ; border-bottom:0px solid #808080;">
<asp:CheckBox ID="myCB" Text="Approved" runat="server" AutoPostBack="true" OnCheckedChanged="check_change" />
</td>
<td style="display:none;border-right:0px solid #808080 ; border-bottom:0px solid #808080;">
<asp:label ID="userId" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "someId") %>'></asp:label>
</td>
</tr>
</ItemTemplate>
Now, add the check box event. When a control posts back to the server, if its in a repeater, or similar control, you can cast sender to the object that caused the postback, then get its parent row, then find the label control:
Protected Sub check_change(ByVal sender As Object, ByVal e As EventArgs)
'first, cast the sender to a check box
Dim cb As CheckBox = CType(sender, CheckBox)
'then use that to find the label in its parent control ( the row its on)
Dim userId As Label = CType(cb.Parent.FindControl("userId"), Label)
End Sub
That should do it. If you have any questions, let me know.
(without using page refresh) means using Ajax.
First you should understand how .Net server control is parsed into normal HTML tags.
Suppose your code is like this:
<asp:Repeater Id="rpt">
......
<asp:CheckBox ID="chkBox" runat="server" Name="someName" Checked="true" />
....
</asp:Repeater>
it 'll be rendered like this:
<span name="someName">
<input id="rpt_ctl00_chkBox" type="checkbox" name="rpt$ctl00$chkBox" checked="checked">
</span>
as you can notice there are 2 things here::
The checkbox is contained inside <span> tag.
The ID and Name properties of that checkbox is renamed by the .Net with something relative to the parent container(the Repeater) "RepeaterId_ct100_CheckBoxId".
Second thing if you want to get some value without been messed by the view engine or the .Net try to use custom attribute.
sorry for long introduction.
solution::
<input id="chkBox" runat="server" type="checkbox" checked='<%# Eval("Your_Record_ColumnName")%>' onchange="YourJavascriptFunctionName(this);return false;" columId='<%# Eval("Column_Id")%>'/>
Then by JavaScript or jQuery you get the value of that attribute.
function YourJavascriptFunctionName(chk)
{
recordId = $(chk).attr("columId");
//then use ajax to update the DB Table.
}
how to make ajax call that's another thing..tell me if you need help in it.
I am trying to working the following code.
<asp:DataGrid ID="Grid" runat="server" DataKeyField="KeyID" CssClass="grid"
...
<asp:CheckBox runat="server" ID="checkBox-<%#DataBinder.Eval(Container.DataItem,"KeyID")%>" AutoPostBack="false"></asp:CheckBox>
When I run the code,I have got the below error:
Error 25 The server tag is not well formed.
Note : This is working without runat="server".
What is the remedy for this problem ?
You don't need to set the ID of the CheckBox to do what you want to do (change the background color). Your CheckBox should look like this (I added the KeyID as the text value if you want to display it... or you can just remove that if you only want the checkbox):
<asp:CheckBox runat="server" ID="checkbox" Text='<%# Eval("KeyID") %>' AutoPostBack="false"></asp:CheckBox>
Now your checkbox will render something like this:
<input id="MainContent_Grid_checkbox_0" type="checkbox" name="ctl00$MainContent$Grid$ctl02$checkbox" /><label for="MainContent_Grid_checkbox_0">Value of KeyID</label>
Since all the names end with "checkbox", you can apply a function on the change event for those elements whose name ends with "checkbox". You didn't specify that this was a JavaScript question or if you are using jQuery... this answer uses jQuery:
<script>
$('input[name$="checkbox"]').change(function () {
if ($(this).is(':checked')) {
$(this).parent().css('background-color', 'yellow');
}
else {
$(this).parent().css('background-color', 'white');
}
});
</script>
That will determine if the checkbox is checked, and if so it will set the background-color of its parent (the <td> that it is in, inside the DataGrid rendered HTML), depending on the value.
Likewise, you can go up to the next parent() and highlight the entire row.
Resources:
jQuery Selectors
OnCheckedChanged -- an event that you would process in the code behind, not in JavaScript.
This code doesn't display the value, I don't know why?
I have server control:
<asp:TextBox ID="txtTest" runat="server" Visible="false" TextMode="MultiLine"
Rows="3" Columns="23" CssClass="white-scroll" />
in javascript function:
var eventText = document.getElementById('<%=txtTest.ClientID%>').value;
alert (eventText);
I enter text then click on button that call the javascript function, but the alert box doesn't display the entered text.
EDIT: when I initialize the text with Text="some text", it is displayed in alert, I want to enter text in client side and get the value of it in the Javascript function.
Thanks
Using label or textbox visible set false so it can access the value in JavaScript
Sol
1)
Make a div and set style="display:none;" so label is not display at UI(browser) but value can access in JavaScript.
This is because you server Control is called "txtTest" not "txtEventDescription"
change your javascript function to :
var eventText = document.getElementById('<%=txtTest.ClientID%>').value;
alert (eventText);
EDIT: ok, I see you've now changed the post to show the code and renamed the js control, so above is no longer relevant (for those who are confused by my answer) :-)
The problem is the Visible="false" - this control will not render into the client and will therefore not be accessible via javascript (as the HTML element does not exist client side)
So, hide the element using CSS and then call alert on it. Sample snippet
CSS
.hide-element {
display: none;
}
HTML Markup
<asp:TextBox ID="txtTest" runat="server"
Columns="23"
CssClass="white-scroll hide-element"
Rows="3"
TextMode="MultiLine"/>
JavaScript
var eventText = document.getElementById('<%=txtTest.ClientID%>').value;
alert (eventText);
This way you will definitely get an alert.
You alert is empty because you have not set the property Text for your asp:Textbox
Make it Visible="true" to your textbox and than test.
<asp:TextBox ID="txtTest" runat="server" TextMode="MultiLine"
Rows="3" Columns="23" CssClass="white-scroll" />
if "txtTest" textbox has visible="false" in that case its not render on html code on client machine and if it hasn't on client's html code then how javascript calls this textbox. Because when javascript search this textbox by its id it doesn't find and it gives an error.
you can assign any other custom attribute to the control i.e.
<asp:TextBox ID="txtTest" runat="server" Visible="false" TextMode="MultiLine"
Rows="3" Columns="23" CssClass="white-scroll"
clientID="myClientID" />
and then access control using jquery like
var txtVal = $('textbox[clientID=myClientID]').val();
hope it helps.