We Keep Coding

Hiding a div container including php generated content with a script

I'm currently working on a website which has a search engine including advanced search options with filters. I want to hide the filters until a category has been chosen. I'm not sure if that script would even work within the php file, because I also tried the script with simple alerts but it didn't work. I positioned this script at the end of the php file of the advanced search options.
<script>
if (document.getElementById("main_cat").value == "-1")
{
document.getElementById("custom_fields").style.display = "none";
}
else
{
document.getElementById("custom_fields").style.display = "inline";
}
</script>
custom_fields is the id of a div container which displays all the filters with php generated content. main_cat is the id of the category, if the value is -1, no category is chosen.
I'm working on a website with wordpress if that is important to know.
Thanks for your help!

I think you have a minor semantic error that's causing your script to not function as expected. Also, to achieve the functional behaviour for the <select> you will need to do a few extra things, namely, to listen to the change event:
<script>
// Store variables to elements we want to work with
var mainCat = document.getElementById("main_cat")
var customFields = document.getElementById("custom_fields")
// When the website first loads, hide "custom_fields" by default
customFields.style.display = "none";
// When the user changes the main_cat select, check it's value. If
// value == "-1" then hide custom_fields. Otherwise display custom
// fields as inline
mainCat.addEventListener("change", function() {
if (mainCat.value == "-1")
{
customFields.style.display = "none";
}
else
{
customFields.style.display = "inline";
}
})
</script>
As a final note, I saw that the script was actually commented out on your website. Just below the <!--Script Custom Fields-->, the script was enclosed in /* ... */ - remove those to ensure that the script does run, rather than be ignored by the browser.
Hope this helps!

Can't get tooltip to go away

In a form, I have a State dropdown and a Zip Code text box. The client has specified they want to check to be sure the zip code matches the state, and if not, to pop up a message and prevent the form from being submitted.
After either the zip or the state is changed, I call an ajax function on the server to make sure the zip code is inside the state. If not, I pop up a tooltip over the zip code check box that says "Zip Code Not In Selected State". So that the tooltip doesn't appear unless there is a mismatch, I don't add it until/unless the zip doesn't match the state. That all works well.
Then, if the zip code changes, and it matches, I want to get rid of the tooltip. This is the part I can't get working. No matter what I try, that pesky tooltip sticks around, even after the zip matches the state.
Here's the client side method:
function CheckZip() {
var zip = $("#ZipCode").val();
var zipLength = zip.length;
var state = $("#StateCode").val();
if (zipLength === 5) {
$.getJSON("/Home/CheckZip", { zipCode: zip, stateCode: state },
function (data) {
if (data == "true") {
$('#ZipCode').tooltip('disable');
$('#ZipCode').tooltip().mouseover();
}
if (data == "false") {
$('#ZipCode').attr('data-toggle', 'tooltip');
$('#ZipCode').attr('data-placement', 'top');
$('#ZipCode').attr('title', 'Zip code not in selected state.');
$('#ZipCode').tooltip().mouseover();
DisableSubmitButton();
}
if (data == "error") {
// todo
}
});
}
else {
DisableSubmitButton();
}
}
This doesn't seem to be the right combination to make the tooltip go away.
$('#ZipCode').tooltip('disable');
$('#ZipCode').tooltip().mouseover();
I've also tried just removing all the attributes, opposite of what's done in if (data == "false"). That didn't work either.
Any ideas?

Try this once :
$("#ZipCode").off('mouseover',rf);

As I asked you in the comments if you were using bootstrap, I have an anwer for you. To hide the tooltip you must change disable to hide. Also you have to remove the line below the hide event, like this:
if (data == "true") {
$('#ZipCode').tooltip('hide');
}
Documentation for bootstrap tooltips can be found here
I hope this will help!

What I ended up doing was just creating my own div which, using CSS, hovers just over the Zip textbox. I can hide it and show it whenever I want. This works perfectly. Found a thread here on Stack Overflow that showed me how to do the css:
Relatively position an element without it taking up space in document flow

Element with hidden css not changing with javascript .show()

I have a dropdown list that I am hiding on initialization since it's not needed unless the client actually selections a specific radiobuttonlist object. I'm presently setting it to false through
dlInterval.Attributes.CssStyle[HtmlTextWriterStyle.Visibility] = "hidden";
However, attempting to change this through javascript on selection, is failing, at present, I have my code set up to execute as such.
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#<%=rblVectorChoices.ClientID%>").click(function() {
var intVectorSelectedIndex = $('#<%=rblVectorChoices.ClientID %> input[type=radio]:checked').val();
$("#<%=dlInterval.ClientID %>").style.visibility="visible";
if (intVectorSelectedIndex == 1) {
$("#<%=dlInterval.ClientID%>").show();
} else {
$("#<%=dlInterval.ClientID%>").hide();
}
});
});
</script>
As you can see I'm currently attempting to change the visibility from hidden, back to visible, yet I am receiving an error in the browser console 'TypeError: Cannot set property 'visibility' of undefined'
This doesn't make much sense to me, as the field should be hidden, and not just null. What is causing this to happen, and what is a good solution for such a thing?

The HTML attribute is not called visibility.
In CSS the corresponding attribute for .show() / .hide() is display.

