<xmod:AjaxButton>

<xmod:AjaxButton> renders a push-button that fires an AJAX request when clicked. The HTML returned by Url is dropped into the element matched by Target (a jQuery selector). No page postback.

Requires jQuery

The hosting page must include jQuery. Default DNN skins include it; verify a custom skin does too.

Sibling variants

• <xmod:AjaxImage> — same behavior, rendered as a clickable image
• <xmod:AjaxLink> — same behavior, rendered as a hyperlink

Example

<xmod:Template Id="Employees">
  <ListDataSource CommandText="SELECT * FROM Employees" />
  <ItemTemplate>
    <strong>[[FirstName]] [[LastName]]</strong>
    <xmod:AjaxButton Text="Get Employee History"
        Url='[[Join("~/GetEmployeeHistory.aspx?empid={0}",[[EmployeeId]])]]'
        Target="#EmployeeHistory" />
  </ItemTemplate>
</xmod:Template>

<div id="EmployeeHistory"></div>

Properties

Property	Values	Default	Description
Url *	URL		The URL to fetch via AJAX
Target	jQuery selector		The element whose content is replaced by the AJAX response. Required unless OnSuccess is set
Text	string		Caption displayed on the button
LoadingImageUrl	URL		Image shown while the AJAX call is in flight. Tilde paths supported
LoadingCssClass	string		CSS class applied to the loading image
OnSuccess	JS function name		JavaScript function called with the response data instead of replacing Target's content
OnError	JS function name		JavaScript function called with (jqXHR, textStatus, errorThrown) if the AJAX call fails
Method	get post	get	HTTP method used for the request
CssClass	string		CSS class name(s)
Style	string		Inline CSS
Width	size		Width of the button
Height	size		Height of the button
ToolTip	string		Hover tooltip
Visible	True False	True	Shows or hides the button

* Required property

Deprecated Properties (styling)

BackColor, BorderColor, BorderStyle, BorderWidth, Font-*, ForeColor — use CssClass or Style instead.

Property Details

• Url: The endpoint hit by the AJAX request. Tilde-prefixed paths are resolved through Page.ResolveUrl. The endpoint should return HTML — that's what gets dropped into the target. Use <xmod:Feed ContentType="text/html"> to expose XMP-driven HTML for AJAX consumption.

• Target: A jQuery selector — typically #id for an element by ID. The response HTML replaces the element's existing content. Required unless OnSuccess is set (in which case your custom JS handles the response).

• LoadingImageUrl: An image (typically a spinner GIF) shown immediately after the button is clicked, removed when the AJAX call returns. The image renders right after the button; if LoadingCssClass is set, those classes are applied to the <img>.

• OnSuccess: A JavaScript function name (no parentheses). Overrides the default behavior of replacing Target's content. Your function receives the response data as its single argument:

  function doSomethingCool(data) {
    // do something with data
  }

  <xmod:AjaxButton Url="..." OnSuccess="doSomethingCool" />

• OnError: A JavaScript function name (no parentheses) called if the AJAX call fails. Receives jQuery's (jqXHR, textStatus, errorThrown) arguments.