Develop Reference

How to set dropdown value placed inside <tr> tag using its value using jQuery

I'm using a dropdown list inside tag
<td id="tdStatus" runat="server">
<asp:DropDownList ID="ddlStatus" runat="server" AutoPostBack="false">
</asp:DropDownList>
</td>
Now I need to select a particular item based on value returned from database.
I stored the value in variable ddl.
How can I identify this dropdown and select value using jQuery..?
I used the following code also, but not working..
$('#dropdownID').val("Value to be selected");

You should try this one:
$('#<%=ddlStatus.ClientID%>').val("Value to be selected");
The id of the dropdown in the markup that is generated by asp.net's view engine differs from the id you define in your markup, in order to access your server side control in your code behind class.

You are having ID attribute for td element. you can use:
$('#tdStatus select').val('set new val');

getElementByID with dynamic ID

Hi I have a problem with my javascript within an ASP SharePoint web part page. The page is built the same as any other ASP page so the fact that its hosted within SharePoint shouldn't make any difference.
The problem is with my javascript within the page. I have Html Table made up of 8 cells. For each of these cells I am displaying a different div with different data within it onmouseover.
The problem comes with the ID for the Divs that I am trying to display. The Divs ID is changed at runtime but also changes daily so cant be inputted manually.
HTML:
<div id="Main" style="display: none;
<div id="hover1" runat="server" style="display: none">
Test
</div>
</div>
<table id="Table3" runat="server" >
<tr id="Tr8" runat="server" >
<td id="status1" runat="server" onmouseover="getDataXML('hover1')" onmouseout="hideDiv('hover1')">
Received
</td>
</tr>
</table>
The id 'hover1' at runtime is replaced with something like 'ctl00_m_g_6ddac285_ceb9_4b5a_9095_c4b216cf7dfd_ctl00_hover1'
Javascript:
function getDataXML(getID) {
document.getElementById('Main').style.display = "block";
document.getElementById(getID).style.display = "block";
};
The javascript works if I take the ID which is generated and hard code it but the ID changes daily meaning it becomes a problem. Any help I would greatly appreciate
Regards,

Set clientIdMode = static to the element
<div id="hover1" clientIdMode="static" runat="server" style="display: none">

you have to pass clientId like this:
onmouseover="getDataXML('<%=hover1.ClientID %>')"
or alternatively set ClientIDMode to Static, but in that case if you change div id in aspx, you have to explicitly change where you have used Id and it will be difficult to catch becuse there will be no compile time error.

Returning "full" clientID in code behind (asp.net VB)

