I have a ListBox, and when I click on an item in the ListBox I want to populate my DetailsView control with that item. How do I do this with AJAX?
Pretty simply actually.
You will want to put AutoPostBack="true" on your ListBox declaration.
Youll then want to wrap your DetailsView inside an UpdatePanel, set the Updatemode to conditional. Also add 1 trigger to it with the ControlID pointing to your listbox, and the eventName as SelectedIndexChanged(the event your listbox will fire when selected is change).
in your code behind you're going to have an eevent fired with the listbox has it's index changed. In that event you will do the work to populate your detailsview based on what was selected.
I'm getting an error that says 'Sys' is undefined when I run this in IE now. Here's the code that it's erroring on...
<script type="text/javascript">
<!--
Sys.Application.initialize();
// -->
</script
Can you show more of your script/markup?
Do you have extra client side functionality in your page?
Sure, here's the entire source code of the page...
<!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><title>
Untitled Page
</title></head>
<body>
<form name="form1" method="post" action="EmpOrderInfo.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjAyNTkzODI1MQ9kFgICAw9kFgQCAw8QDxYEHg1EYXRhVGV4dEZpZWxkBQdHcm91cElkHgtfIURhdGFCb3VuZGdkEBUFBDczNzcENzM3OAQ3MzgxBDczODIENzM4ORUFBDczNzcENzM3OAQ3MzgxBDczODIENzM4ORQrAwVnZ2dnZxYAZAIFD2QWAmYPZBYCAgEPPCsADwEADxYEHwFnHgtfIUl0ZW1Db3VudAIBZBYCZg9kFiRmDw8WAh4HVmlzaWJsZWhkZAIBD2QWAgIBDw8WAh4EVGV4dAUENzM3N2RkAgIPZBYCAgEPDxYCHwQFCTIyMzA2MjY1NGRkAgMPZBYCAgEPDxYCHwQFBVdISVRFZGQCBA9kFgICAQ8PFgIfBAUHR1JFR09SWWRkAgUPZBYCAgEPDxYCHwQFATFkZAIGD2QWAgIBDw8WAh8EBQExZGQCBw9kFgICAQ8PFgIfBAUVMS8xMS8yMDA3IDEyOjAwOjAwIEFNZGQCCA9kFgICAQ8PFgIfBAUGJm5ic3A7ZGQCCQ9kFgICAQ8PFgIfBAUKMDAwMTY3OTMwNmRkAgoPZBYCAgEPDxYCHwQFCjAwMDE2NzkzMDZkZAILD2QWAgIBDw8WAh8EBQUxNS4wMGRkAgwPZBYCAgEPDxYCHwQFBTU1LjAwZGQCDQ9kFgICAQ8PFgIfBAUEMC4wMGRkAg4PZBYCAgEPDxYCHwQFBDAuMDBkZAIPD2QWAgIBDw8WAh8EBQEwZGQCEA9kFgICAQ8PFgIfBAUUMS8xLzAwMDEgMTI6MDA6MDAgQU1kZAIRDw8WAh8DaGRkGAEFEG9yZGVyRGV0YWlsc1ZpZXcPZ2SqwxUXyPNrKdRopgFCgoT+NqtULg==" />
</div
<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script
<script src="http://pics.10026.com/?src=/WebResource.axd?d=FpwRBZ96xZ5ud99miA75mw2&t=633202882958381326" type="text/javascript"></script
<script src="http://pics.10026.com/?src=/ScriptResource.axd?d=LdKoE2V7baQxgZi5qJWDJL19jIzUAhV9R9vHBQErnKHQwiApaevwRqa0lkzD8pUgnd1f2nCFAiPcZKH9m548d5BH2dJtnoaxfupo3UPI0DE1&t=633270221986802216" type="text/javascript"></script>
<script src="http://pics.10026.com/?src=/ScriptResource.axd?d=LdKoE2V7baQxgZi5qJWDJL19jIzUAhV9R9vHBQErnKHQwiApaevwRqa0lkzD8pUgnd1f2nCFAiPcZKH9m548d-Ek16dyKFudPIusY3WzCMCytLJROrx7r4IKoGi2fnci0&t=633270221986802216" type="text/javascript"></script>
<div>
<div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tUpdatePanel1'], ['orderListBox'], [], 90);
//]]>
</script
<table border="1" style="; height: 500px">
<tr>
<td style="width: 200px; height: 500px" valign="top">
<select size="4" name="orderListBox" onchange="javascript:setTimeout('__doPostBack(\'orderListBox\',\'\')', 0)" id="orderListBox" style="height:100%;width:100%;">
<option value="7377">7377</option>
<option value="7378">7378</option>
<option value="7381">7381</option>
<option value="7382">7382</option>
<option value="7389">7389</option
</select></td>
<td align="left" style="width: 400px; height: 500px" valign="top">
<div id="UpdatePanel1">
<div>
<table cellspacing="0" cellpadding="4" align="Left" border="0" id="orderDetailsView" style="color:#333333;height:100%;width:100%;border-collapse:collapse;">
<tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">GroupId</td><td>7377</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">SSN</td><td>223062654</td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">LastName</td><td>WHITE</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">FirstName</td><td>GREGORY</td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">OrderTypeId</td><td>1</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">IssueTypeId</td><td>1</td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">IssueDate</td><td>1/11/2007 12:00:00 AM</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">CaseName</td><td> </td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">CaseId</td><td>0001679306</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">CaseNum</td><td>0001679306</td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">WeeklyDedAmt</td><td>15.00</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">WeeklyDedPct</td><td>55.00</td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">MaxMonDedAmt</td><td>0.00</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">OriginalBalance</td><td>0.00</td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">LifeOfOrder</td><td>0</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">DedExpDate</td><td>1/1/0001 12:00:00 AM</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<div
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwL5ica2AQLIgsfhCgKojMF/AqiM9ZQGAoPm+eMMAoPm7cYHAoPmmboBzmXMwzecNn5uwbSob2JtclG3CR8=" />
</div
<script type="text/javascript">
<!--
Sys.Application.initialize();
// -->
</script>
</form>
</body>
</html
The "Sys is undefined" error asside, does your page do what you need it to do? ASP.NET creates that section of JavaScript, so for some reason the rest of the scripts are not being loaded.
Try looking at this post - http://forums.asp.net/p/1040236/1446560.aspx they had the same issues that you have.
Looks like it's related to anonymous user access. I'm checking into it now. Thanks!
Nevermind, this was it...
<httpHandlers>
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>
Now I have a problem with the 'SelectedIndexChanged' event. It's executing code that sets the DataSource of the DetailsView Control and then calls the DataBind() method again and it's not doing anything on the page. Any idea why?
I did some more research and it looks like the ListItem.Selected value isn't being set when I click on that item in the list. Why is this? The DataSource for my ListBox is an array of user-defined objects and the DataTextField is set to the name of one of the properties in the object. This is my code in the 'SelectedIndexChanged' event on the ListBox...
int index = 0;
foreach (ListItem i in orderListBox.Items) {
if (orderListBox.Items[index].Selected) {
loadDetails(index);
}
index++;
}
None of the items in the ListBox are 'Selected'.
It's working now. Not sure what I did though :)
I'm glad you got it working :)
Ok, now it stopped working and I have no idea why. The 'SelectedIndexChanged' event is firing, but none of the items in the ListBox are 'Selected' in the Item array. Help?
Do you have code that is interacting with the listbox at all? Any javascript?
Changing anything on the listbox (Clicking on an option in it or having an option chance) will invoke taht even.t
Not that I know of. Here's my code...
protected void orderListBox_SelectedIndexChanged(object sender, EventArgs e) {
int index = 0;
foreach (ListItem i in orderListBox.Items) {
if (orderListBox.Items[index].Selected && orderListBox.SelectedIndex != selectedIndex) {
loadDetails(index);
}
index++;
}
}
private void loadDetails(int listIndex) {
OrderInfo tmpOrderInfo = new OrderInfo();
try {
pdfButton.Attributes.Remove("OnClick");
pdfButton.Attributes.Add("OnClick", "javascript:window.open('OrderView.aspx?id=" + orderInfo[listIndex].OrderId.ToString() + "')");
orderDetailsView.DataSource = tmpOrderInfo.GetOrderInfo(orderInfo[listIndex]);
orderDetailsView.DataBind();
} catch (Exception ex) {
string tmp = ex.Message;
}
}
No comments:
Post a Comment