Adding a "read more" button to announcements web part with JavaScript

Question

Having some trouble adding a "read more" button to an announcements webpart in SP2013 Foundation. This "read more" button is automatically generated by JavaScript after the announcement/news entry is larger than 300 characters, and provides the user with a link to a full view of the text file within SharePoint. Here's the Javascript I'm using as an attempt to make it happen. I pulled it from this SE thread.

<script>

(function () {

    var viewCtx = {};
    viewCtx.Templates = {};

    viewCtx.Templates.Header = "<table>";
    viewCtx.Templates.Item = AnnouncementItem;
    viewCtx.Templates.Footer = "</table>";

    viewCtx.BaseViewID = 1;
    viewCtx.ListTemplateType = 104;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(viewCtx);

})();

function AnnouncementItem(ctx) {
    var headlineLimit = 300;
    var headline = $(ctx.CurrentItem.Body).text(); 
    if (headline.length > headlineLimit)
    {
        headline = headline.substring(0,headlineLimit);
    }
    return String.format("<tr><td><p><b>{3}</b></p>{1}<a href='{2}/DispForm.aspx?ID={0}'> Read More…</a></td></tr>",
    ctx.CurrentItem.ID,headline,ctx.listUrlDir,ctx.CurrentItem.Title);
}

</script>

Not having much luck at all, it keeps returning me with the errors "ReferenceError: $ is not defined ReferenceError: $ is not defined"

Does anyone have any ideas? Sorry if anything seems off, I'm an extreme beginner when it comes to Javascript.

Thank you in advance.

Answer 1

Indeed $ is jQuery, the extra library you need to load

But..[drumroll] Microsoft has mQuery... so you do not need jQuery

var headline = m$(ctx.CurrentItem.Body)[0].textContent;

Or in native (modern browser) JavaScript:

var headline = document.querySelector(ctx.CurrentItem.Body).textContent;

But... chicken/egg

It won't work because the DOM element you want to get the text from does not exist (because this CSR code creates it)

The text you want is in the items ctx object:

If you call it for the whole Item:

var headline = ctx.CurrentItem.Body; 

The above is tied to the Internal name;

If you call it for (any) one Description Column as shown in the MSDN example that internal name is declared in the ctx object:
and creates more generic/reusable code

var headline = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 

FYI: This type of CSR development is a breeze with the free Chrome Browser Cisar Plugin