the code you were looking for is :
dlInterval.Attributes.CssStyle["display"] = "none";
or you can just change the javascript to look like, I personally would think that you should hide the element in javascript if your going to show it in javascript . Instead of setting the display:none; in .Net code that is going to disappear when the page is rendered
just re-write your code like this:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
// hide element initially
$("#<%=dlInterval.ClientID%>").hide();
$("#<%=rblVectorChoices.ClientID%>").click(function() {
// much easier way to check if check box is checked
if ( $("#<%=rblVectorChoices.ClientID input[type=radio]:checked%>").is(":checked)) {
$("#<%=dlInterval.ClientID%>").show();
} else {
$("#<%=dlInterval.ClientID%>").hide();
}
});
});
</script>
also , I strongly , strongly reccomend using classes to select your html elements with javascript or jquery , .Net mangles the id's and you have to write out this weird syntax to get the proper id, uses classes prevents all that
NOTE: if you're going to use this second example then you never need to mess with
dlInterval.Attributes.CssStyle["display"] = "none";

Can you use prop and compare if it's true or false? Also, you cant call $("#<%=dlInterval.ClientID %>").style.visibility="visible"; you have to call it this way:
For those of you reminiscing on the missing .NET inline ID's here's my modified code:
$(document).ready(function () {
$("#<%=rblVectorChoices.ClientID%>").click(function () {
var intVectorSelectedIndex = $('#<%=rblVectorChoices.ClientID%>').prop('checked');
$("#<%=dlInterval.ClientID%>").css('visibility', 'visible');
if (intVectorSelectedIndex == true) {
$("#<%=dlInterval.ClientID%>").show();
} else {
$("#<%=dlInterval.ClientID%>").hide();
}
});

jQuery: Single change event to fire multiple functions not working

I'm systematically building jQuery functions such that the css classes of various inputs in a web form have dependencies on other inputs (i.e. when a given input has a given value, the "hide" class is removed from the appropriate subsequent input etc.)
A specific (working) example of the jQuery I am using is:
$(document).ready(function(){
$("input[name$='q_4']").change(function(){
if(this.value == 'Yes') {
$('#qu_5').removeClass('hide');
} else {
$('#qu_5').addClass('hide');
}
});
});
In this example, the dependent question div (#qu_5) depends on the value entered via radio button for (name=q_4) to be "Yes".
Because I am building these functions dynamically (users can edit properties of questions such that they have these kinds of display dependencies) via a database, I end up with multiple chunks of this code on a page with several interdependent inputs. Each chunk of code has the name of the master question, the id of the slave question and the value that the slave relies on to be revealed. This also works as intended.
Sometimes however, one input should reveal multiple other questions so I end up with code something like:
$(document).ready(function(){
$("input[name$='q_87']").change(function(){
if(this.value == 'yes') {
$('#qu_88').removeClass('hide');
} else {
$('#qu_88').addClass('hide');
}
});
$("input[name$='q_87']").change(function(){
if(this.value == 'yes') {
$('#qu_89').removeClass('hide');
} else {
$('#qu_89').addClass('hide');
}
});
});
This does not work. (and indeed stops all the reveal / hide functions working on that page)
I presume it is because jQuery/javascript isn't happy with the same event input[name$='q_87']").change firing two different functions? This is the only thing I can think of.
Does anyone have any advice as to how I could achieve what I want in a way that works? Thanks! :)

If you need a var and an array you can write it like this
var questions = {
"q_87":["qu_88","qu_89"],
"q_96":["qu_95","qu_99"]
}
$.each(questions,function(q,arr) {
$("input[name$='"+q+"']").change(function(){
$("'#"+arr.join(",#")+"'").toggleClass('hide',this.value == 'yes');
});
});

modal popup reopened javascript doesnt work

I have been trying to do a JS Fiddle of this but cant seem to make it happen as my javascript loads its html via PHP controller.
However.
I have a JQuery UI modal popup window contained the appropriate view which is a from. I have some JS on this form that shows and hides divs depending on a select box:
function showDiv(divName)
{
document.getElementById(divName).style.display='';
}
function hideDiv(divName)
{
document.getElementById(divName).style.display='none';
}
function toggleOpDiv(showID)
{
if (showID == '1')
{
hideDiv('plus');
hideDiv('mult');
showDiv('perc');
}
else if (showID == '2')
{
hideDiv('mult');
hideDiv('perc');
showDiv('plus');
}
else if (showID == '3')
{
hideDiv('plus');
hideDiv('perc');
showDiv('mult');
}
else
{
hideDiv('plus');
hideDiv('mult');
hideDiv('perc');
}
}
this is then triggered quite simply by:
<select id="frm_source" name="operator" onchange="toggleOpDiv(this.value)">
<option value="1">Percentage</option>
<option value="2">Plus/Minus</option>
<option value="3">Multiplier</option>
</select>
This is working as I'd expect, however when I close the box and re-open it, no JS is working at all.
I have read that this is due to Ajax firing? How can I reset this on the form load?

function showDiv(divName)
{
document.getElementById(divName).style.display = '';
}
I think you meant setting display to block like this instead:
document.getElementById(divName).style.display = 'block';
I guess there have to be some error in your code, which is the cause why something is broken with your javascript.
Try to use FireBug to check whether your site doesn't contain any errors before dialog open and thereafter.
Even if your HTML comes dynamically from outside, try to put this as static html in a jsfiddle, which will help you to track and solve your problem.
Other than that, it will be guesswork without seeing full example/jsfiddle.