So I have an issue with accessing the correct clientID attributes of an ASP.NET user control.
My main question is that I'm trying to return the full ClientID field of a control using VB code-behind. the expected value for my control (and what shows up in browser) is:
ctl00_ContentPlaceHolder1_ctl05_txtAnswer
But I'm only getting "txtAnswer" in code-behind.
I've found something similar on SO here:
ASP.Net: ClientID not correct in code-behind of a user control
This post suggests adding the onClick event during onPreRender or onPageLoad, etc, But I have other circumstances:
My user control (text box) is designed to 'pre-load' values from a database (if the same user has previously tried to access the form), or if isPostBack == true.
Because I'm reading from a DB for answers, and because there JS function (which uses the getElementByID() JS function) the control needs to access user data ...
Currently the control has a member function loadQuestions(key parameters) that loads specific questions from the database.
More context: I'm updating some older code that had hard-coded (in client ASPX file) control elements, but now the controls are being built dynamically at runtime (i.e., inserted into a placeholder in client page).
I've tried messing around with different ClientIDMode settings (per http://msdn.microsoft.com/en-us/library/system.web.ui.clientidmode.aspx) but no dice so far... I'm using .NET 4.0, so I understand I can directly edit the ClientID via "Static" clientIDmode, and I haven't tried that yet though...
Right now I'm thinking I should "front-load" all of the content-defining stuff into a constructor for the object, which would then apply all the content-defining stuff, and then establish the onClick attribute after the control's data have been populated?
For reference:
Here is the ASP markup for the Control:
<%# Control Language="VB" AutoEventWireup="false" CodeFile="RBHorizWithText.ascx.vb" Inherits="Apps_Controls_RBHorizWithText" %>
<%# Register Assembly="txtBoxLengthValidator" Namespace="txtBoxLengthValidator" TagPrefix="cc1" %>
<asp:Panel ID="pnlPreamble" runat="server">
<div id="divPreamble" runat="server" style="padding-bottom:15px"></div>
</asp:Panel>
<asp:Panel ID="pnlQuestion" runat="server">
<div id="divQuestion1" runat="server"></div>
<div id="divRBL" runat="server" style="padding-left: 20px">
<asp:Table ID="tblAnswers" runat="server" CellPadding="0" CellSpacing="0">
</asp:Table>
</div>
<div id="divQuestion2" runat="server" style="padding-left: 20px; padding-top: 10px"></div>
<div id="divAnswer2" runat="server" style="padding-left:20px; padding-top: 5px; text-align: left" align="left">
<div>
<cc1:TextBoxLengthValidator
ID="tblvAnswer"
ControlToValidate="txtAnswer"
runat="server"
ErrorMessage="Maximum length is 255 Characters"
MaximumLength="255"
Display="Dynamic"
ForeColor="Red">
</cc1:TextBoxLengthValidator>
</div>
<div><asp:TextBox ClientIDMode = "Predictable" ID = "txtAnswer" runat="server" Width="600px" Rows="3" TextMode="MultiLine"></asp:TextBox></div>
</div>
</asp:Panel>
And here is the function from the VB Code-behind (edited for brevity) that calls the JS function...
Public Sub LoadQuestions(ByVal objQRBL As Question, ByVal objQText As Question, ByVal dicAnswers As Dictionary(Of Integer, QuestionAnswer), ByVal LoadAnswers As Boolean)
'This is a function from RBHorizWithText user control that has two member controls: a radio button and a text box (first 2 params).
'dicAnswers are the user's answers stored either in HttpContext.Current, or as global memory objects...
_lstRadioButtons = New List(Of RadioButton)
Me.tblAnswers.Rows.Clear()
'txtAnswer is a member control of type textBox...
Me.txtAnswer.Text = String.Empty
'.
'Stuff to build out <tr> and <td> question display elements to format/store control...
'.
Dim trw As New TableRow
Dim iCount As Integer = 0
For Each objA As QuestionAnswer In objQRBL.AnswerList
Dim objRB As New RadioButton
objRB.ID = objA.QuestID & ";" & objA.AnswerID
objRB.GroupName = "rb" & objA.QuestID
objRB.Text = objA.AnswerText
'This is the main area where I'm having trouble:
' At runtime, Me.txtAnswer.ClientID should evaluate to: "ctl00_ContentPlaceHolder1_ctl05_txtAnswer"
' Instead I'm getting: "txtAnswer"
If objQText.ParentReqResponseCode.IndexOf(";" & objA.ResponseCode & ";") <> -1 Then
objRB.Attributes.Add("onclick", "txtBoxEnable('" & Me.txtAnswer.ClientID & "');")
Else
objRB.Attributes.Add("onclick", "txtBoxDisable('" & Me.txtAnswer.ClientID & "','" & objQText.InnerText & "');")
End If
tcl.Controls.Add(objRB)
trw.Cells.Add(tcl)
_lstRadioButtons.Add(objRB)
iCount += 1
Next
'Other stuff to handle formatting and behavior of other controls...
End Sub
and here are the JS functions, which exist on the master page for the project:
function txtBoxEnable(elID) {
var el = document.getElementById(elID);
el.style.backgroundColor = '#f4df8d';
el.value = '';
el.disabled = '';
}
function txtBoxDisable(elID, innerText) {
var el = document.getElementById(elID);
el.value = innerText;
el.style.backgroundColor = '#ffffff';
el.disabled = 'disabled';
}
Thanks Very Much!
-Lewis

