problem loading javascript

[mantonec]

Hi all,

i'm developing a portlet in JBoss-jpp 6.0 that use jquery, mustache and other graphical javascript libraries.

In the jsp i use jQuery in order to load data for drop-down list objects with something like this:

$.ajax({
 ...
});

I have defined all required js in gatein-resources.xml and when the page is rendered i can see them in the source page in the "require" var as SHARED modules

<script type="text/javascript">
 var require = {"shim":{"PORTLET/web/SiteMapPortlet":{"deps": ...
 </script>

The problem is that at runtime, whe i navigate to portlet, i get the following error (in js console)

$ is Undefined

I have tried also to declare javascript into jsp with following statement

<script type="text/javascript" src='<%= renderResponse.encodeURL(renderRequest.getContextPath() + "/js/vendor/jquery-1.7.2.min.js") %>'></script>

But in this case i get the following error

Error: Mismatched anonymous define() module: function (jQuery, undefined){ ...

Please could someone give me a suggestion  ?

Thanks,

Michele.

[mantonec]

Hello,

i'm coming with an update.

I have noticed an error into server log when from browser i open the portlet commercialCatalogue

09:59:28,085 ERROR [org.gatein.portal.controller.resource.ResourceRequestHandler] (http-/127.0.0.1:8080-1) Could not render script ScriptKey[id=PORTLET/asset-mobility/commercialCatalogue,minified=true,locale=null]
:Handle me gracefully JS errors
PORTLET/asset-mobility/commercialCatalogue.js:2 Parse error. missing ) after formal parameters
PORTLET/asset-mobility/commercialCatalogue.js:6 Parse error. invalid return
PORTLET/asset-mobility/commercialCatalogue.js:238 Parse error. syntax error

Inspecting from web browser (firefox) i have noticed the following error

[09:59:27.833] GET http://localhost:8080/portal/scripts/3.5.2.Final-redhat-4/PORTLET/asset-mobility:commercialCatalogue-min.js [HTTP/1.1 500 Internal Server Error 355ms]

Infact inquiring the portal with link i get error 500, but if i'm searching for NOT minified resource

http://localhost:8080/portal/scripts/3.5.2.Final-redhat-4/PORTLET/asset-mobility:commercialCatalogue.js

i get the code.

How can i force the portal in order to load the non minified version ?

[rutlucas]

Try to use -Dexo.product.developing=true in the command line in the start of gatein.

This allows to use non minified JS archives.

HTH,

Lucas

[vstorm83]

- There must be an error in the script commercialCatalogue.js. We are using Closure compiler to compress JS, you can use this service to test if you script can be compressed by Closure http://closure-compiler.appspot.com/home

- About the problem with jquery, by default, GateIn provide an AMD jquery module, and remote the global jquery variable. That means you can't not use global $ like this in jsp file:

$.ajax({
...
});

- If you declare your script in gatein-resources.xml as module, your script must be written as a GMD format like this:

(function ($) {   $.ajax({}); })($)

and in gatein-resources.xml, you should declare that your module depends on GateIn jquery module:

<portlet>

  <name>commercialCatalogue</name>

  <module>

    <script>

      <path>/commercialCatalogue.js</path>

    </script>

    <depends>

      <module>jquery</module>

    </depends>

  </module>

</portlet>

- Please read this doc for more info about GMD https://docs.jboss.org/author/display/GTNPORTAL35/JavaScript+Development (javascript in GateIn)

- A quick way to test (and in case if you don't want to remove js in JSP file but still need jquery from GateIn), you can try this

window.require(["SHARED/jquery"], function($) {

      $.ajax(....);

});

[mantonec]

Great. You are right. The js cannot be minified because a dot in a module name.

I replaced the "." with a "_" and now this problem is resolved.

What is not clear is why continue to get error on "$ is undefined"

[12:51:14.500] TypeError: $ is undefined @ http://localhost:8080/portal/scripts/3.5.2.Final-redhat-4/SHARED/jquery_mousewheel.js:23

even if i declared that jquery_mousewheel depends on jquery as $ and portled depends on both

<module>
    <name>jquery_mousewheel</name>
    <script>
        <path>/js/vendor/jquery.mousewheel.js</path>
    </script>
    <depends>
        <module>jquery</module>
        <as>$</as>
    </depends>
</module>

...

<portlet>
    <name >commercialCatalogue</name>
    <module>
        <depends>
            <module>jquery</module>
            <as>$</as>
        </depends>
        <depends>
            <module>jquery_mousewheel</module>
        </depends>
     ...
    </module>
</portlet>

Thanks again for your help.

[vstorm83]

You should take a look at jquery.mousewheel.js file to see what jquery alias it's using. For example, if that jquery plugin written like that:

(function($) {

...  

})(jQuery)

That mean it access jquery as "jQuery" alias, so you'll need this in gatein-resources.xml:

<module>
    <name>jquery_mousewheel</name>
    <script>
        <path>/js/vendor/jquery.mousewheel.js</path>
    </script>
    <depends>
        <module>jquery</module>
        <as>jQuery</as>
    </depends>
</module>