Skip to Main Content
Forums

DevOps, CI/CD and Automation

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

JET without require.js

2952341Aug 17 2016 — edited Aug 19 2016

Hi,

We are trying to evaluate Oracle JET 2.0.2 in our existing HTML5 / JS application. We dont have any RequireJS and would like to try out JET without RequireJS. Following is the page with the libraries that I have tried,but ending up with an error and without rendering any JET component on the page.

Can someone help me or point out the issue?

Code

<!DOCTYPE html>

<html>

    <head>

        <title>Test Title Page</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script src="js/libs/knockout/knockout-3.4.0.js" type="text/javascript"></script>

        <script src="js/libs/knockout/knockout.mapping-latest.js" type="text/javascript"></script>

        <script src="js/libs/jquery/jquery-2.1.3.js" type="text/javascript"></script>

        <script src="js/libs/jquery/jquery-ui-1.11.4.custom.min.js" type="text/javascript"></script>

        <script src="js/libs/jquery/jqueryui-amd-1.11.4.min/core.js" type="text/javascript"></script>

        <script src="js/libs/jquery/jqueryui-amd-1.11.4.min/widget.js" type="text/javascript"></script>

        <script src="js/libs/jquery/jqueryui-amd-1.11.4.min/draggable.js" type="text/javascript"></script>

        <script src="js/libs/jquery/jqueryui-amd-1.11.4.min/mouse.js" type="text/javascript"></script>

        <script src="js/libs/jquery/jqueryui-amd-1.11.4.min/position.js" type="text/javascript"></script>

        <script src="js/libs/jquery/jqueryui-amd-1.11.4.min/sortable.js" type="text/javascript"></script>

       

        <script src="js/libs/es6-promise/promise-1.0.0.min.js" type="text/javascript"></script>

        <script src="js/libs/hammer/hammer-2.0.4.min.js" type="text/javascript"></script>

        <script src="js/libs/dnd-polyfill/dnd-polyfill-1.0.0.min.js" type="text/javascript"></script>

        <script src="js/libs/js-signals/signals.min.js" type="text/javascript"></script>

        <script src="js/libs/crossroads/crossroads.min.js" type="text/javascript"></script>

                <!--script src="js/libs/require/require.js" type="text/javascript"></script>

        <script src="js/libs/require/text.js" type="text/javascript"></script-->

<script src="js/libs/oj/v2.0.1/min/oj.js" type="text/javascript"></script>       

       

        <script src="js/libs/oj/v2.0.1/min/ojdatagrid.js" type="text/javascript"></script>

        <script src="js/libs/oj/v2.0.1/min/ojdatagrid-model.js" type="text/javascript"></script>

        <script src="js/libs/oj/v2.0.1/min/ojcomponents.js" type="text/javascript"></script>

        <script src="js/libs/oj/v2.0.1/min/ojmodel.js" type="text/javascript"></script>

        <script src="js/libs/oj/v2.0.1/min/ojmodule.js" type="text/javascript"></script>

        <script src="js/libs/oj/v2.0.1/min/ojcollapsible.js" type="text/javascript"></script>

       

        <!--script src="js/custom/main.js" type="text/javascript"></script-->

    </head>

    <body>

        <div class="oj-md-odd-cols-2 oj-md-even-cols-4">

            <div class="oj-row">

                <div class="oj-col">

                    <div id="collapsiblePage" data-bind="ojComponent: {component: 'ojCollapsible'}">

                        <h3>Header 3</h3>

                        <p>I'm a Collapsible.</p>

                    </div>

                </div>

                <div class="oj-col">col 2</div>

            </div>

        </div>

        <script type="text/javascript">

            function(oj, ko, $)

            {

                $(document).ready(

                        function ()

                        {

                            ko.applyBindings(null, document.getElementById('collapsiblePage'));

                        }

                );

            }

            ;

        </script>

    </body>

</html>

Error

Uncaught TypeError: Cannot use 'in' operator to search for '$' in undefined (18:29:48:198 | error, javascript)

  at public_html/js/libs/oj/v2.0.1/min/oj.js:6

Uncaught ReferenceError: define is not defined (18:29:48:203 | error, javascript)

  at public_html/js/libs/oj/v2.0.1/min/ojdatagrid.js:6

Uncaught ReferenceError: define is not defined (18:29:48:210 | error, javascript)

  at public_html/js/libs/oj/v2.0.1/min/ojdatagrid-model.js:6

Uncaught ReferenceError: define is not defined (18:29:48:215 | error, javascript)

  at public_html/js/libs/oj/v2.0.1/min/ojcomponents.js:5

Uncaught ReferenceError: define is not defined (18:29:48:223 | error, javascript)

  at public_html/js/libs/oj/v2.0.1/min/ojmodel.js:6

Uncaught ReferenceError: define is not defined (18:29:48:228 | error, javascript)

  at public_html/js/libs/oj/v2.0.1/min/ojmodule.js:6

Uncaught ReferenceError: define is not defined (18:29:48:235 | error, javascript)

  at public_html/js/libs/oj/v2.0.1/min/ojcollapsible.js:11

Uncaught SyntaxError: Unexpected token ( (18:29:48:245 | error, javascript)

  at public_html/index.html:64

Failed to load resource: net::ERR_EMPTY_RESPONSE (18:29:48:437 | error, network)

  at http://localhost:8383/favicon.ico

Debugging session with browser was closed.
This post has been answered by 2952341 on Aug 18 2016
Jump to Answer
Comments
Post Details
Added on Aug 17 2016
#oracle-jet
3 comments
839 views