識別並修復javascript/prototype/jquery衝突？

我遇到了一個我無法找到適當修復程序的腳本的問題。我有這個代碼，它使用glassbox.js和它的所有額外功能，它用來工作（它適當地顯示了glassbox），但是因爲我添加了JQuery到它已停止工作的文件。我不知道如何重新排列或調用腳本，以便它再次運行。註釋掉線myBox.whatever是專門導致了問題的線路：識別並修復javascript/prototype/jquery衝突？

@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>

來源

2013-03-14 barnacle.m

你必須把jQuery的在noConflict並通過$進入就緒事件在這裏：

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

這是做的一種方式它，檢查文檔還有其他模式。

來源

2013-03-14 10:57:27 elclanrs

優秀，完美謝謝！ – 2013-03-14 13:13:13

識別並修復javascript/prototype/jquery衝突？

回答

相關問題