5 Replies Latest reply on Jul 3, 2013 10:04 PM by vstorm83

    problem loading javascript

    mantonec
    mantonec Jul 2, 2013 9:09 AM

      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.

      • 2025 Views
      • Tags:
        • 1. Re: problem loading javascript
          mantonec
          mantonec Jul 3, 2013 4:09 AM (in response to 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 ?

            • Actions
          • 2. Re: problem loading javascript
            rutlucas
            rutlucas Jul 3, 2013 4:15 AM (in response to mantonec)

            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

              • Actions
            • 3. Re: problem loading javascript
              vstorm83
              vstorm83 Jul 3, 2013 5:06 AM (in response to mantonec)

              - 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(....);

              });

              1 of 1 people found this helpful
                • Actions
              • 4. Re: problem loading javascript
                mantonec
                mantonec Jul 3, 2013 7:01 AM (in response to vstorm83)

                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.

                  • Actions
                • 5. Re: problem loading javascript
                  vstorm83
                  vstorm83 Jul 3, 2013 10:04 PM (in response to mantonec)

                  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>

                    • Actions