0

我对html不太了解。但是由于某种原因，我使用 $(...) 之类的项目并不总是可以通过 web api 工作。如果我将我的项目离线并从我的系统运行它，它们就可以工作。

例子：

使用这个$('...').bind('dragstart'...)来移动窗口可以离线工作，但在 webapi 上，事件不会被捕获。

使用 $(document).ready(function () {似乎会导致查找引用出现问题。删除函数并且代码会找到引用。

使用 jqwidgets 此行无法触发 $("#jqxgrid").jqxGrid

我在这里完全没有想法，有什么想法吗？

在此处添加我的代码，因为注释不会提供足够的空间：

.html 文件

<!DOCTYPE html5>
<html lang="en">
<head>
<title>---</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href=           "../../www/jQWidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../www/jQWidgets/scripts/jquery-1.9.1.min.js" ></script>
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxdata.export.js"></script> 
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxgrid.edit.js"></script>  
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxgrid.export.js"></script> 
    <script type="text/javascript" src="../../www/jQWidgets/scripts/gettheme.js"></script>
<script type='text/javascript' src='../../www/javascript/spreadSheet.js'></script>
<script type='text/javascript' src='../../www/javascript/dataLoader.js'></script>
<script type='text/javascript' src='../../www/javascript/windowMaker.js'></script>
<link href="../../www/window.css" rel="stylesheet" />
<style type="text/css" media="screen">
    canvas, img { display:block; margin:1em auto; border:1px solid black; }
    canvas { background:url(../../www/background.png) }
</style>
<script type="text/javascript">

    var loadedData = loadData();
    makeWindow();

    function init()//this is called after the data is loaded. So hult all other action untill its read. 
    {
        var data = loadedData[0].data.Name;
       // makeSpreadSheet()


    }

</script>
</head>
<body  class='default'>
    <div id="demo4_box" class="box message" data-minwidth="75" data-minheight="50">
        <div id="bar" class="handle bar"><h2> window1</h2></div>
        <div id="content" class="contents"><canvas id="canvas1" width="100" height="100"></canvas></div>
        <div id="slider" class="handle resize">//</div>
    </div> 
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
            <div style='margin-top: 20px;'>
            <div style='float: left;'>
                <input type="button" value="Export to Excel" id='excelExport' />
            </div>
        </div>
    </div>

</body>
</html>

数据加载器js文件

function loadData()
{
    var loadedData = new Array();
    $document).ready(function () {
        // Send an AJAX request
        $.getJSON("api/DB/",
        function (data) {
            $.each(data, function (key, val) {
                loadedData.push(val);
            }); init();
        });
    });
    return loadedData
}

窗口制造商js文件

function makeWindow( )
{
    $(window).load(function () {

        $('#demo4_box').bind('dragstart', function (event) {

            return $(event.target).is('.handle');
        }).bind('drag', function (event) {
            $(this).css({
                top: event.offsetY,
                left: event.offsetX
            });
        });

        $(".resize").bind('dragstart', function (event) {
            var $box = $(this).closest(".box");

            $box.data("width", $box.width());
            $box.data("height", $box.height());
            $box.data("x", event.offsetX);
            $box.data("y", event.offsetY);

        }).bind("drag", function (event) {
            var $box = $(this).closest(".box");

            $box.width(Math.max($box.data("width") - $box.data("x") + event.offsetX, $box.data("minwidth")));
            $box.height(Math.max($box.data("height") - $box.data("y") + event.offsetY, $box.data("minheight")));
        });
    });



}
4

2 回答 2

0

您用于包含脚本的相对 url 似乎可能是罪魁祸首......

../../www/<Blah>似乎它在 *nix 文件系统上有效，因此直接在浏览器中加载文件（绕过网络服务器）可能能够找到您的脚本，但是，当站点在 (say) 上作为服务器时www.example.com/test.html，没有虚拟目录级别“向上”。

诊断这是否是问题的最简单方法是使用 Firebug / Chrome 开发人员控制台并转到网络选项卡。将过滤器设置为 Javascript 并查看它是否真的在检索正确的 JS 文件。

这给我们带来了一个常用但仍然有点棘手的解决方法 - 基本 url 的概念。因为您希望您的页面能够正常工作，无论它是在

  • example.com/Test.html
  • example.com/MyApp/Test.html
  • example.com/MyApp/User/EditProfile.html

并且由于您不能总是知道它将被部署在哪里，或者明显的虚拟 URL 是否以任何方式与逻辑 url 相关（例如，出于 SEO 原因，有时/Find.php?Term=Bob会映射到/Find/Bob），您需要一种标准化的方式来引用源文件。

如果您知道您将在虚拟目录路径的根目录下运行，请使用相对于/eg的 url /static/scripts/jquery.js。另一方面，如果您可能部署在不同的位置，则通常使用服务器端脚本语言来填充base url变量。

假设 PHP 可能看起来像......

<script type="text/javascript" src="<?=$BaseUrl;?>static/scripts/jquery.js">

您将如何确定$BaseUrl取决于应用程序 - 有些通过巧妙地检查请求 url、使用逻辑文件系统和 url 重写规则的知识自动完成，有些则将其设置为配置选项。

顺便说一句，函数具有范围，与任何变量相同 - 因此在函数内部声明函数意味着只要父函数具有对它的引用或具有更大范围的变量指向它，它就会存在。例如...

$(document).ready(function() {

    func = function() {
        alert('ok1');
    }

    function func2() {
        alert('ok2');
    }

    func(); //Will work
    func2(); //Will work
});

func(); //Won't work for 2 reasons - one it's lost scope, 2 it will execute _before_ document is ready so before func has even been defined
func2(); //Won't work - same reasons

但.....

var superfunc;

function func() {
    alert('ok1');
}

$(document).ready(function() {
    superfunc = function(){alert('super');}
    func(); //Will work, document will be ready    
}

func(); //Will work but document won't be ready
superfunc(); //Won't work until after document is ready

有关更详细的说明，请参阅此页面

于 2013-04-27T09:56:09.637 回答
0

试试$.noConflict()。可能是它的$标志与其他扩展名冲突。还要确保您jquery.min.js在头部指定了文件。

并请提及代码以供审查。

于 2013-03-07T13:48:44.953 回答