0

適切な修正が見つからないスクリプトの問題が発生しています。私はこのコードを持っています.glassbox.jsとそのすべてのエクストラを使用しています. スクリプトが再び機能するように、スクリプトを再配置または呼び出す方法がわかりません。コメントアウトされた行 myBox.whatever は、具体的に問題を引き起こしている行です:

@model OneEightyWebApp.Models.Centres
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />

<head>
    <title></title>

    <script src="../../Content/javascripts/prototype.js" type="text/javascript"> </script>
    <script src="../../Content/javascripts/scriptaculous/effects.js" type="text/javascript"></script>
    <script src="../../Content/javascripts/glassbox/glassbox.js" type="text/javascript"></script>

    <script type="text/javascript">
        var spaces = @Html.Raw(Json.Encode(ViewData["spaces"]))
        function glassLoad() {
            path_to_root_dir = "../../Content/";
            var myBox = new GlassBox();
            myBox.init('myBox', '600px', '400px', 'hidden', '', true, true);
           // myBox.apos('300', '300px');
           // myBox.appear();
            alert("clicked");
        }

    </script>
    <script src="../../Content/javascripts/prototype.js"> </script>
    <script type="text/javascript">
        document.observe('dom:loaded', function () {
            $$("body")[0].on('click', ".class1", function () {
                var myBox = document.getElementById("myBox");
                myBox.style.display = "block";
                glassLoad();
            });
        });
    </script>

    <script src="../../Content/jquery.js"></script>
    <script type="text/javascript">
        jQuery(function () {
            var array = [];
            jQuery("#centres").change(function () {
                var selectedCentre = $("#centres option:selected").text();
                $.getJSON("/Centres/output?centreName=" + selectedCentre, function (results) {
                    var data = results;
                    document.getElementById("container2").innerHTML = "";
                    var div;
                    for (var i = 0; i < document.getElementById("centres").value; i++) {
                        div = document.createElement("div");
                        div.className = "class1";
                        div.innerHTML = "Shop " + data[i];
                        div.innerHTML += "<br>";
                        div.innerHTML += "Floor Space: <b>" + spaces[i] + " m2 </b>";
                        div.style.width = "100px";
                        div.style.height = "100px";
                        div.style.padding = "0px";
                        div.style.float = "left";
                        document.getElementById("container2").appendChild(div);
                    }

                });
            });
        });
    </script>

</head>

<body>
    <div id="container1" style="width: auto; height: 50px;">
        <button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="glassLoad();">Generate</button>
        @Html.DropDownList("centres", (List<SelectListItem>)ViewData["centres"])
        <select id="mySelect"></select>
    </div>
    <div id="container2" style="margin: 10px; float: left;"></div>

    <div id="myBox" style="display: none; width: 600px; height: 400px;">
        <div id="exitButton" style="position: absolute; left: 564px; bottom: 173px; z-index: 1001;" title="close">
            <a href="javascript:THIS.fade();">
                <img id="exitImage" style="border: none;" src="../../Content/javascripts/glassbox/skins/exitButton.png"></a>
        </div>


    </div>

</body>
4

1 に答える 1

1

jQueryをnoConflict$に入れて、ここでreadyイベントに渡す必要があります。

$.noConflict();
jQuery(function ($) {
  var array = [];
  ... // use $ from now on instead of jQuery

これはそれを行う1つの方法です。他のパターンがあるドキュメントを確認してください。

于 2013-03-14T10:57:27.290 に答える