Q
Problem solve Get help with specific problems with your technologies, process and projects.

Dynamically change series of HTML controls coming from XSLT in a pop-up window

I am using a pop-up window to display series of information. I just have a placeholder control to which I dynamically add the HTML control, which comes back from my XSLT. For example: My XSLT returns back a table with a label and dropdown ist with different values.

My problem is that when the user selects one of the values, I need to stay within the same pop-up and display the next HTML that comes from my XSLT by passing the value the user selected on the screen. For example: I get a label 'Do you know about us?' and a dropdown list with values 'Yes' and 'No.' If the user selects Yes, then I need to display something corresponding to it. If the user selects No, then I need to display something else.

How can I do this with the same pop-up window? Also, I have to save the previously selected value. How can I do this?
The best bet is to use the XMLHttpRequest object through JavaScript and fetch the next HTML to display, populating a panel with the results. This way, the user has the feeling that everything is happening client-side, and the application runs smoother. On the server side, you can either have an .aspx page whose sole responsibility is to get the next display, without all the <html><head>, etc. tags, or create an IHttpHandler implementation which listens for incoming requests from client-side JavaScript. To use the XMLHttpRequest in a cross-browser fashion, you can do the following:

function getXmlHttpRequest()
{
 if (isMoz)
  return new XMLHttpRequest();
 else
  return new ActiveXObject("Msxml2.XMLHTTP.4.0");
}

I'm assuming the world uses either Internet Explorer or Mozilla, the former being the default option. This may not be the case, but browser sniffing is out of scope for this answer (i.e. how is Moz determined). The simple way is to pick some W3C DOM method (there are plenty that are not implemented by IE), such as:

if (document.implementation.createDocument) isMoz = true;

The XMLHttpRequest allows you to send a GET to the server, and you can pass parameters in the querystring, just like any page would:

var http = getXmlHttpRequest();
http.open( "GET", "GetDetails.aspx?entity=Customer&id=45" );
document.getElementById("divDetails").innerHTML = http.responseText;

The aspx file can process the request at Page load time:

private void Page_Load(object sender, System.EventArgs e)
{
 string entity = Request.QueryString["entity"];
 string id = Request.QueryString["id"];
 
 // Go to the database and get something. 
 // Or simply render a control to send to the output.
 Response.Write("

These are the customer details...</p>"); // Finally avoid rendering the entire page Response.End(); }

The cool way is to implement an IHttpHandler, however ;).

For more information on XMLHttpRequest, see: http://www.xulplanet.com/references/elemref/ref_XMLHttpRequest.html and http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk30/htm/xmobjxmlhttprequest.asp?frame=true&hidetoc=true

Dig Deeper on C# programming language

Have a question for an expert?

Please add a title for your question

Get answers from a TechTarget expert on whatever's puzzling you.

You will be able to add details on the next page.

Start the conversation

Send me notifications when other members comment.

Please create a username to comment.

-ADS BY GOOGLE

SearchCloudComputing

SearchSoftwareQuality

TheServerSide.com

Close