I am making a web form and some of it needs to be populated with a jQuery.ajax get jsonp call, and I'm having a problem coming up with the needed php code to format that json file.
I have an html page that has a <form>
and the select elements are shown below here.
<!-- lang-html -->
<select id="veh_make" name="Make"><option>Make</option></select>
<select id="veh_model" name="Model"><option>Make</option></select>
I'm using jquery.js and jquery-ui.js+css files, and jquery.form.plugins with my functions to populate the vehicle makes and models, but everytime I get an error saying
Error: jQuery18302370089164328284_1491704657702 was not called
I am requesting the file with jQuery.ajax and using get json what needs to be done to my json format to wrap it in the callback=? function or is there a better way to call this file?
content of my make_model_json.php file
[
{"Make": "Other","Models": ["Other"]}
,
{"Make": "Motorcycle/ATV","Models": ["Other","ATV","Over 600cc","Under 600cc"]}
,
{"Make": "Boat","Models": ["Other","Over 20ft","Under 20ft"]},{"Make": "RV","Models": ["Other","Over 30ft","Under 30ft"]}
]
javascript to populate the select elements
var obj_make_model=Array();
function buildYearMenu(){
var date = new Date();
this_year = date.getFullYear();
jQuery('#veh_year, form [name="veh_year"]').append('<option value="Other">Other</option>');
for(i=this_year; i>=1950; i--){
jQuery('#veh_year, form [name="veh_year"]').append('<option value="'+i+'">'+i+'</option>');
}
}
jQuery(document).ready(function(){buildYearMenu();
jQuery('#veh_year, form [name="veh_year"]').change(function(){
populateVMakes();
});
jQuery('#veh_make, form [name="veh_make"], form [name="veh_make"]').change(function(){
populateModels(jQuery('#veh_make, form [name="veh_make"], form [name="veh_make"]').prop("selectedIndex"));
});
jQuery.ajax({
type: 'GET',
dataType: 'jsonp',
jsonp: 'jsonp_callback',
crossDomain: true,
url:( "http://www.example.com"+"/ajax/make_model_json.php"+"?callback=?" ),
async:false,
error:function(xhr,status,errorThrown){
//j(xhr+','+status+','+errorThrown);
},
success:function(jsonp){
obj_make_model = jsonp;
populateVMakes();
jQuery('form select[name^="veh_year"]').removeAttr("disabled");
}
});
});
function populateVMakes(){
jQuery('#veh_make, form [name="veh_make"], form [name="veh_make"]').children().remove();
jQuery('#veh_make, form [name="veh_make"], form [name="veh_make"]').append('<option value="">Make</option>');
//jQuery('#veh_make, form [name="veh_make"], form [name="veh_make"]').append('<option value="Other">Other</option>');
for (i = 0; i < obj_make_model.length; i++){
jQuery('#veh_make, form [name="veh_make"], form [name="veh_make"]').append('<option value="'+obj_make_model[i].Make+'">'+obj_make_model[i].Make+'</option>');
}
}
function populateModels(make_num) {
make_num = make_num-1;
jQuery('#veh_model, form [name="veh_model"]').children().remove();
jQuery('#veh_model, form [name="veh_model"]').append('<option value="">Model</option>');
//jQuery('#veh_make, form [name="veh_model"]').append('<option value="Other">Other</option>');
for (i = 0; i < obj_make_model[make_num].Models.length; i++){
jQuery('#veh_model, form [name="veh_model"]').append('<option value="'+obj_make_model[make_num].Models[i]+'">'+obj_make_model[make_num].Models[i]+'</option>');
}
}