IBM Worklight - jQuery FullCalendar library not getting displayed

StackOverflow https://stackoverflow.com//questions/22010253

문제

I am trying to integrate the FullCalendar(v1.6.4) library into my application, developed using IBM Worklight 6.1.0.

The calendar control loads and functions properly in the simulator. However when the same application is installed in a device (iPad, Android), the calendar control does not load and it throws the following error:

'undefined' is not a function (evaluating '$('#calendar').fullCalendar')

Code:

<script type="text/javascript" src="js/jsapi/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jsapi/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jsapi/jquery-ui.js"></script>
<script type="text/javascript" src="js/general.js"></script>

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

<!-- Calendar Starts Here -->

<link href="css/fullcalendar.css" rel='stylesheet' />
<link href="css/fullcalendar.print.css" rel='stylesheet' media='print' />

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

<script src="js/fullcalendar.min.js"></script>
<!-- Calendar Ends Here -->
도움이 되었습니까?

해결책

You did not add the most crucial and relevant information to your question, namely how exactly you have implemented it. The references in the HEAD element are nice, but also are not helpful at all...

I have done the below and it works fine for me:

common\index.html

<!DOCTYPE HTML>
<html>
        <head>
            <meta charset="UTF-8">
            <title>CalenderApp</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
            <link rel="shortcut icon" href="images/favicon.png">
            <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
            <link rel="stylesheet" href="css/main.css">
            <link rel="stylesheet" href="jqueryMobile/jquery.mobile-1.4.1.css">
            <script>window.$ = window.jQuery = WLJQ;</script>
            <script src="jqueryMobile/jquery.mobile-1.4.1.js"></script>

            <!-- Calendar -->
            <link rel="stylesheet" href="css/fullcalendar.css">
            <script src="js/fullcalendar.js"></script>
            <script src="js/gcal.js"></script>
            <!-- End Calendar -->

        </head>
        <body style="display: none;">
            <div data-role="page" id="page">
                <div data-role="content" style="padding: 15px">
                    <div id='calendar'></div>
                </div>
            </div>
            <script src="js/initOptions.js"></script>
            <script src="js/main.js"></script>
            <script src="js/messages.js"></script>
        </body>
</html>

common\main.js

function wlCommonInit(){
     $('#calendar').fullCalendar({
         weekends: false
     });
}

End result (in Nexus 5 running Android 4.4, but will be the same in iOS) enter image description here

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top