Access ASP.NET Literal value from Javascript - javascript

How can I access the value of an ASP.NET Literal control from JS. I have the below but it doesn't work:
var companyname = document.getElementById('litCompanyName').text;
var companynumber = document.getElementById('litCompanyNumber').text;
Thanks

You must public your literal in a webform/view, because you can't public asp.net code in .js files, you can do something like this:
<script>
var litCompanyName = <%= [YOUR LITERAL]; %>
</script>
and then use it

In Asp.net When Page is Going to Rendered it will change its ID in Html.
Check Html of Page using FireBug in Mozilla Firefox.
example of label
<asp:Label ID="SaveTime" runat="server"></asp:Label>
var companynumber= document.getElementById('<%=SaveTime.ClientID%>').Text
and For Literal You Need to Wrap with div or span
<span id="yourId"><asp:Literal ID="SaveTime" runat="server"></asp:Literal></span>
js:
var value= document.getElementById('yourId').innerText;

The short answer is that you can't. A literal control is just that. The value in the Text property is 'literally' outputted to the response stream.
You can either set a hidden field or use a Label. Just remember, referencing ASP.NET controls from Javascript, it's easier to use ClientIDMode="Static" or wrap your literal in a span with an ID.
For example:
litCompanyName.Text = "<span id=\"company-name\"> + Company.Name + </span>";
Then in your JS
var companyname = document.getElementById('company-name').text;

The literal control only exists on the server side, when the page is rendered it's only the text of the control that ends up in the page. So if you have:
The company name is <asp:Literal ID="litCompanyName" runat="server" Text="Google" />
all that ends up in the HTML code is:
The company name is Google
To access the text from Javascript you need an element around the text, for example:
<span id="CompanyName"><asp:Literal ID="litCompanyName" runat="server" /></span>
Now you can use document.getElementById('CompanyName').innerHTML to get the text from the literal.

Related

How to get the value from span element inside div that are set from C# code using Javascript

I have an aspx file with span sections inside a div:
<div id="child1container" runat="server">
<span class="textclass" id="UserName" runat="server" ClientId="username1"></span>
<span class="textclass" id="BankName" runat="server" ClientId="bankname"></span>
<div>
Here the values for Username and Bankname are set by the code behind (using .cs file). Once after the value is being set by the code, I need to capture the value of username and bankname in javascript using document.getElementById.value. Could someone help me on how to get this value in javascript so that I can do some more manipulation after this. I know I need to use window.onload function, but would like to know how to get the value from span element.
var val = document.getElementById("<%=BankName.ClientID%>").value
Typically ASP.NET controls have a ClientID property. That is how the ID will render in HTML.
<span class="textclass" id="BankName" runat="server" ClientId="bankname"></span>
Then in your javascript:
document.getElementById('<%= BankName.ClientID %>')

setting asp:RadioButton Text from javascript

I am having the following Radio butttons in my aspx file.
<asp:RadioButton ID="rdoOption1" runat="server" GroupName="grpAnswers"/>
<asp:RadioButton ID="rdoOption2" runat="server" GroupName="grpAnswers"/>
<asp:RadioButton ID="rdoOption3" runat="server" GroupName="grpAnswers"/>
<asp:RadioButton ID="rdoOption4" runat="server" GroupName="grpAnswers"/>
I want to set the text from javascript on a button's click.
Javascript code is as follows.
document.getElementById("rdoOption1").innerHTML = "sometext";
I've also tried with Text,nodevalue instead of innerHTML, no use. Plz help.
You need to use ClientID in javascript instead of using the server side id. As the server side id is changed when html is generated by asp.net. You also have : instead of semi colon at the end of javascript statement. Use value instead of innerHTML as that is not for input html elements.
document.getElementById("<%= rdoOption1.ClientID %>").value = "sometext";
If you have .Net Framework 4 and above then you can use Control.ClientIDMode="static" to keep the server id on the client side.
Edit The second thing you have to take care is to make sure the html element you are trying to access is already added to DOM. You can do this by putting the script after the html elements you are trying to access. The best place would be just before the ending body tag </body>
<script type="text/javascript>
document.getElementById("rdoOption1").innerHTML = "sometext";
</script>
</body>
Atlast I've found the solution for this.
Actually the asp:RadioButton is rendering in the browser as follows,
<input name="grpAnswers" id="rdoOption1" type="radio" value="rdoOption1"/>
<label for="rdoOption1">
Note: It'll generate label only if you specify some value for Text property of the asp:RadioButton.
So ,I have changed my code as follows,
<asp:RadioButton ID="rdoOption1" runat="server" GroupName="grpAnswers" Text=" "/>
My Javascript code to set Text for that asp:RadioButton is as follows,
document.getElementById("rdoOption1").nextSibling.innerHTML = "someText";
This one worked for me.Thanks to all those who spent their valuable time in answering my question. :)
ASP.Net controls are server side controls and not client side controls like HTML.
Their actual ID's get generated during the run time not before hand.
So, your syntax should be some thing like:
document.getElementById("<%= rdoOption1.ClientID %>").innerHTML = "sometext";
Check out this post: how-to-change-the-text-of-a-radio-button.
I don't think you can change the text using innerText of a radio button.

How to get the id of a field in jquery?

