2

I'm trying to test JQuery in a Script Editor Web Part but it doesn't seem to be recognizing the JQuery. Any suggestions would be greatly appreciated.

Code:

<div id="testing-jq">Jquery Test - Fail!</div>
<script language="Javascript" type="text/javascript">
   $(document).ready(function() { 
   $("#testing-jq").html("Jquery Test - Pass!");
});
</script>

Notes:

  • JQuery.js file is linked to the MasterPage
  • JQuery works if I embed it on the page template or use JS Link to a .js file
  • Normal Javascript seems to work
  • This is a Publishing Site
  • MDS (Minimal Download Strategy) is turned off for the site.
  • When I use Inspect Element on the page the SEWP is rendering the code on the page.
  • Do you add script tag with jQuery reference after the code above? Also, could some other script use the window.$ variable - have you tried with window.jQuery? – eirikb Sep 14 '15 at 21:38
  • Try to load JQuery in your script editor. – Kaushal Khamar Sep 15 '15 at 4:45
1

Include this code in your CEWP. This will load JQuery if not loaded.

// Only do anything if jQuery isn't defined
if (typeof jQuery == 'undefined') {

if (typeof $ == 'function') {
    // warning, global var
    thisPageUsingOtherJSLibrary = true;
}

function getScript(url, success) {

    var script     = document.createElement('script');
         script.src = url;

    var head = document.getElementsByTagName('head')[0],
    done = false;

    // Attach handlers for all browsers
    script.onload = script.onreadystatechange = function() {

        if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {

        done = true;

            // callback function provided as param
            success();

            script.onload = script.onreadystatechange = null;
            head.removeChild(script);

        };

    };

    head.appendChild(script);

};

getScript('http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', function() {

    if (typeof jQuery=='undefined') {

        // Super failsafe - still somehow failed...

    } else {

        // jQuery loaded! Make sure to use .noConflict just in case
        fancyCode();

        if (thisPageUsingOtherJSLibrary) {

            // Run your jQuery Code

        } else {

            // Use .noConflict(), then run your jQuery Code

        }

    }

});

} else { // jQuery was already loaded

// Run your jQuery Code

};
0

Thanks Kaushal. Both of your solution did work. I ended up stripping the script down a little at a time to discover that the getScript('http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' portion was what made it work.

Taking that into account, I did end up adding the explicit JQuery script link inside the Script Editor Web Part. I thought I had tried that previously but I guess not.

Not ideal since I am already calling the script in the masterpage but it is a solution.

<div id="testing-jq">Jquery Test - Fail!</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script language="Javascript" type="text/javascript">
    $("#testing-jq").html("Jquery Test - Pass!");
</script>

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.