ColdFusion的使用JavaScript來顯示/隱藏一個div塊

我在ColdFusion5編程，並試圖顯示/隱藏基於select語句的調用電平變化的代碼塊DIV。我在網上發現了類似的問題，但是我沒有運用style.display或visibility。通過這段代碼，我可以進入js函數，第一個警報觸發select選擇的值，並且在if語句中獲得第二個警報。一旦它擊中隱藏/顯示div的行，它就會退出。有任何想法嗎？ColdFusion的使用JavaScript來顯示/隱藏一個div塊

ColdFusion代碼（注：此代碼是一個iframe）：

<select name="select_Attendee_2" required="yes" onchange="parent.showHideGuestForm();"> 
     ...stuff... 
    </select> 
    <div id="GuestLayer1"> 
     ...more stuff... 
    </div>

使用Javascript（外部文件）：

function showHideGuestForm() 
{ 
    var iFrame = $($('#my_iframe').contents()); 
    alert(window.my_iframe.document.formAttendees.elements['select_Attendee_2'].value); 

    if ((trim(window.my_iframe.document.formAttendees.elements['select_Attendee_2'].value)) == '') 
     { 
      alert("before none"); 
      window.my_iframe.document.formAttendees.getElementById('GuestLayer1').style.display = 'hidden'; 
      alert("after none"); 
     } 
     else 
     { 
      alert("before block"); 
      window.my_iframe.document.formAttendees.getElementById('GuestLayer1').style.display = 'block'; 
      alert("after block"); 
     } 
}

來源

2013-02-27 mjhouseman

如果您使用Firefox/Firebug，您是否看到任何未定義的變量錯誤？ – 2013-02-27 17:16:10

Firebug顯示：TypeError：window.my_iframe.document.formAttendees.getElementById不是函數 – mjhouseman 2013-02-27 17:28:33

您可能會超出範圍。如果你在沒有formAttendees的情況下嘗試它，該怎麼辦？ – 2013-02-28 01:58:54

事實證明，它是與overscoping問題，刪除表格名稱解決了這個問題：

window.my_iframe.document.getElementById('GuestLayer1').style.display = 'none';

來源

2013-02-28 15:18:53 mjhouseman

這是竊聽我，所以我試着它與HTML文件。它與ColdFusion無關。這是iframe中頁面的相關部分。

<p id="p2">This is page 2.</p> 
<form id="myForm" action="Page2.html" method="post"> 
    <div id="div1"> 
     <p>This is in the div.</p> 
    </div> 

</form>

以下是父頁面的相關部分，包括javascript。

<p id="p1">hello</p> 
<iframe id="myIframe" width="100" height="200" src="Page2.html"></iframe> 
<p> 
    <button id="theButton" value="a button" onclick="hideDiv()"></button> 

</p> 
<script> 
    function hideDiv() { 
     var iFrame = document.getElementById("myIframe"); 
     var theDiv = iFrame.contentWindow.document.getElementById("div1"); 
     theDiv.style.visibility = "hidden"; 
    } 

</script>

此代碼適用於Firefox。我沒有在其他瀏覽器中嘗試過。

來源

2013-02-28 03:39:15

這非常有幫助，謝謝！ – mjhouseman 2013-02-28 15:19:56

我給jQuery的例子來隱藏/顯示上一個div檢查（在轉換）

<!--jquery code --> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
</script> 
<script language="jscript"> 
$(document).ready(function(){ 
$("#NewVendor").click(function(){ 
    $("#ebdiv").toggle(); 
}); 
}); 
</script> 
<!--jquery code ends --> 

<!-- cf part---> 
<input type="checkbox" name="NewVendor" id="NewVendor" /> New Vendor 

<div id="ebdiv" > 
<table border="0" width="70%" cellspacing="0" cellpadding="0" id="cartContentsDisplay"> 
<tr> 
<td width="25%"><b>New Vendor </b></td> <td>:*</td><td align="left"><cfinput type="text" name="VendorName" id="VendorName" value="" size="30" /> 
</td> 
</tr> 
<tr> 
<td><b>Address</b> </td> <td>:*</td><td align="left"><cfinput type="text" name="Address" id="Address" value="" size="30" /> 
</td> 
</tr> 
<tr> 
</table> 
<<!-- cf part ends--->

這是工作在Chrome，也爲您在其他瀏覽器。

來源

2013-02-28 05:07:20 coldfusiondevshop

不知道爲什麼這是upvoted。使用jQuery是一個好主意。然而，上面的代碼並沒有做他們所要求的，這是從iframe中的選擇列表中觸發一個動作。 – Leigh 2013-02-28 05:44:10

試試這個代碼............

<script type='text/javascript'> 
function showDiv() { 
    if (document.getElementById('hiddenDiv').style.display == 'block') { 
     document.getElementById('hiddenDiv').style.display = 'none'; 
    } else { 
     document.getElementById('hiddenDiv').style.display = 'block'; 
    } 
} 
</script> 
<div id="hiddenDiv" style="display:none;" class="answer_list" > 
    WELCOME 
</div> 
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

來源

2013-03-02 07:04:16 Alexix

這與接受的答案有什麼不同？ – Leigh 2013-03-14 19:32:53

ColdFusion的使用JavaScript來顯示/隱藏一個div塊

回答

相關問題