Question

我对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
}

window maker js file

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")));
        });
    });



}

Answer 1

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

请提及要审核的代码。

Answer 2

您用来包含脚本的相对网址似乎可能是罪魁祸首......

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

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

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

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

并且由于您无法始终知道它将在何处部署，或者明显的虚拟URL与逻辑URL有任何关联（例如，出于SEO原因，有时/Find.php?Term=Bob有时会映射到{ {1}}）您需要一种标准化的方式来引用源文件。

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

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

base url

如何确定<script type="text/javascript" src="<?=$BaseUrl;?>static/scripts/jquery.js">取决于应用程序 - 有些人通过巧妙地检查请求URL自动执行，使用逻辑文件系统和URL重写规则的知识，其他人将其设置为配置选项

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

$BaseUrl

但.....

$(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

有关更详细的说明，请参阅this page

web api和jquery给了我一些问题

在这里添加我的代码，因为评论不会给出足够的空间：

2 个答案: