Coldfusion с помощью javascript для отображения/скрытия блока div

Question

Я программирую ColdFusion5 и пытаюсь показать/скрыть блок div кода, основанный на вызове onchange оператора select. Я нашел похожие проблемы в Интернете, однако мне не повезло с использованием стиля. Отображение или видимость. С помощью этого кода я могу войти в функцию js, первое предупреждение отключит значение выбора select, и я получаю второе предупреждение внутри оператора if. Как только он попадает в линию, чтобы скрыть/показать 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"); 
     } 
} 

Answer 1

Оказывается, это была проблема с overscoping, убрав имя формы решить эту проблему:

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

Answer 2

Это не давало мне покоя, поэтому я попытался это с 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. Я не пробовал это в других браузерах.

Answer 3

Я даю 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 и не проверить в другом браузере.

Answer 4

Попробуйте этот код ............

<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()" />