I know there are quite a few questions floating on this but I'm still not sure what to do.
I have a HTML form called "CuisineForm", after the user selects the type of cuisine, the AJAX sends the form to the server. The AJAX call works fine, and server responds with a JSON responsewhich contains all the serving times of this particular cuisine. These serving times are divided into Breakfast, Lunch and Dinner.
These times need to be populated into 3 separate dropdowns in the same form. but I don't really know how to process the JSON results to populate the 3 dropdowns in the form.
Here is the JSON response from the PHP server side script. Note that this was generated in the PHP script using "echo json_encode()".
{"breakfast":[{"09:00:00":"9:00 am"},{"09:30:00":"9:30 am"}],"lunch":[{"12:00:00":"12:00 pm"},{"12:30:00":"12:30 pm"}],"dinner":[{"19:00:00":"7:00 pm"},{"19:30:00":"7:30 pm"}]}
Here is my $.post code.
$.post( "gettimeslots", $( "#CuisineForm" ).serialize(), function() {
alert( "success" );
})
.done(function(data) {
// Not sure what code to write here to populate dropdown
})
.fail(function() {
alert( "There was a problem getting the dropdown values!" );
})
.always(function() {
alert( "always" );
});
Here is my dropdown that I want to populate
<select name="breakfasttimes" id="breakfasttimes"></select>
<select name="lunchtimes" id="lunchtimes"></select>
<select name="dinnertimes" id="dinnertimes"></select>
Most implementations tend to use $.getJSON. But as shown above I am using $.post instead. Please tell me if I should use $.getJSON instead.
Can someone offer some pointers or code advice?
Thanks Kevin
Heres a fiddle that contains the full answer
HTML:
<select name="breakfast" id="breakfast"></select>
<select name="lunch" id="lunch"></select>
<select name="dinner" id="dinner"></select>
JS:
var data = {"breakfast":[{"09:00:00":"9:00 am"},{"09:30:00":"9:30 am"}],"lunch": [{"12:00:00":"12:00 pm"},{"12:30:00":"12:30 pm"}],"dinner":[{"19:00:00":"7:00 pm"},{"19:30:00":"7:30 pm"}]};
// Put this code inside of the "done callback"
var $elements = $('#breakfast, #lunch, #dinner');
$.each(data, function (dataKey, dataVal) {
$elements.each(function(domElKey, domElVal){
if (dataKey === domElVal.id) {
$.each(dataVal, function(timeKey,timeVal){
$.each(timeVal,function(timePropKey, timePropVal){
$(domElVal).append("<option>"+timePropVal+"</option>");
});
})
}
});
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments