problem with IE and jquery selector - dont' see change event
I can't seem to get this jquery code to work in IE, it works in FF and chrome though. I believe it's a problem with the selector but not really sure.
Here's the jquery code in question:
-
<script type="text/javascript">
$().ready(function(){
$.ajax({
url: 'getProject.php',
type: 'POST',
success: function(projectComboBox){
$('.projectComboBox').append(projectComboBox);
}
});
});
$(function(){
$('.projectComboBox').change(function(){
var project = $('option:selected', this).val();
$.ajax({
url: 'getBuild.php',
type: 'POST',
data: 'project=' + project,
success: function(buildComboBox){
$('.buildComboBox').replaceWith("<div class='buildComboBox'>" + buildComboBox + "</div>");
}
});
});
});
$(function(){
$('#submit').click(function(){
$('#getreport').append('<img src="img/indicator.gif" alt="loading" id="loading" />');
var project = $('.projectComboBox option:selected').val();
var build = $('.buildComboBox option:selected').val();
$.ajax({
url: 'getReport.php',
type: 'POST',
data: 'project=' + project + '&build=' + build,
success: function(results){
$('#report').append('<p class="report"><h4>' + project + ' - ' + build + '</h4>' + results + '</p>');
$('#loading').fadeOut(500, function(){
$(this).remove();
});
}
});
});
});
</script>
The html looks like this:
-
<body>
<h2>L1 Metrics</h2>
<p>
Select a project and a build then click the "Get Report" button
</p>
<div class="projectComboBox">
</div>
<br/>
<div class="buildComboBox">
</div>
<div id="getreport">
<br/>
<input type="submit" name="submit" id="submit" value="Get Report" />
</div>
<div id="report">
</div>
</body>
What I think this is doing (and seems to work in other browsers) is:
Once the document loads - run the php script getProject.php. This will then return a <select ...> that has selectable things in it (of course).
Then when something is selected in this combo box, another script is called - getBuild.php. This too returns a comboBox.
What I'm seeing in IE is that the change event is never being seen when the selection is made in the first combobox (causing the second combobox to never be built). I'm guessing that I've got something wrong in the selector for the second function. I've tried using class and id as identifiers but still never get the change event to be seen.
Any help would be appreciated. I'm pulling my hair out over this one!