1

I´m using SharePoint Blog. I want show only first x characters of post in a sharepoint blog but I recived this error: ReferenceError: $ is not defined

This is my code:

(function() {
var script = document.createElement("SCRIPT");
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
script.type = 'text/javascript';
script.onload = function() {
    var $ = window.jQuery;
    // Use $ here...
};
document.getElementsByTagName("head")[0].appendChild(script);
// Load the script
var rCtx = {};
rCtx.Templates = {};
rCtx.Templates.Fields = {
    'Body': { 'View' : renderHeadline }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(rCtx);})();function renderHeadline(ctx) {
var headlineLimit = 400;
var body = ctx.CurrentItem.Body;  
var headline = $(body).text(); 
if (headline.length > headlineLimit)
{
    headline = headline.substring(0,headlineLimit) + '&nbsp;&nbsp;&nbsp;<b><a href="' + ctx.listUrlDir + '/Post.aspx?ID=' + ctx.CurrentItem.ID + '">More ...</a></b>';
}
return headline;}
  • where are you adding this code ? in content editor web part? – Siddharth Vaghasia Jun 6 at 13:31
  • In .js file. I put the reference in the web element – Juan Jun 7 at 7:15
0

There are two major issue in the script provided above.

  • Scope of $: As you see the $ is initialized inside script load method, so the scope is limited to that function only. Also when the page loaded, there is no reference of jQuery, so it throw object undefined error.
  • The sequence of registering the CSR template is right after the script is added on page. Which certainly doesn't mean the script is loaded. You need to wait until the script is loaded and register it with onload method.

Try using following script:

var script = document.createElement("SCRIPT");
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
script.type = 'text/javascript';
script.onload = function () {
    // Register CSR here
    var renderHeadline = (ctx) => {
        var headlineLimit = 400;
        var body = ctx.CurrentItem.Body;
        var headline = $(body).text();
        if (headline.length > headlineLimit) {
            headline = headline.substring(0, headlineLimit) + '   More ...';
        }
        return headline;
    }

    var rCtx = {};
    rCtx.Templates = {};
    rCtx.Templates.Fields = {
        'Body': { 'View': renderHeadline }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(rCtx);
};
document.getElementsByTagName("head")[0].appendChild(script);

While working with SP, I would recommend you to have a look on SP.SOD JS library as well to script safety. This will run the custom JS scripts only after required SP JS scripts are loaded on the page. Which is also missing in your code.

  • Your script resolved the error but only executing on Edit Mode-Sharepoint blog – Juan Jun 7 at 7:01
  • Are you placing the script on JSLink property of list view web part? – ThinkB4Code Jun 7 at 16:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.