Button Customization

Get ID of Saved Record in Button Click Handler

ÿþ<檣õ Code Customization
Display Record's Description Through AJAX

This customization utilizes the power of  AJAX to make asynchronous calls to server-side methods. The server-side methods then call back a JavaScript function to display data in a popup window. The code customization uses the Microsoft ASP.NET Ajax library.


Step 1: Call JavaScript function on MouseOver

Define an area that the user can mouse over to see the popup data.  When the user moves a mouse over, the MyCustomFunction JavaScript function is called.  This function takes two arguments.  The first argument is the Id of the record being retrieved.  The second argument is the reserved word 'event' that specifies the location of the mouse.

You can use a code generation tag to specify a field value within the table row.  Make sure to specify the database field corresponding to the Field Value code generation tags on the Property Sheet. 

 <a OnMouseOut='detailRolloverPopupClose();' OnMouseOver='MyCustomFunction(<GEN:FieldValue NAME="MyRecordID"/>, event);'>
    <GEN:FieldValue NAME="MyRecordName"/>

Step 2: Define two JavaScript functions

Define two JavaScript functions within the script tags in the HTML page as shown below. The first function is called by the MouseOver event.  It will save the current mouse position and then call the server-side method declared in your page class.  The second function is the call-back function called by the server-side method.

<script type ="text/javascript">
function MyCustomFunction(MyRecordID, event)
    // Save the mouse position for later use by detailRolloverPopup

    // Invoke the WebMethod defined in the code-behind of the page through the PageMethods command
    // Also, specify the callback function -
MyCallBack (defined below)

function MyCallBack(result)
    // The detailRollOverPopup() displays the content returned from the.</p> <p><b>Step 3:&nbsp;&nbsp;</b>Build and run the application.</p> </td> </tr> <tr> <td class="SectionHeading"> Note: </td> </tr> <tr> <td class="section"> <P>This customization will get added in the Page class.</P> </td> </tr> <tr> <td class="SectionHeading"> Disclaimer: </td> </tr> <tr> <td class="section"> Customizations included in this wizard are provided as a sample to demonstrate a feature, and may work only in specific situations. The Iron Speed Designer support team cannot assist in the resolution of problems which may occur as a result of customizing your application or modifying a customization to fit a particular purpose. </td> </tr> </table> </body> </HTML>

Terms of Service Privacy Statement