I have the following scenario: Calendar page that loads the initial sale nodes from last 2 months. This page has a Load more button that fetches more Sale items that are 2 additional months of Sales.
I have added the call to the to controller action like this:
public ActionResult LoadMoreSales(int months = 0)
{
if (Request.IsAjaxRequest())
{
if (Request.QueryString["department"] == null)
{
return PartialView("Calendar/_Sales", GetSales(0, months));
}
else
{
int depId = 0;
Int32.TryParse(Request.QueryString["department"], out depId);
return PartialView("Calendar/_Sales", GetSales(depId, months));
}
}
else
{
return PartialView("Calendar/_Sales");
}
}
GetSale retrieves the list of SaleViewModel and the _Sales partial is used when accessing the Calendar page and when clicking Load more button. Through this method, the AJAX call is being made and the list is being retrieved.
The _Sales partial inherits the following:
@inherits Umbraco.Web.Mvc.UmbracoViewPage<IEnumerable<SaleViewModel>>
The click button jQuery event:
$('.js-reload-details').on('click', function (evt) {
$('div#loading').html('<img src="/images/ajax-loader.gif" />');
evt.preventDefault();
evt.stopPropagation();
var $detailsDiv = $('#detailsDiv'),
url = $(this).data('url');
$.get(url, function (data) {
$detailsDiv.replaceWith(data);
});
$('div#loading').empty();
});
And the button click is implemented like this:
<a id="loadMore" class="js-reload-details cta" data-url="@Url.Action("LoadMoreSales", "Calendar", new { months = -2})" href="javascript:;">@Umbraco.GetDictionaryValue("Calendar.LoadMore")</a>
The Sale items are being loaded, but I am unable to access UmbracoHelper and when I add macros to the list of sales page field, the call breaks since there is no UmbracoContext reference. Also, the following dictionary calls don't work:
@umbracoHelper.GetDictionaryValue("Calendar.ViewDetails")
Did anyone have the similar issue?
Related our.umbraco forum post
EDIT
I have also tried the following submit form implementation, but the result is the same:
AJAX form:
@using (Ajax.BeginForm("LoadMoreSales",
"Calendar",
new {months = -2},
new AjaxOption { HttpMethod = "GET",
OnSuccess = "loadMore(data, status, xhr)" }))
jQuery implementation:
function loadMore(data, status, xhr) {
$('div#loading').html('<img src="/images/ajax-loader.gif" />');
if (data != '') {
$("#saleList").append(data);
}
$('div#loading').empty();
}