AJAX HoverPanel Sample


 Sample Home | Reset Form 

Hover over the links in the grid to bring up the pop over window. Check the checkbox to see a different view.

CompanyDeveloper NameUpdated
COnstruction dataBUbure07/23/08 12:28pm
Construction Data ServicesJames K. Fluffy07/16/08 12:15pm
Contanetica S.A. de C.V.Daniel Porras Allende22222207/07/08 09:43am
Cross Road Consulting, IncPaul McCoyewfedasdf07/21/08 02:12am
Custom Softworks TestMarty Cantwell07/12/08 02:10pm
Cyberlogic Pty. Ltd.Chancelor05/27/08 11:23pm
DNG SolutionsDarrell Gardnera06/12/08 06:55am
Dahlke-Datentechnikjhghkuhkuhe06/26/08 01:03pm
Data ActiveChris Collins05/26/08 02:54am
Data DemonsJoey Catanzaro06/30/08 01:14pm
Pages: 1 2 3 4 5 6 7 8


  
This sample demonstrates a very simple AJAX popup window that retrieves content from the server while not reloading the current page and displaying that content as a pop over window at the mouse position. This example requires no explicit client script code from the developer - only the event hookups are required for onmouseover and onmouseout which are single function calls each.

The page contains a wwWebAjax control and it's set its EventHandlerMode to ShowHtmlAtMousePosition which allows you to display the result of an HTTP request in a popup window. You specify a URL (either another page or the same one) and the control then calls this Url and automatically pops up the content. To do this we need to hook up a client side event that triggers the callback - in this case hovering over the Company link - an onmouseover on the HREF tag.

The datagrid implements the HyperLink with the JavaScript event hookups as a Codebehind expression because the tag is a little complex due to nested strings. It can be done in markup, but it's actually much easier to write with a litte FoxPro expression in CodeBehind. So, the first DataGrid's expression is this.Page.CompanyColumnExpression(). This method is implemented on the page returns an HREF tag that includes an onmouseover that points (see PRG code). Embedded in this expression is a call to onmouseover which in turn calls the StartCallback JavaScript function that is provided as part of the Ajax support code.

StartCallback fires the callback at the Url sepcified in the ServerUrl property. This property can go back to the same page, or a separate page on the server using the the XmlHttp  object.  The sample goes both to a different page and back to the current page depending on the checkbox setting. The server  should return an HTML fragment rather than a full page because it technically becomes part of the main page - the HTML thus inherits the styles and containership settings of the running page.

Part of the StartCallback function called from onmouseover is a parameter that allows you to add a custom querystring to the ServerUrl specified. The third parameter (see PRG code) lets the server know what to do. In this case the querystring is added to include id=1 where the value is a PK for the developer to pop up. The control then handles all the details of making the in process callback, returning the output and automatically displaying the wwWebAjax Panel control at the current mouse cursor position. Easy as pie.

If you call an external page the page is called and the result returned. If you call back to the current page, you can use the wwWebAjax control's IsCallback property to determine whether the call is a callback and branch accordingly in the OnLoad of the page. Typically you'll go off and generate a string of some sort, issue a Response.Write() with the result and Response.End() to close out the request for the callback. See the PRG file code for how this works.

Note that the control manages many aspects of the pop over affect. This includes delayed navigation so accidental roll overs don't trigger operation, aborting of requests if moving off the link, automatic hiding of the panel, autoadjustments to avoid scrolling off the bottom, optional shadow and transparency and more.