使用jQuery通過表單輸入加載並顯示一個正式的javascript文件

Question

我的救援人員網站的一部分正在顯示一組內容，這些內容基於我們的庇護所管理軟件提供的javascript源。 他們沒有選擇通過軟件即時過濾結果。 因此，我事先基於一組特定的過濾器在其網站上創建了單獨的javascript文件。 我正在嘗試使用基本的單選按鈕形式來選擇不同的預過濾結果，並使用jQuery顯示與每個結果相關聯的div。 這是我所擁有的，並且在pricelesspetrescue.org/test-page中部分起作用

<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript'>
function displayForm(c) {
    if (c.value == "2") {    
        jQuery('#claremontdogContainer').toggle('show');
        jQuery('#chdogContainer').hide();
    }
        if (c.value == "1") {
         jQuery('#chdogContainer').toggle('show');
         jQuery('#claremontdogContainer').hide();
    }
};
</script>

</head>
<body>
<label>Please select a location to view:</label>
<form>
    <input value="1" type="radio" name="formselector" onClick="displayForm(this)"></input>Chino Hills
    <br>
    <input value="2" type="radio" name="formselector" onClick="displayForm(this)"></input>Claremont
</form>

    <div style="display:none" id="chdogContainer">
    <script src="https://toolkit.rescuegroups.org/j/3/FzemP6HU/toolkit.js"></script>    
    <script type="text/javascript"> 
    </script>
    </div>

    <div style="display:none" id="claremontdogContainer">
    <script src="https://toolkit.rescuegroups.org/j/3/4ANRW3x8/toolkit.js"></script>    
    <script type="text/javascript"> 
    </script>
    </div>

</body>
</html>

無效的是傳入的javascript代碼不完整。 雖然顯示了結果，但是例如，如果您轉到pricelesspetrescue.org/adoptable-dogs/ ，則可以看到單擊單個結果將加載顯示該結果詳細信息的彈出窗口。 好像它加載了結果，但是隨后關閉，導致無法操作任何內容。 難道無法在同一頁面上運行兩種不同的格式嗎？ 我怎樣才能同時工作？

javascript文件應該具有能夠單擊結果的附加功能，並且可以打開詳細信息彈出窗口。 如果我僅自行加載javascript <script src="https://toolkit.rescuegroups.org/j/3/4ANRW3x8/toolkit.js"></script>而沒有jQuery內容，則此功能有效。 這是在liveless Pricerespetuesue.org/adoptable-dogs實時網站上使用的內容。 那里沒有額外的編碼來使結果可單擊。 我在div中正好加載了它，但是它不起作用。

Answer 1

為了使用“純” Javascript動態加載腳本，您需要使用Ajax和eval 。

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
           if(xmlhttp.status == 200){
               eval(xmlhttp.responseText);
           }
           else if(xmlhttp.status == 400) {
              console.log('Error 400')
           }
           else {
               console.log('Unexpected error')
           }
        }
    }

    xmlhttp.open("GET", "https://toolkit.rescuegroups.org/j/3/FzemP6HU/toolkit.js", true);
    xmlhttp.send();
}

或使用jQuery。

$.ajax({
    url: "https://toolkit.rescuegroups.org/j/3/FzemP6HU/toolkit.js",
    context: document.body,
    success: function(result){
      eval(result);
    }
});

不要忘記從HTML中刪除script標簽。

使用jQuery通過表單輸入加載並顯示一個正式的javascript文件

問題描述

1 個解決方案

解決方案1
0 已采納 2015-08-20 04:49:01

使用jQuery通過表單輸入加載並顯示一個正式的javascript文件

問題描述

1 個解決方案

解決方案1 0 已采納 2015-08-20 04:49:01

解決方案1
0 已采納 2015-08-20 04:49:01