Fatal编程技术网
  • jquery-mobile/
  • Jquery mobile $.mobile未定义（Worklight和jQuery mobile）

Jquery mobile $.mobile未定义（Worklight和jQuery mobile）

jquery-mobile ibm-mobilefirst

Jquery mobile $.mobile未定义（Worklight和jQuery mobile）,jquery-mobile,ibm-mobilefirst,Jquery Mobile,Ibm Mobilefirst,我有主要的html： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" /> <title

我有主要的html：

<!DOCTYPE html>     
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <title>Home</title>
    <link rel="stylesheet" href="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    <link rel="stylesheet" href="css/Home.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    <link rel="stylesheet" href="css/theme-addon.css" type="text/css" media="screen" title="no title" charset="utf-8" />

    <script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body id="content" style="display: none">

    <div data-role="page" id="homePage">
        <div data-role="header"><div class="ui-title">Home</div></div>
        <div data-role="content" style="text-align: center">
            <a data-role="button" id="login" class="fullWidth">Login</a>
        </div>
    </div>

    <script src="js/initOptions.js"></script>
    <script src="js/Home.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/messages.js"></script>

</body>
当我点击登录按钮时，它给出错误
$


$.mobile.changePage($('#nextPage.html'));



有没有人能告诉我我的代码出了什么问题？我相信我做了正确的事情？此外，我使用的是5.0.2.407-developer-editionWorklight版本。
Worklight已经与jQuery捆绑在一起，因此您不应该像在HTML底部那样再次添加它。另外，你也不应该把它放在底部，而应该放在头部——去掉那条线

此外，将对jQuery Mobile的引用也移动到头a

使用Worklight 5.0.6.1（最新版本，您似乎没有使用）和jQuery Mobile 1.3.1，我创建了一个新项目和应用程序，并对HTML进行了如下修改：


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>testapp</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/testapp.css">
    <script src="jqueryMobile/jquery.mobile-1.3.1.min.css"></script>
    <script src="jqueryMobile/jquery.mobile-1.3.1.min.js"></script>
    <script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
    <div data-role="page">
    testapp

    </div>
    <script src="js/initOptions.js"></script>
    <script src="js/testapp.js"></script>
    <script src="js/messages.js"></script>
</body>
</html>




特斯塔普
window.$=window.jQuery=WLJQ；
特斯塔普



  • 我将缩小的.css和.js文件放在一个文件夹中，并在HEAD元素中引用它们
    • 

  • 我在BODY元素中添加了
    • 

  • 全部构建并部署
    • 

  • 通过Worklight控制台预览
    • 
工作。。。
我建议您从小处着手（包括使用最新版本的Worklight和jQuery Mobile），并在此（工作）基础上进行构建）
    

    您可以从Eclipse Marketplace获得最新版本的Worklight（在Eclipse中，请查看帮助菜单>>Marketplace）。
    Worklight已经与jQuery捆绑在一起，因此您不应该像在HTML底部那样再次添加它。另外，你也不应该把它放在底部，而应该放在头部——去掉那条线
    
此外，将对jQuery Mobile的引用也移动到头a
    
使用Worklight 5.0.6.1（最新版本，您似乎没有使用）和jQuery Mobile 1.3.1，我创建了一个新项目和应用程序，并对HTML进行了如下修改：
    

    <!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>testapp</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/testapp.css">
    <script src="jqueryMobile/jquery.mobile-1.3.1.min.css"></script>
    <script src="jqueryMobile/jquery.mobile-1.3.1.min.js"></script>
    <script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
    <div data-role="page">
    testapp

    </div>
    <script src="js/initOptions.js"></script>
    <script src="js/testapp.js"></script>
    <script src="js/messages.js"></script>
</body>
</html>

    

    
特斯塔普
window.$=window.jQuery=WLJQ；
特斯塔普

    

  • 我将缩小的.css和.js文件放在一个文件夹中，并在HEAD元素中引用它们
    • 

  • 我在BODY元素中添加了
    • 

  • 全部构建并部署
    • 

  • 通过Worklight控制台预览
    • 
工作。。。
我建议您从小处着手（包括使用最新版本的Worklight和jQuery Mobile），并在此（工作）基础上进行构建）
    

    您可以从Eclipse Marketplace获得最新版本的Worklight（在Eclipse中，请查看帮助菜单>>Marketplace）。
    最后，我通过以下方式解决了此问题：
    

    <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    var jq = jQuery.noConflict();
</script>
<script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>

    
而不是
    

    $.mobile.changePage("the.html");

    

    最后，我通过以下方式解决了这个问题：
    

    <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    var jq = jQuery.noConflict();
</script>
<script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>

    
而不是
    

    $.mobile.changePage("the.html");

    

    因为jquery和jquery mobile都应该放在
    中，jquery应该在jquery mobileIt使我的应用程序成为纯html页面之前加载。好的，至少先加载jquery。因为jquery和jquery mobile都应该放在
    中，jquery应该在jquery mobileIt使我的应用程序成为纯html页面之前加载page..Ok至少先加载jquery.Ok。因此，我删除了
    jquery
    行，将
    jquery.mobile
    移动到
    head
    并在正文底部留下
    initOption.js
    、
    Home.js
    和
    message.js
    ，但我的应用程序变成了一个普通的html页面。请更新你问题中的代码片段，并说明更改后的样子。嗨，伊丹，对不起，回复晚了，我昨天很忙。我已尝试使用您的代码，但仍然没有成功：（请查看我编辑的代码和底部的1行。我不能使用最新版本，因为控制台中会出现一些错误，我还需要包含jquery.min.js以防止任何未定义的错误。5.0.2是一个非常旧的版本，我上面的标记将无法与该版本一起使用。需要考虑一下。为什么控制台不能工作th 5.0.6？请解释一下。哦，这是一个非常旧的版本吗？我不知道，因为我对Worklight非常陌生，是从我的主管那里得到的。在你的代码中，jquery mobile中存在语法错误。我想也许最好先更新Worklight版本。今晚我会更新它，因为代理在我的办公室中阻止了它。好的。所以我删除了
    jquery
     将
    jquery.mobile
    移动到
    head
    ，并将
    initOption.js
    、
    Home.js
    和
    message.js
    移动到正文底部，但我的应用程序变成了一个普通的html页面。请更新问题中的代码片段，并说明更改后的样子。嗨，艾丹，很抱歉，我昨天很忙。我已尝试使用您的代码，但仍然没有成功：（请查看我编辑的代码和底部的1行。我不能使用最新版本，因为控制台中会出现一些错误，我还需要包含jquery.min.js以防止任何未定义的错误。5.0.2是一个非常旧的版本，我上面的标记将无法与该版本一起使用。需要考虑一下。为什么控制台不能工作th 5.0.6？请解释。哦，这是一个非常旧的版本吗？我不知道，因为我对Worklight非常陌生，并且是从我的主管那里得到的。对于您的代码，jquery mobile中存在语法错误。我认为可能最好先更新Worklight版本。今晚我会更新它，因为代理会在我的办公室中阻止它。注意：如果使用较新版本的Worklightlight不需要这样做。注意：如果使用较新版本的Worklight，则不需要这样做。