Given this HTML file,
write an accompanying recipe.js that displays recipe information on
the page with ajax. When a radio button is clicked make an ajax GET
request to
recipes.php
with a parameter r
that has the value of the radio button.
The results from recipes.php
is in xml format. You must parse the
results and fill the #main
div with with a h1 containing the title,
an img tag with the recipe's image and a ul filled with the recipe's ingredients.
Check out a working example here.
The result xml from recipes.php has the following structure (and some extra stuff):
<recipe> <information> <name></name> <image></image> </information> <ingredients> <item amount=""></item> ... </ingredients> <directions> <step></step> ... </directions> </recipe>
You can view the solution javascript here.