I have a one page then the page are composed of one .aspx file and one .ascx file.
Now in .ascx file I have declared a textbox as shown below.
<asp:TextBox runat="server" ID="OrderName" MaxLength="50" Key="OrderNameText" meta:resourcekey="OrderNameResource1">
Now I want to get the ID of this Textbox from my javascript, so i tried $("#OrderName") but it won't work.
As I check the code in the firebug I noticed that the id of this textbox is "ctl00_ctl00_contentPlaceHolderBody_contentPlaceHolderBelowFramedContainer_ucOrderName_OrderName". It has been appended by some words.
So how to get the id in this given case?
Thanks
Jason
Access it via ClientID or you can specify ClientIDMode to static while declaring your ASP.Net Control
alert($("#'<%=OrderName.ClientID %>'").val());
Use the below code
var journalTextBoxId = '<%= this.OrderName.ClientID %>';
var journalId = $("#" + journalTextBoxId).val();
If you want the exact ID of your controls try this:
var $ID = $this.find('#<%= OrderName.ClientID %>');
If you using visual studio 2010 then you use like this
<asp:TextBox runat="server" ID="OrderName" ClientIDMode="Static" MaxLength="50" Key="OrderNameText" meta:resourcekey="OrderNameResource1"></asp:TextBox>
when you use like this then your text box id will not change like below
"ctl00_ctl00_contentPlaceHolderBody_contentPlaceHolderBelowFramedContainer_ucOrderName_OrderName"
so you should use ClientIDMode="Static" with your textbox and in jquery use like below
$("#OrderName")
i think this will help you.
In the User Control, create a public property using C# like:
public string OrderNameClientID { get { return this.OrderName.ClientID; } }
In the JS of the current page access it like:
var ID = document.getElementById('<%= this.ucOrderName.OrderNameClientID %>');
Or you can simply do something like:
var ID = document.getElementById('<%= this.ucOrderName %>_OrderName');

How to set the text of a button using JScript?

I'm trying to set the text on a button in a JScript function. I am using a JScript function like this...
function myfunction(sender, eventArgs)
{
wanted_text = window.source_text_field.get_displayText();
if (document.getElementById("my_span_element") != null)
{
document.getElementById("my_span_element").innerText = wanted_text;
}
if (document.getElementById("my_button") != null)
{
document.getElementById("my_button").text = wanted_text;
}
}
where the controls concerned are define like this...
<span id="my_span_element" class="some_class"></span>
<asp:Button id="my_button"
runat="server"
class="some_other_class"
text=""
Width="48"
Height="25"
onclick="do_foo"/>
The text in the span element is set correctly but the button is unaffected. I've also tried innerText, Value, Text, and also attempted to use the answer to this question but to no avail.
Can anyone see what I have overlooked?
Change the .value attribute of button:
document.getElementById("my_button").value = "new value";
ASP.Net generates its own IDs for server controls.
You need to write <%= my_button.ClientID %> to get this generated ID.
There are 2 problems here:
First: you use wrong attribute - should be "value", instead of "text"
Second: document.getElementById("my_button") will not work because ASP.NET assigns it's own ids to controls. If you take a look at generated markup you will notice that id of the element is completely different.
If your javascript is inside of the same .aspx page as <asp:button /> control, you can do like this:
document.getElementById("<%= my_button.ClientID %>").value = "some text";

Set ASP Literal text with Javascript

I have an asp:Literal on my page (which cannot be converted to a Label or any other control) that I need to change the text of via JavaScript. I have the following code that works for a Label. Can anybody help?
<script type="text/javascript">
function changeText() {
document.getElementById('<%= Test.ClientID %>').innerHTML = 'New Text';
}
</script>
<a href="#" onclick='changeText()'>Change Text</a>
<asp:Label id="Test" runat="server" Text="Original Text" />
Thanks
UPDATE:
I cannot change from a literal as the code behind writes HTML/CSS to it for an Information Message e.g:
LITMessage.Text = "<div class='success'>Information Successfully Updated</div>"
<asp:Literal> controls don't create their own HTML tag.
Therefore, there is no element that you can manipulate.
Instead, you can wrap the <asp:Literal> in a <div> tag with an ID.
An ASP.NET Literal doesn't add any markup to the page. Therefore you have to wrap your content in some container so that you can edit it via JavaScript:
Assuming you had the following Literal on the page:
<asp:Literal runat="server" Id="literalControl" />
And were setting the text via code behind (because if you're not, you could just create the span/div in the markup to begin with and not have this issue):
literalControl.Text = "Some text you want to change";
The code behind becomes:
literalControl.Text = "<span id='myId'>Some text you want to change</span>";
And the JavaScript would be:
document.getElementById('myId').innerHTML = 'New Text';
Does the literal contain html markup?
if not, you could wrap the literal control in a div and give it an id. Then use js to replace the text within that div.
in response to your update:
In that case, since you are rendering a div with a class of success, I would use jQuery to update the html in that div...it would be as simple as:
$('.success').html('new html goes here');
Wrap the <asp:literal> control in a <div> and then use jQuery if needed to clear the contents like shown below:
<div id="divMyText">
<asp:Literal ID="MyText" runat="server"></asp:Literal>
</div>
Here is how to clear the text using jQuery:
//Clear the html inside of the div
$("#divMyText").html("");
A Literal is a direct render of text to the page. The only HTML it will render will be the HTML markup you include in the text string you set to the Literal. Instead of using a Literal surrounded by a div (unless you specifically want that functionality) you can use an ASP Label and perform operations on it.

Categories

Resources