<xmod:LoadFeedButton>

<xmod:LoadFeedButton> renders a push-button that fires an AJAX request to load an XMP feed when clicked. Unlike <xmod:LoadFeed>, which loads on page load, <xmod:LoadFeedButton> only loads when the user clicks. Use it for "Load More" or "Refresh" patterns, including infinite-scroll lists.

Requires jQuery

The hosting page must include jQuery.

Sibling variants

• <xmod:LoadFeedImage> — same behavior, rendered as a clickable image
• <xmod:LoadFeedLink> — same behavior, rendered as a hyperlink

Example — Two buttons, one target

<div id="Content"></div>

<xmod:LoadFeedButton Text="Show Top Authors" FeedName="Top20Authors" Target="#Content"
    LoadingImageUrl="~/images/loading.gif" />
<xmod:LoadFeedButton Text="Show Top Crime Books" FeedName="Top20CrimeBooks" Target="#Content">
  <Field Name="GenreId" Value="20" />
</xmod:LoadFeedButton>

Example — Infinite paging

The button below loads 10 more authors and appends them to the existing list. The feed receives a LastId parameter, taken from the hidden span at the end of the last visible row.

<xmod:Template>
  <ListDataSource CommandText="SELECT TOP 10 AuthorId, FirstName, LastName FROM Authors" />
  <HeaderTemplate><ul id="AuthorsList"></HeaderTemplate>
  <ItemTemplate>
    <li>[[FirstName]] [[LastName]]<span style="display:none;">[[AuthorId]]</span></li>
  </ItemTemplate>
  <FooterTemplate>
    </ul>
    <xmod:LoadFeedButton Text="Show Next 10"
        FeedName="Authors_Chunked"
        Target="#AuthorsList"
        IDSelector="#AuthorsList li:last span"
        InsertMode="Append"
        InfinitePaging="True"
        LoadingImageUrl="~/images/loading.gif" />
  </FooterTemplate>
</xmod:Template>

Properties

Property	Values	Default	Description
FeedName *	string		Feed name as defined on the Manage Feeds page
Target *	jQuery selector		The element whose content is replaced or appended
Text	string		Caption displayed on the button
InsertMode	Replace Append Prepend	Replace	How the loaded content is placed into the target
LoadingImageUrl	URL		Image shown in the target while the feed is loading. Tilde paths supported
LoadingCssClass	string		CSS class(es) applied to the loading image
InfinitePaging	True False	False	Enable infinite-scroll plumbing — the button passes LastId to the feed
IDSelector	jQuery selector		When InfinitePaging="True", locates the element holding the last record's ID
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

Child Tags

Tag	Required	Description
<Field Name Value>	optional	Pass extra parameters to the feed — same surface as on <xmod:LoadFeed>. Add as many as needed

Property Details

• InfinitePaging: When True, the button calls xmp_InfinitePaging (a helper registered automatically). The helper reads the inner text of the element matched by IDSelector and sends it to the feed as a LastId parameter. Pair with InsertMode="Append" and a feed that returns rows where AuthorId > @LastId to build a "Load More" pattern.

  The feed should set ContentType="text/html" and return only the rows (no surrounding header/footer markup) so they fit cleanly into the existing list.

Companion feed setup

Feeds consumed by Load Feed buttons should set ContentType="text/html" so the response slots into the page directly. See <xmod:LoadFeed> for full feed-side examples.