I have a table which is generated by a 3rd party control. This table has only one row and one column. Within this column is html text as follows :
<p>
this is a test</p>
<p>
<input name="amount" type="text" value="this is for amount" /></p>
<p>
this is a test</p>
<p>
<input name="test" type="text" value="this is for test" /></p>
<p>
this is a test</p>
the problem is how to get the value saved inside the html input control ?
I tried the following code but it fails:
t.Rows[0].Cells[0].FindControl("amount");
thanks in advance...
You can use the below snippet to retrieve the required values inside the javascript function:
function getValue()
{
//First method
var val= document.getElementsByName("amount");
alert("Val by Element Name:-" +val(0).value);
//Second method
val= document.getElementById("amount");
alert("Val by element Id:-" +val.value);
//third method
val= document.getElementsByTagName("input");
alert("Val by Tag:-" +val(0).value);
alert("Val by Tag:-" +val(1).value);
}
Assumption: You're aware of the names of the input controls inside the table obtained by the 3rd party tool.
Do you mean when the form is posted back? In that case, just use
Request["amount"]
to get the value.
Since it is a 3rd party control, it should give you access to the values of the controls throught the properties of the controls. Check the properties and documentation.
Use a HiddenControl and jQuery.
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(documet).ready(function(){
var inputVals = '';
$('#yourThirdPartyTableID').find('input[type=text]').each(function() {
inputVals = inputVals + $(this).val() + ', ';
});
$('#<%= YourHiddenControlID.ClientID %>').val(inputVals);
});
</script>
The above code will insert values of all text inputs from your third party table into the hidden control separated by a comma. You can change the comma into anything else to make it easier to split on server side code.
If you're looking for the value of the input with "name" of "amount", do the following:
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(documet).ready(function(){
$('#<%= YourHiddenControlID.ClientID %>').val($('#yourTableID').find('[name="amount"]').val());
});
</script>
There is no straight forward method to retrieve the value of an input control unless you say runat="server".
My suggestion is to use the runat="server" tag and try getting the value using VALUE property.
Otherwise you can use Page.FindControl('') and see whether the control is returning other than null...then i feels that will work.
if you are using ajax or master-content page then the controls id will be not the one you given....so make sure you are giving the correct id itself (using view source of the page)
Related
I'm creating elements dynamically based on SQL data server side.
I want to also edit some of those element's attributes after their creation.
They way I'm trying to go about this is by generating a string with the elements and inserting it into a div's innerHTML:
client side:
<div id=master runat="server"></div>
server side:
string textToDiv = "<div id='" +num +"'><ul><li></li><li></li></ul></div>";
master.innerHTML = textToDiv;
Looks something like this in chrome:
<div id="master" runat="server">
<div id='1'>
<ul>
<li></li>
<li></li>
</ul>
</div>
<div id='2'>
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
Now, I want to change one of the child div's attributes. How do i go about doing that?
All I found on the internet is for more static uses using the method I applied when changing the 'master' div's innerHTML attribute. Is there a get() function or something similar to document.getElementByID() I can use?
a better way to solve this, to just simply place your script under the html code, but still in the body, this will make sure, the script is just loaded, when everything was rendered to the screen, with this, you can instantly access the elements and you dont have to use the window.onload eventlistener
I think you need to use the onload event and then use a function for create the Element.
window.onload() => {
element = document.createElement(" ");
element.setAttribute(" ");
element.innerHTML = ' ';
document.getElementById(' ').appendChild(element);
}
I hope it's can help you
Update and my solution:
I ended up just changing the attribute when generating the string. Used if() statements to change only the element I wanted.
Also, I moved the whole thing into a function and I'm calling the function on page load.
That way I can update the content without reloading the page.
I have some troubles with a text box input control value on an ascx page. It's value is somehow always html encoded, and I don't know how it can be disabled.
For example when the value contains a < character it is always converted to <. The strange thing is, it only happens on fields like Name.Lastname (which have a child property). My first thought was it could be caused by the Html extension method
Html.TextBoxFor(m => m.Name.LastName, new { maxlength = "100" })
but this is not the case, because when I use the html input directly, it's value is still encoded:
<input id="Name_LastName" maxlength="100"
name="Name.LastName"
type="text" value="<%= Model.Name.LastName %>" />
Does somebody know how the html encoding of text box values for fields like Name.LastName (with a child property) can be disabled?
After more research I found out that it was caused by a javascript function which variables were initialized using the <%:, and this function was used to initialize the text boxes. So in the end it had nothing to do with child properties. I changed the <%: with <%= in the javascript part:
var lastName = "<%: Model.Name.LastName %>";
in
var lastName = "<%= Model.Name.LastName %>";
I have an input tag having some text in it. Now I would like that onclick of a button the text will be changed.
For some reason it is not being changed.
This is the input tag:
<input id="network_table" type="text" value="oldValue" runat="server"/>
the following is the way I am trying to change the value of the input tag:
network_table.Value = "newValue";
network_table.Text = "newValue";
Bind the "onclick" event and apply this these methods:
In jQuery :
$('#network_table').val("your val");
http://docs.jquery.com/Val
Javascript
document.getElementById('network_table').value = "your val";
you can do it serverside with "OnClick" event on button, assuming your controls are defined with runat="server" attribute
http://msdn.microsoft.com/fr-fr/library/system.web.ui.webcontrols.button.onclick(v=VS.80).aspx
You could try and assign some meaningless class to the input and use that as a reference point to get in hold of the input field.
<input id="network_table" type="text" value="oldValue" runat="server" class="myInputField"/>
$('.myInputField').val('newValue');
Using the id will not work because you are using the 'runat=server' and it makes the id unavailable on client side and you would need to get the unique id first to be able to get in hold of it. This is a lot cleaner way but you need to make sure not to use the class elsewhere to avoid ambiguous results.
Here is a jsfiddle example which does what you want but on load.
http://jsfiddle.net/yX5ze/
I have got a literal control on page (with some data on it). i want to access it in javascript and want to put some text on it. please tell me how can i access literal control in JavaScript. I was trying with following code-
<asp:Literal ID="lblPerInstanceListing" runat="server"></asp:Literal>
Javascript:
var value= document.getElementById('<%=lblPerInstanceListing.ClientID %>')
I am getting null value return by this.
An ASP.NET Literal control does not by itself insert any HTML into a webpage. Your Literal control is a placeholder for text or HTML you will set in your code behind.
You should wrap your literal in a DIV or SPAN and give that an ID and reference that DIV or SPAN in the JavaScript
WebForm:
<span id="yourId"><asp:Literal ID="lblPerInstanceListing" runat="server"></asp:Literal></span>
JavaScript:
Solved by this code.
var value= document.getElementById('yourId').innerText;
<span id="yourId" runat="server"></span>
js :
var value= document.getElementById('yourId').innerHTML;
It is not better then use this code??
You can put in span enableviewstate to false if You need.
It's a Literal. It renders literal HTML to the page. It doesn't render any container matching the ClientID that you can access on the client side.
Either put a div or span in the literal with an ID you can use, or use e.g. a Label or Panel control that does render a wrapping span or div you can use.
I am passing viewdata into my aspx page like so:
//Controller
List<user> userList = Data.GetAllUsersForCompany(companyId);
List<SelectListItem> dropDownList = FormatUserList(userList);
ViewData["UserList"] = userList;
ViewData["FormattedUserList"] = dropDownList;
return View();
I am populating a drop down with the name of a user, which I want to bind with Jquery so that when the user changes the drop down this in turn updates the input fields with the current selected user.
The ASPX page:
<p>
<%= Html.DropDownList("userSelected", (List<SelectListItem>)ViewData["FormattedUserList"] )%><br /><br />
<%= Html.TextBox("userFName")%><br />
<%= Html.TextBox("userLName")%><br />
<%= Html.TextBox("userEmail")%>
</p>
I hook up Jquery to detect the drop-down changes which work, but how do I manipulate the input boxes with data?
<script type="text/javascript">
$(document).ready(function() {
$("#userSelected").change(function() {
var pkUser = $("#userSelected").val();
alert("Current UserID is " + pkUser); //works up to here just fine
$("#userFName).val() = ViewData["UserList"].Select(x => x.pkUser == valueOfDropDown).fName; ???
.
.
.
});
});
</script>
Am I doing things completely wrong? Can you point out what the best practice is for this scenario. If I can get away from having postbacks that would be ideal.
Soul (MVC newbie)
It looks like you are mixing your javascript and c#, remember that the javascript only executes client side, and the c# only executes server side. That being said, if you want to have some of your viewdata hanging around for your javascript to use on the client side, you need to encode it in the page somewhere the javascript can get at it. The easiest way I can think of is to use a JavaScriptSerializer and embed the values into your javascript, kind of like:
<%
var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
%>
<script type="text/javascript">
var users = <%= serializer.Serialize(ViewData["UserList"]) %>;
//Use the users variable now with a copy of the view data.
</script>
In most cases, it is better to have static javascript files. It's not universally the case, but its often very hard to manage code that's parsed together at runtime. So rather than trying to write serverside code in your script tags (like the line that seems to be breaking), you should try writing the data to a hidden part of the page, perhaps, and then getting that data with jQuery.
You should be able to output a hidden form element with the value of any data that you want to use later on.
Say your output was:
<input type="hidden" id="fname_store" name="fname" value="soul" />
This could also be a single variable that is set in an inline script if you find this method messy:
<script type="text/javascript">
var data = <% serialized_data_from_the_server_side %>;
</script>
Then your line that breaks would be something like this:
$('#userFName').val($('#fname_store').val());
Notice that you are missing a quote in your code at the end of the selector, and also notice that the jQuery val() function is set by passing it a value, not setting it equal to a value.
Best of Luck!
You can always update your Action.
List<user> userList = Data.GetAllUsersForCompany(companyId);
List<SelectListItem> dropDownList = FormatUserList(userList);
return Json(new { UserList = userList, FomattedUserList = dropDownList} );