Noob question: Problem loading jQuery

Report · Oct 28, 2014

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

Report · Oct 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.

Report · Oct 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

Report · Oct 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.

Report · Oct 28, 2014

Riiiiight with you now, load it directly in Chrome, not through the debug Dev tools.

Ok did that, the example works (click on the button and <p> tags are hidden) and I looked at the network view, it says jQuery js is loaded.

FYI this is my manifest.xml

<?xml version="1.0" encoding="UTF-8"?>
<ExtensionManifest Version="5.0" ExtensionBundleId="com.example.jqui" ExtensionBundleVersion="1.0.0"
  ExtensionBundleName="Extension-Name" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <ExtensionList>
  <Extension Id="com.example.jqui" Version="1.0" />
  </ExtensionList>
  <ExecutionEnvironment>
  <HostList>
         
            <Host Name="PHXS" Version="[15.0,15.9]" />
            <Host Name="PHSP" Version="[15.0,15.9]" />
           
  </HostList>
  <LocaleList>
  <Locale Code="All" />
  </LocaleList>
  <RequiredRuntimeList>
  <RequiredRuntime Name="CSXS" Version="5.0" />
  </RequiredRuntimeList>
  </ExecutionEnvironment>
  <DispatchInfoList>
  <Extension Id="com.example.jqui">
  <DispatchInfo >
  <Resources>
  <MainPath>./index.html</MainPath>
  <ScriptPath>./jsx/hostscript.jsx</ScriptPath>
  </Resources>
  <Lifecycle>
  <AutoVisible>true</AutoVisible>
  </Lifecycle>
  <UI>
  <Type>Panel</Type>
  <Menu>JQ UI Example</Menu>
  <Geometry>
  <Size>
  <Height>300</Height>
  <Width>300</Width>
  </Size>                 
                       
  </Geometry>
  <Icons>
  <Icon Type="Normal">./icons/iconNormal.png</Icon>
  <Icon Type="RollOver">./icons/iconRollover.png</Icon>
  <Icon Type="Disabled">./icons/iconDisabled.png</Icon>
  <Icon Type="DarkNormal">./icons/iconDarkNormal.png</Icon>
  <Icon Type="DarkRollOver">./icons/iconDarkRollover.png</Icon>
  </Icons>
  </UI>
  </DispatchInfo>
  </Extension>
  </DispatchInfoList>
</ExtensionManifest>

Report · Oct 28, 2014

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

Report · Oct 28, 2014

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

Report · Oct 28, 2014

I'm testing different versions:

jquery-2.1.1.min.js - Fail

jquery-1.11.1.js - Fail

jquery-1.11.1.min.js - Fail

jquery-1.11.0.min.js - Fail

jquery-1.10.2.min.js - Fail

jquery-1.9.1.js - Works

jquery-1.9.1.min.js - Works

Can anyone else replicate this or is it just something funky about my setup? Remeber I'm on Photoshop CC2014 with latest updates (fresh install, had to manually create the user CEP folder) and Win 8.1

TNKS!

G

Report · Oct 28, 2014

Same problem as here:

https://forums.adobe.com/thread/1500618

Report · Oct 28, 2014

Interesting problem. I never even considered the version number, I'm using 1.9 for all my projects.

Obviously something changes between v9 and v11. Not sure what it is, but thanks for following up after you found the solution.

Report · Oct 30, 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

Report · Oct 30, 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

Report · Oct 31, 2014

Thanks.

Report · Oct 31, 2014

Now that I have seen the other write-up - in the other forum …. I tried loading my later version of jQuery in an iFrame with the 'no node.js' option

and it worked!

The jQuery script & link reference elements in the <head> of that .html read like this:

<title>jQuery UI Tooltip - Default functionality</title>

So that is good - but my next question would be: What CEP functionality am I disabling by doing this?

Thanks.

Rambutan weiguo@adobe.com

Report · Oct 30, 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

Report · Oct 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?

Report · Oct 31, 2014

CEP 4.2+ uses CEF3:

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

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

Report · Jul 24, 2015

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

Report · Feb 05, 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.

Report · Jun 16, 2020

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

Report · Aug 13, 2020

Moving this post from Labs to Exchange for more chances of getting an answer.

Report · Jan 05, 2021

I am running into this issue with an Animate Extension and CEP 9. Wondering if there is a solution for this besides downgrading jQuery.

Report · Feb 15, 2021

Just update, did get this working following the instructions in the CEP Cookbook!

Noob question: Problem loading jQuery

1 Correct answer

Photos