I have a weird problem , below are two simple get calls and returning HTML from the other file. The HTML I am receiving has 3 comboxes and events on them selecting one combox populates other. Every thing works fine.
If I add the receiving HTML to the DIV I have. But if I call the file two times and add it to the two divs. If I select one combobox on the first set, even the second set also changing. Whatever the events on the first set of 3 boxes are automatically happening on the second set too and this is vice versa. But I want these two sets to be independent.
jQuery:
$.get("cars.php",{Make:'GM', Model:'Chevy', Year:'2009'},
function(percar){
$("#perPlace").append(percar);
});
$.get("cars.php",{Make:'Honda', Model:'Civic', Year:'2008'},
function(curcar){
$("#curPlace").append(curcar);
});
HTML:
<div id="perPlace" >
</div>
<div id="curPlace">
</div>
Returning HTML ( Cut down the CSS and values to make it simple ):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Select test</title>
<script type="text/javascript" src="../jquery-1.5.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$("select#make").change(function(){
var makeVar = $(this).val();
var jqxhr =$.getJSON("select.php",{make: makeVar, ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
if( i==0){
populateYear(j[i].optionValue );
}
}
$("select#model").html(options);
}).error(function(xhr, ajaxOptions, thrownError) { alert(xhr.statusText); })
})
$("select#model").change(function(){
populateYear($(this).val());
})
})
function populateYear(modelID){
$.getJSON("select.php",{model: modelID, ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
}
$("select#year").html(options);
})
}
</head>
<div class="field_container">
<select id="make">
<option value="1">GM</option>
<option value="2">HONDA</option>
<option value="3">FORD</option>
</select>
<select id="Model">
<option value="1">Chevy</option>
<option value="2">Pontiac</option>
</select>
<select id="Year">
<option value="1">2000</option>
<option value="2">2001</option>
<option value="3">2002</option>
</select>
</div>
We had faced the same problem and this is how we resolved it.
We prefixed the controls with the request (ex.
GetCar(Honda)will prefix the controls asHonda_Make,Honda_Model,Honda_Year). This enabled us to get unique controls whenever we want that view (we use MVC). The way we handled the events is by passing in the control to the function (ex.PopulateYear(YearDropdown);and the way we call that function isPopulateYear($("#Honda_Year"));