The wwHoverPanel control lets you make direct HTTP calls in a few ways and capture the raw output. This provides direct access to the HTTP response and lets you decide what to do with the data.

Using the ajaxRequest function

The ajaxRequest function is a wrapper around the more featured wwHttp class, but provides most of the key functionality in a single method call. To make an AJAX callback simply requires a simple call:

ajaxRequest("/default.asp",null,show,onerror);

This makes the call to the specified URL and calls a show function if the call succeeds passing the HTTP result content as single string parameter. You can also specify an second handler that is called if an error of any kind occurs.

The whole sequence looks something like this:

<script type="text/javascript">
function Callback(Result)  // called from an event handler most likely
{
    ajaxRequest("/default.asp",null,show);
}
function show(Result)
{
    alert(Result);
}
function onerror(Error)
{
   alert(Error.message);
}
</script>

ajaxRequest is the simplest way to make a raw callback.

There are two other variations of ajaxRequest: ajaxLoadHtml() which can automatically load retrieved content into an HTML element and ajaxJson() which automatically parses a JSON response into an object/value that is returned to the callback handler.

Using the Client wwHTTP class

ajaxRequest is based on the the JavaScript wwHTTP class which is a thin wrapper around the XmlHttp object. It provides a little more control over callbacks as it is an object, but realistically ajaxRequest is probably all you typically need.

Here's similiar code as the code above using wwHttp:

function wwHttpSample()
{
   var Http = new wwHttp();     
   var Result = Http.send("/Somepage.asp?id=1",null,TestCallback,OnError);
}
function TestCallback(Result)
{
    alert("SUCCESS" + Result);
}
function OnError(Result)
{
    alert("*** On Error Called:\r\n\r\n" + Result.message);
}

The above code is easy and dynamic and provides for error handling. Any errors that occur are fired to the error handler. The callback handler receives the raw HTTP response text.

wwHoverPanel and GetHttpResponse mode

You can also drive this process through a server control. You've already seen in previous examples how to use ShowHtmlInPanel or ShowHtmlAtMousePosition modes which drives HTTP content directly into controls on the HTML form.

GetHttpResponse mode uses the exact same mechanism but rather than assigning the output, passes the result string to an event handler of your own.

The key feature of this mechanism is that it lets you retrieve content from an external page - unlike Page Callbacks it doesn't have to go back to the current page.

This up requires no server side code except the control on the page. In this example, we'll display a drop downlist populated by the server and then allow a selection to be made from the list to display the invoice detail below the list without re-posting the page.

Start by dropping the control on the page:

<ww:wwhoverpanel id="InvoiceDetailPanel" runat="server" 
              ScriptLocationType="WebResource"
              ServerUrl="InvoiceAbstract.aspx" 
              ClientEventHandler="InvoiceDetail_Callback" 
              EventHandlerMode="GetHttpResponse" 
              Height="350px" Width="550px"  >
 </ww:wwhoverpanel>

To hook up this code you can use JavaScript like this:

<asp:DropDownList ID="lstInvoices" runat="server" Width="400px"  
   onchange="StartCallback()">
</asp:DropDownList>

<script type="text/javascript">
function StartCallback()
{
    InvoiceDetailPanel.callbackHandler = InvoiceDetail_Callback;
    InvoiceDetailPanel.startCallback(event,'id=' +  $('lstInvoices').value,null,OnPageError);
}
function InvoiceDetail_Callback(Result)
{
    var Panel = document.getElementById('InvoiceDetailPanel');    
    Panel.innerHTML = Result;
}
function OnPageError(Exception)
{
    alert("*** Callback error: " + Exception.message);
}
</script>

The wwHoverPanel control creates client side object with the same name as the control, the there's a InvoiceDetailPanel object. On it you can call startCallback() to initate the remote callback. Before you do though - for GetHttpResponseMode - you need to hook up a client handler that gets called when the result is returned. This is the function that receives the callback.

You can pass a querystring that is used by the target URL to return the correct data. Here the ID of the Customer Selection and an order ID is used. The last parameter is the error handler that is called if something goes wrong with the call.

The call of the page goes out to the server and loads the InvoiceAbstract.aspx page and returns its result. The Invoice Abstract is a page that returns an HTML fragment that is basically a full invoice display without the HTML headers. The result is returned to the callback handler which just assigns the HTML to the panel area in the page.

This example is a bit contrived - it would have actually have been easier to use an EventHandlerMode="ShowHtmlInPanel" which would have automatically have displayed the output in the panel without the intermediary callback handler. The advantage of the GetHttpResponse mode is that your code gets called before any assignments are made so you can further format the data or decide where and how to display it in a custom manner.