I've tried messing around with different ClientIDMode settings (per
http://msdn.microsoft.com/en-us/library/system.web.ui.clientidmode.aspx)
but no dice so far... I'm using .NET 4.0, so I understand I can
directly edit the ClientID via "Static" clientIDmode, and I haven't
tried that yet though...
Try it, it will solve your issue completely. Whatever ID you assign it on the markup will be the ID you retrieve on the server side. No extra garbage prepended to the ID.

How can I hide/unhide a form?

I'm playing around with jquery and made a form that submits information without a page refresh but in the tutorial I followed it must first display a form for people to edit but what I want to do is slightly different.
I want to display a users profile page and then have a little edit link beside each item which causes a text field to appear if they click edit. I believe I can submit the form without a refresh but how can I have a form appear when the 'edit' button is clicked without refreshing?
Any idea of how I can accomplish this or even better what should I be searching to learn how to do this? I went through the sample items on jquery site and none of them seemed to hide/unhide by clicking.

Here is a quick example of how I'd handle the concept, I'd follow it up with posting and validation and all else a little server-side scripting etc, but this can act as your stepping stone overall. Pretty much all you got to remember is javascript/jquery is all smoke and mirrors since its all handled client-side you essentially need to work with what you have on screen be it hidden or otherwise.
In this case you have 2 elements one showing by default while the other hides, you make a logic that hides one over the other when one is chosen, and do what you need to respectively with either.
<div id="wrapper">
<div id="container">
<div id="storedvalue"><span>Hello</span> [edit]</div>
<div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [save]</div>
</div>
</div>
<script type="text/javascript">
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});
</script>
DEMO

A HTML form cannot be submitted without refreshing the page. However, JavaScript (and by extension, jQuery) can be used to submit similar GET or POST requests. You can also use jQuery's .append method to insert the necessary markup to create inputs on-the-fly. jQuery can also be used to access the values that have been inputted to the field (usually done by id).
Something I am working on simmilar to what you need:
(this particular code takes some input from a visible form, and aggregates it into an invisible one for later use)
jQuery('#submitButton').click(function(){
jQuery('#prev_request').append('<input type="hidden" name="sort_order" value="'+jQuery("input[#name=sort_order]:checked").val()+'" />');
jQuery('#prev_request').append('<input type="hidden" name="sort_by" value="'+ jQuery("#sort_by option:selected").val() +'" />');
});

I think the simplest thing to do would be something like this:
HTML
<form id="form1" style="display: none;">
</form>
<a id="editButton" href="javascript:void(0)">Edit</a>
<a id="closeButton" href="javascript:void(0)" style="display: none;">Close</a>
JavaScript (be sure to include jQuery on your page)
$(function() {
$("#editButton").click(function() {
$("#form1").show();
$("#editButton").hide();
$("#closeButton").show();
});
$("#closeButton").click(function() {
$("#form1").hide();
$("#editButton").show();
$("#closeButton").hide();
});
});
It's also easy to add an expanding transition effect with the show() and hide() methods. Simply pass the desired transition duration to the function (in milliseconds) like this:
$("#form1").show(500);

