Items loaded by ajax call are not editable in experience editor

Question

Scenario:

In our project we have a requirement that load items in pageload by ajax call and if there are more items, click on "LoadMore" button then load rest of the items by the same ajax call.

Issue:

The items which are loaded in page load are editable in experience editor.But the items which are loaded by "LoadMore" button are not editable.

Kindly advise on this.

Controller:

public class CategoryController : Controller
{
    CategoryRepository categoryRepository = new CategoryRepository();

    public ActionResult Index()
    {
         var categoryViewModel = new CategoryViewModel();
         categoryViewModel.ContextDatabase = PageContext.Current.Database.Name;
         categoryViewModel.ContextItem = PageContext.Current.Item;
         return View(categoryViewModel);
    }

    public PartialViewResult GetCategories(int size, string itemID, string itemDB)
    {
         var model = categoryRepository.GetCategories(itemID, itemDB).Skip(size).Take(9);
         return PartialView("_Category", model);
    }
}

View:

@model CategoryViewModel
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var loadCount = 0;
        var itemId = $("#contextItemId").val();
        var itemDb = $("#contextDb").val();
        LoadCategoires(loadCount, itemId, itemDb);
        loadCount += 1;
        $("#loadMore").click(function () {
            LoadCategoires(loadCount, itemId, itemDb);
            loadCount += 1;
        });
    });

    function LoadCategoires(loadCount, itemId, itemDb) {
        $.ajax({
            url: '/api/sitecore/Category/GetCategories',
            type: 'POST',
            dataType: 'html',
            async: true,
            data: { size: loadCount * 9, itemID: itemId, itemDB: itemDb },
            success: function (data) {
                if (data.length !== 0) {
                    $("#loadMore").show();
                    $("#catContainer").append(data);
                }
                else {
                    $("#loadMore").hide();
                }
            },
            error: function (data) {
                alert(data.responseText);
            }
        });
    }
</script>
<div class="row" id="catContainer">
</div>
<input type="hidden" value="@Model.ContextItem.ID.ToString()" id="contextItemId" />
<input type="hidden" value="@Model.ContextDatabase" id="contextDb" />
<div class="col-md-12">
    <button id="loadMore" style="display:none;" class="center-block" value="Load More">Load More</button>
</div>

Partial View:

@model IEnumerable<Category>

@foreach (var item in Model)
{

    <div>
        <h4 class="text-center" style="font-weight: 600; margin-bottom: 1px;">@Html.Sitecore().Field("Title", item.InnerItem)</h4>
    </div>

}

Answer 1

In your GetCategories function, instead of returning items, return an HTML string. Then the editor will render the html with the js/html to make editable fields.

public List<HtmlString> GetCategories()
{
    var rtn = new List<HtmlString>();
    var items = new List<Item>();
    foreach (var item in items)
    {
        rtn.Add(new HtmlString(Sitecore.Web.UI.WebControls.FieldRenderer.Render(item, "title")));
    }

    return rtn;
 }

Then in your markup

@foreach (var itemHtml in Model)
{
    <div>
        <h4 class="text-center" style="font-weight: 600; margin-bottom: 1px;">@Html.Raw(itemHtml)</h4>
    </div>
}

Answer 2

Another option you could do, is handle the experience editor interface differently than the rest of the page. You can get knowledge from the page by using the page mode detection methods, which can be done from within Javascript:

var isPageEditor = function(){
    return !!(Sitecore && Sitecore.PageModes && Sitecore.PageModes.PageEditor);
};

if(isPageEditor()) {
    // Logic for when in the experience editor
}

Or you can determine the page mode via c# razor syntax like this:

@if (Sitecore.Context.PageMode.IsExperienceEditor) 
{
    // Load a unique interface that contains all items 
    // (not paginated using ajax so you can use experience editor to make changes)
} else {
    // Load existing logic (for when not in experience editor
}

Now there is a slight issue with loading everything all at once, if you have a lot of data (since that's the reason you are paginating the data in the first place). You could build some sort of custom speak interface to manipulate the large data set of information. Also in this situation is when I would think it would make more sense to edit the data in the content editor, if the user might be editing 1 item on page 100 out of 1000 pages of data. Even if you could get the data to paginate and be editable via the experience editor with the use of ajax, there would be usability concerns with this scenario.