Script Editor Web Part not recognizing Jquery

Question

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.

Answer 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

};

Answer 2

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>