[jQuery] addClass transparency overlay not correct from a ajax data callback
I am trying to overlay the display of two ajax data calls in order
that a user can compare the results. I had it working as a straight up
css and php call, but trying to user jquery and an ajax return of
data, I can not get the one set of divs to overlay transparently with
the other.
To see what I'm trying to do go to http://ncas-cms.nerc.ac.uk/data/startFiles/anim_overlay.php
and select the last selection from each select. See how the pink 2007
row blocks out the green 2007 row (for example) When I had it working
without ajax, you could see the pink 2007 row "interlaced" with the
green 2007 row.
[code]
<script src="jquery-1.2.2/jquery.js" type="text/javascript"></
script>
<script src="/custom/javascript/jquery-1.2.1/plugins/
jquery.selectboxes.js" type="text/javascript"></script>
<style type="text/css">
#BAModelName {position:absolute; top: 300px; left: 90px;
background:#99CC99; width:310px; text-align: left; padding-left:10px;}
#MO_ModelName {position:absolute; top: 300px; left: 500px;
background:pink; width: 310px; float:right;text-align: left;padding-
left:10px;}
#wrapBA {position:absolute; top: 330px; left: 40px; width: 900px;}
#wrapBA div.filetypeSubHeaders {width:160px; margin-left: 60px;
text-align: left;padding: 3px; background: #99CC99; clear: both;}
#wrapBA div.YearHeaders {width: 45px;float: left;text-align:
center;vertical-align:middle; font-weight:bold;}
#wrapBA div.EachYear {clear: both;}
#wrapBA div.modelYears {width: 850px;float: left; }
#wrapBA div.overlay_right {text-align:center;width: 30px;float:
left;padding: 1px; border:1px solid #FFF;}
#wrapBA div.availableBADC {text-align:center;width: 30px;float:
left;padding: 1px; border:1px solid #FFF; background: #99CC99;}
#wrapBA div.missingData {text-align:center;width: 30px;float:
left;padding: 1px; border:1px solid #FFF;}
#wrapMO {position:absolute; top: 330px; left: 40px; width: 900px;}
#wrapMO div.filetypeSubHeaders {width: 160px; margin-left:500px;
text-align: left; padding: 3px; background: pink;clear: both;}
#wrapMO div.YearHeaders {width: 45px;float: left;text-align:
center;vertical-align:middle;font-weight:bold;}
#wrapMO div.EachYear {clear: both;}
#wrapMO div.modelYears {width: 850px;float: left;}
#wrapMO div.overlay_left {text-align:center;width: 30px;float:
left;padding: 1px; border:1px solid #FFF;}
#wrapMO div.availableMO {text-align:center;width: 30px;float:
left;padding: 1px; border:1px solid #FFF; background: pink;}
#wrapMO div.missingData {text-align:center;width: 30px;float:
left;padding: 1px; border:1px solid #FFF;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#wrapBA').hide();
$('#wrapMO').hide();
$('select#ba').change(function() {
var ba= $("select#ba").val();
$.ajax({
type: "POST",
url: "overlay_info.php",
data: "ba=" + ba,
dataType: "html",
cache: false,
error: function(){
alert('Error loading start files');
},
success: function(data) {
$('#wrapBA').html(data);
$('#wrapBA').show();
$("#BAModelName").html("BA -
"+badc).show().addClass("BAModelName");
$("#wrapBA").addClass("wrapBA");
$("#wrapBA div.YearHeaders").addClass("YearHeaders");
$("#wrapBA div.EachYear").addClass("EachYear");
$("#wrapBA div.modelYears").addClass("modelYears");
$("#wrapBA
div.overlay_right").addClass("overlay_right");
$("#wrapBA div.availableBA").addClass("availableBA");
$("#wrapBA div.missingData").addClass("missingData");
$('#wrapBADC').slideDown('fast');
}
});
});
$('select#mo').change(function() {
var mo = $("select#mo").val();
$.ajax({
type: "POST",
url: "overlay_info.php",
data: "mo=" + mo,
dataType: "html",
cache: false,
error: function(){
alert('Error loading files');
},
success: function(data) {
$("#MO_ModelName").html("MO -
"+mo).show().addClass("MO_ModelName");
$("#wrapMO ").html(data);
$("#wrapMO ").show();
$("#wrapMO ").addClass("wrapMetOffice");
$("#wrapMO div.YearHeaders").addClass("YearHeaders");
$("#wrapMO div.EachYear").addClass("EachYear");
$("#wrapMO div.modelYears").addClass("modelYears");
$("#wrapMO div.overlay_left").addClass("overlay_left");
$("#wrapMO div.availableMO").addClass("availableMO");
$("#wrapMO div.missingData").addClass("missingData");
$('#wrapMO ').slideDown('fast');
}
});
});
});
</script>
</head>
<body>
<div id="start">
<form method="POST" action="anim_overlay.php">
<table>
<tr valign="top">
<td colspan="5">Select which models to compare data
availability of start Files:</td>
</tr>
<tr valign="top">
<td> </td>
<td>BADC:</td>
<td>
<select id="ba" name="ba" size="9">
<option value="Global Model-EU.MN.MLV.FC (lbfm)">Global
Model - EU.MN.MLV.FC (lbfm)</option>
...
</select>
</td>
<td> </td>
<td>MO</td>
<td>
<select id="mo" name="mo" size="10">
<option value="European Model-EU.MN.MLV.FC">European
Model - EU.MN.MLV.FC</option>
...
</select>
</td>
</tr>
</table>
</form>
</div>
<div class="BAModelName" id="BAModelName">No Model Chosen</div>
<div id="wrapBA"></div>
<div class="MO_ModelName" id="MO_ModelName">No Model Chosen</div>
<div id="wrapMO"></div>
</body>
</html>
[/code]
And the overlay_info.php called by ajax is
[code]
<?php
if (isset($_POST['ba'])) {
$selected_model = $_POST['ba'];
$table = "ba";
$available_start = '<div class="overlay_right"></div><div
class="availableBA">';
$available_end = '</div>';
$missing= '<div class="overlay_right"></div><div
class="missingData"></div>';
}
if (isset($_POST['mo'])) {
$selected_model = $_POST['mo'];
$table = "met_office";
$available_start = '<div class="availableMO">';
$available_end = '</div><div class="overlay_left"></div>';
$missing= '<div class="missingData"></div><div
class="overlay_left"></div>';
}
... bla bla query stuff
echo '<div id="filetypeSubHeaders" class="filetypeSubHeaders">'.
$file_type.'</div>';
foreach ($modelYears as $modelYear) {
echo '<div class="EachYear">';
echo ' <div class="YearHeaders">'.$modelYear->year.'</div>';
echo ' <div class="modelYears">';
... more queries
foreach ($modelFileTypesMonths as $months) {
$month_array = explode(",",$months->months);
for ($y=1;$y<=12;$y++) {
if(in_array($y,$month_array)) {
echo $available_start.$y.$available_end;
} else {
echo $missing;
} // end if in array
} // end for y
} // end foreach month
} else { // if there are no months for that year
print out a list of twelve boxes
for ($y=1;$y<=12;$y++) {
echo $missing;
} // end for y
} // end if no months for that
year
echo ' </div>'; // end modelYears
echo '</div>'; // end EachYear
} // end foreach every modelYear
?>
[/code]
I think its something in the addClass - but now sure what.
Thanks for any help