Skip to main content
Rambutan
Inspiring
October 28, 2014
Answered

Noob question: Problem loading jQuery

  • October 28, 2014
  • 4 replies
  • 6897 views

Hi all, I've created Photoshop flash panels years ago and now trying out the HTML5 stuff.  I'm running Photoshop CC 2014 on Windows 8.1.

I'm just trying to get a VERY simple jQuery sample up and running but for some reason jQuery refuses to load.  Now I'm probably not doing things in the correct order etc but I've tried all night to get this to work:

C:\Users\Gear\AppData\Roaming\Adobe\CEP\extensions\com.example.jqui\index.html

<!DOCTYPE html>

<html>

<head>

<script src="./js/libs/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").hide();

  });

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Click me</button>

</body>

</html>

This is taken from a jQuery example on W3:

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_p

I've setup the manifest.xml and the .debug files, the extension is recognized by Photoshop no problems and runs fine but the example doesn't seem to load jQuery.  When I debug the extension in Chrome  it says:

Uncaught ReferenceError: $ is not defined (index.html line 6)

I've triple checked the path to jQuery and it's correct, I even use Brackets' auto complete path.

Any help would be GREATLY appreciated!

Thanks!

G

    This topic has been closed for replies.
    Correct answer Rambutan

    Just in case my last response was unlcear: it works in Chrome but not in Photoshop panel


    BINGO!! 

    So I had an example project from one of the CEP examples which worked fine so I've been looking at the differences between the projects, one of them was the jQuery version...

    I loaded up jquery-1.9.1.js instead of jquery-1.11.1.min.js in my project and it worked fine!

    I don't know beyond that what the problem is though.

    G

    4 replies

    Adobe Employee
    July 24, 2015

    This will be fixed in CEP 6.1, and available in next CC 2015 release. Thanks

    Participant
    February 5, 2018

    This WAS correct, weiguo@adobe.com​, I built my whole panel using jquery 2.2, but with a recent update to something somewhere my whole panel broke, come to find out that only Jquery 1.9.1 works again. Please look into this as I have to go update all my panels now and downgrade my Jquery. Im sure you are seeing Panel failure all over the place with this roll back.

    Participant
    June 16, 2020

    I am having this problem now in Adobe Premiere 14.04.  jQuery 1.9.1 works but other versions do not.

    Adobe Employee
    October 31, 2014

    This is probably because CEP (the underlying technology that Photoshop uses to run html extensions) uses an old version of CEF, which uses old version of Chromium. After we upgrade to new version of CEF in 2015, you should be able to use new jQuery in Photoshop html extensions. Thanks

    Inspiring
    October 31, 2014

    weiguo@adobe.com-3aPujR

    Will the update next year be going from CEF 1 to CEF 3? If that's so, are there any migrations concerns that will need to be considered for current extensions using JQuery 1.9?

    Rambutan
    RambutanAuthor
    Inspiring
    October 31, 2014

    CEP 4.2+ uses CEF3:

    http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/cs-extension-builder/pdfs/CC_Extension_SDK.pdf

    Search for CEF3.

    Using the debug console this is the version of Chrome that Photoshop CC2014 uses:

    window.navigator.appVersion

    "5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36"

    My current version of the Chrome browser is 38.0.2125.111 so CC's is some versions behind.  I can't for the life of me find a JS command that returns the current exact version of CEF.

    But from here:

    http://cefbuilds.com/#branch_trunk

    CEF 3.1453.1490 uses Chromium 27.0.1453.116 so Photshop must be a version or 2 behind that.  Current CEF (x64 windows) is CEF 3.2171.1901 from that same link.

    @ weiguo@adobe.com I assume you're talking about versions of CEF3?


    G

    Inspiring
    October 31, 2014

    I am experiencing the same issue - when I run with jQuery 1.9.1 - which is used in the CEP Examples - jQuery works okay

    I have not been able to get CEP to work with newer versions of jQuery

    I tried to load a frame with the html frame source I clipped from the demo jQuery UI site & it failed when loading into a CEP panel.

    pjb

    Rambutan
    RambutanAuthor
    Inspiring
    October 31, 2014

    @PeteBaumgartner The forum link I posted above has detailed info of what's happening on a javascript level and some work arounds.   Here's the link again:

    Problem with jQuery and CEP 5 - "$" getting overrided

    It's a bit confusing because some info seems to be in this forum and some over on the Creative Suite Extension Builder forum.

    @weiguo@adobe.com can we please get a note about this issue added to the github pages?  I'm fine working with jQuery 1.9.x but would have been nice to know there's officially a comparability issue with later versions.

    Thanks!

    G

    Inspiring
    October 31, 2014

    Thanks.

    Inspiring
    October 28, 2014

    First step would be to pull up your html in the Chrome browser. Right click and Inspect Element. Click on your Network tab and confirm that the .js file is actually loading.

    Rambutan
    RambutanAuthor
    Inspiring
    October 28, 2014

    Thanks for the fast reply!

    So what am I right clicking on?  If I click the linked script path in the debug source view of index.html it takes me the jQuery js file.  Also if I look at the resources view it shows:

    (index.html)

      |-Scripts

       |-jquery-1.11.1.min.js

    index.html

    Inspiring
    October 28, 2014

    Right click on the page itself. If you haven't use the Chrome Network Panel before, google it and learn a bit about it. It's a neat tool and can quickly show you what is or isn't being loaded onto the page. What you want to see is a STATUS code of 200 - that means the script is loading.