Here is the HTML code I am working with:
<div class="span-6">
<p>
<table id="symptomTable" class="symptomsTable hidden"><th>Selected Symptoms:</th><tr></tr></table>
</p>
</div>
This is my CSS code:
.hidden
{
display : none;
}
Now onto my javascript:
$('#addSymptom').click(function()
{
if($('#symptomToBeSearchedTitle').val()=="")
{
alert('You need to select a symptom.');
}
else if($('#dateSymptomSeen').val()=="")
{
alert('You need to select the date the symptom was first seen on.');
}
else
{
//create a new symptom using javascript
var newSymptom =
{
symptomCode: $('#symptomToBeSearchedCode').val(),
dateSymptomFirstSeen: $('#dateSymptomSeen').val(),
symptomTitle: $('#symptomToBeSearchedTitle').val()
};
//create a new object for symptom code
symptomCodesQueryString = symptomCodesQueryString+"&symptomCode[]="+newSymptom.symptomCode;
//pass the new symptom into the symptomsList array
symptomsList.push(newSymptom);
//increase the counter
counter++;
//empty input fields
$('#symptomToBeSearchedCode').val("");
$('#symptomToBeSearchedTitle').val("");
//append the new symptom to the symptoms table
$('#symptomTable tbody').append('<tr class="child"><td>'+newSymptom.symptomTitle+'</td></tr>');
$('#symptomTable').removeClass("hidden");
}
});
Everything in my script works correctly except for this final command
$('#symptomTable').removeClass("hidden");
It does not seem to execute at all. I have checked the console in firebug and there are no errors showing up. Can anyone provide assistance on how to fix this issue? I have also tried using show() but that did not work either. Thank you for your help.