Lostsoul,
I would utilize an asp DataGrid inside of an UpdatePanel control:
.ascx:
<asp:UpdatePanel ID="yourUPpanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DataGrid ID="yourDG" runat="server" AutoGenerateColumns="False" CellPadding="2" AllowSorting="False" AllowPaging="False" EnableViewState="false" onItemCommand="yourDG_CellClick">
<FooterStyle CssClass="cssFooter"></FooterStyle>
<AlternatingItemStyle CssClass="CssAltItem"></AlternatingItemStyle>
<ItemStyle CssClass="cssGridItem"></ItemStyle>
<HeaderStyle CssClass="GridHeader"></HeaderStyle>
</asp:DataGrid>
<asp:Panel ID="yourAdditionalStuff" runat="server" Visible="false">
<table>
<tr>
<td>
<asp:TextBox ID="yourTXT" runat="server" Width="100px"/>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
.vb
Public Sub yourUPpanel_Load(ByVal sender As Object, ByVal e As EventArgs) Handles yourUPpanel.Load
If cnADO Is Nothing Then blahblah.getConnection("yourserver", cnADO) 'whatever the case may be here
Try
Dim da As SqlDataAdapter
Dim cmd3 As New SqlCommand
cmd3.Connection = cnADO
cmd3.CommandType = CommandType.StoredProcedure
cmd3.CommandText = "SP to populate GRID" 'whatever the case may be here
daPeople = New SqlClient.SqlDataAdapter
daPeople.SelectCommand = cmd3
If yourDG.Columns.Count <= 0 Then
Dim btnc As New ButtonColumn
btnc.ButtonType = ButtonColumnType.LinkButton
btnc.HeaderText = "Edit"
btnc.DataTextField = "primarykey"
btnc.DataTextFormatString = "<img border='0' src=" & ResolveUrl("~/images/edit.gif") & ">" 'whatever the case may be here
btnc.CommandName = "Edit"
btnc.ItemStyle.HorizontalAlign = HorizontalAlign.Center
yourDG.Columns.Add(btnc)
Dim bc As New BoundColumn
bc = New BoundColumn
bc.DataField = "sqlColumnName"
bc.HeaderText = "First"
yourDG.Columns.Add(bc)
End If
Dim dt As New DataTable
yourDG.Fill(dt)
yourDG.DataSource = dt
yourDG.DataBind()
'lbtnEditAddPerson.Visible = True
Catch ex As Exception
Finally
If Not cnADO Is Nothing Then
If cnADO.State = ConnectionState.Open Then
cnADO.Close()
End If
End If
End Try
End Sub
Protected Sub yourDG_CellClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)
Dim cmd As String = e.CommandName.ToString.ToUpper
If cmd.ToUpper = "EDIT" Then
Using cnADO As SqlConnection = New SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings("yourserver").ToString) 'whatever the case may be here
Using scmd As New SqlCommand("", cnADO)
scmd.CommandText = "YOURTEXTHERE"
Using dr As SqlDataReader = scmd.ExecuteReader()
If dr.Read Then
'fill textbox for load
End If
End Using
End Using
End Using
yourAdditionalStuff.Visible = True
ElseIf cmd.ToUpper = "ANOTHERCOMMAND" Then 'if you want to...allows for extensibility (would need another column tho)
End If
End Sub
Note that this is a framework, but should be very close to what you need (or at least give you things to search on). I've actually used this approach, so I can confirm that it does work. If you aren't using a database (i.e. if you won't need to save/load what the user puts in your appearing textbox) then it should simplify down. This should get you Googling though. Hope it helps!
-sf
EDIT: Per Chris' comment, I think:
function hideOnClick(){
var d = document.getElementById('<% =yourtextbox.ClientID %>');
if(d.style.display == "none"){
d.style.display = "inline";
}else{
d.style.display = "none";
}
}
might help you if all you need is the client-side javascript to toggle show/hide. All you'd need to do is attach it to your edit button.

asp.net get html controls in code behind

If I alter the html on a page using JavaScript, how can I access those changes in my ASP.NET code behind?
I found some dhtml "drag and drop" code online (http://www.dhtmlgoodies.com/scripts/drag-drop-nodes/drag-drop-nodes-demo2.html), but after moving list items from one control to another, I don't know how to "access" each control in the code behind so I can save the list items in each control.
I tried using the HTML Agility pack, but it seems like I'm only able to access the unaltered html - meaning all the controls are empty.
Any help/suggestions are appreciated. Or any suggestions as to a better way of accomplishing this are welcome (jQuery? Ajax Toolkit?).
EDIT:
Here's some code. I'm able to populate an ASP Label control (_saveContent), from the JavaScript function saveDragDropNodes, with the "ul" ID and the corresponding "li" controls that I've dragged and dropped. When clicking the save button however, my Label control no longer contains any Text...
function saveDragDropNodes() {
var saveString = "";
var uls = dragDropTopContainer.getElementsByTagName('UL');
for (var no = 1; no < uls.length; no++) { // LOoping through all <ul>
var lis = uls[no].getElementsByTagName('LI');
for (var no2 = 0; no2 < lis.length; no2++) {
if (saveString.length > 0) saveString = saveString + ";";
saveString = saveString + uls[no].id + '|' + lis[no2].id;
}
}
document.getElementById("<%=_saveContent.ClientID %>").innerHTML = saveString.replace(/;/g, ';<br>');
}
<div id="dhtmlgoodies_dragDropContainer">
<div id="dhtmlgoodies_listOfItems">
<div>
<p>
Available Items</p>
<ul id="allItems" runat="server">
</ul>
</div>
</div>
<div id="dhtmlgoodies_mainContainer">
<div>
<p>
Group 1</p>
<ul id="_ul1">
</ul>
</div>
<div>
<p>
Group 2</p>
<ul id="_ul2">
</ul>
</div>
</div>
<asp:Label ID="_lSave" runat="server" ForeColor="Red" EnableViewState="false" />
</div>
<div id="footer">
<span onmouseover="saveDragDropNodes()">
<asp:Button ID="_btnSave" runat="server" Text="Save Groups" OnClick="_btnSave_OnClick" /></span>
</div>
<ul id="dragContent">
</ul>
<div id="dragDropIndicator"></div>
<asp:Label ID="_saveContent" runat="server" />
Code Behind:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
If Not Page.IsPostBack Then
GetItems()
End If
End Sub
Private Sub GetItems()
Dim dt As DataTable = DbHelper.GetDataTableForSP("GetListOptions")
Dim index As Integer = 1
For Each _row As DataRow In dt.Rows
Dim _li As New HtmlGenericControl("li")
_li.ID = _row("ClassId")
_li.Attributes.Add("runat", "server")
_li.InnerHtml = String.Format("{0}) {1} {2}", index, _row("ClassId"), _row("ClassDescription1"))
allItems.Controls.Add(_li)
index += 1
Next
End Sub
Private Sub SaveGroups()
Dim str As String = _saveContent.Text /*No text here */
_lSave.Text = "Groups Saved!"
GetItems()
End Sub

The only content posted back to the server are values from form fields. See: Form submission.
You have two options:
Make use of ajax to pass the HTML from the client to the server.
Use a hidden input field to store the HTML just before the page posts back.
Here is an example of the latter:
Markup
<div id="content"></div>
<asp:HiddenField ID="hiddenContentField" runat="server" />
<asp:Button ID="button1" runat="server" Text="Post back" OnClick="button1_Click" OnClientClick="storeContent();" />
Script
function storeContent() {
$('#<%= hiddenContentField.ClientID %>').val($('#content').html());
}
Any changes made in the content element will then be stored in the hidden input element and sent up to the server on postback.
Then in the code behind you can access the HTML passed up like so:
protected void button1_Click(object sender, EventArgs e)
{
string html = hiddenContentField.Value;
}
Hope this helps.

First of all, HTML code changes will not posted to Server by default. To achieve the drag-n-drop element, please follow the steps below
Uniquely name(id) the Container panels and child elements in it.
Using jQuery/JavaScript track the child element movements from on container panel to another and store the id of element's old parent panel and new parent in json/dictionary object.
While clicking on save button post the tracked dictionary object to server.
On server-side, get the posted json object using Page.Request.
Using the id's stored in json object, Save the list items.
Hope this will helps.

Specify runat="server" on the controls you need to access from code-behind. Also, remember to use ClientID to reference server controls in JavaSript:
var el = document.getElementById("<%=MyElement.ClientID%>");

First, add the jQuery lib to your page header. Add it from the Google CDN, as most of your users should have it cached.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Then, after the JS has modified the HTML, call sendToServer and it will post the html you select to the servlet you enter.
function sendToServer(){
var myhtml = document.getElementById('theIdOfTheContainer').innerHTML;
$.post("http://yoururlhere.com",myhtml,function(responseFromServer){
//some code to handle the response from the server on the client.
});
}
$('#buttonid').click(sendToServer);
I am having you use jQuery for this, as it is a very powerful AJAX library. jQuery does three things extremely well, and one of them is AJAX. Inside the post method, the third parameter is an anonymous function. That is the function that gets called once the data has successfully been sent to the server. So, yeah. Try it out, let me know.