This file uses AJAX to open and display currencies.xml data, the currencies.xml file has fewer countries than our countriesFinal.xml file.

As you have seen with previous, I completed a lot of your assignment from the console window. As code is working in the console window, you transfer the working code to the JavaScript file and start testing the next set of code. Keep in mind an advantage with a scripting langauge is that you can test all your code at the command line interactively. In this case all the code need to add currenty.xml to your previous assignment is list in the next ordered list. Use right^click, inspect and tests each command in the order listed. Once you complete the console testing modify your assignment to display currencies.xml data when a country name is selected.

1. jQuery; /* make sure jQuery is loaded, $ is the jQuery object short-cut*/
   /* if jQuery doesn't exist first check your CDN call, make sure its right; As second option, save a local copy of the jQuery library and load it locally when jQuery is undefined */
   
2. newCountry(); /* test newCountry function, select a different country */
3. var currenciesData; /* create global variable for ajax, on ajax success set to contents of currencies.xml */
4. var jxhr = $.ajax( { url: "currencies.xml", success : function( data ) {currenciesData=data;} } );
5. jxhr.statusText; /* should be okay */
6. /** once AJAX is working you may want to add the above code to your JavaScript file */
7. currenciesData; /* check to see it exists it should be an XMLDocument object */
8. $( currenciesData ).find( "entry:first" ).text(); /*display contents of first xml node entry */
9. $( currenciesData ).find( "entry:last" ).text(); /* display contents of last xml node entry */
10. $( currenciesData ).find( "entry[code='COP']" ).text(); /* display text contents of cod="COP" */
    
11. countriesData; /* the countriesFinal.xml is already loaded in this file with xml data set to countriesData */
    countriesData and currenciesData are XMLDocument objects, we traverse them using standard jQuery/CSS3 selectors
12. $( currenciesData ).find( "entry:contains('Japan')" ).text();
13. $( '#countries' ).val(); /* change the selection in drop down list box */
14. $( currenciesData ).find( 'entry:contains("' + $( '#countries' ).val() + '")' ).text();
15. var countryTag = $( countriesData ).find( 'country[name="' + $( '#countries' ).val() + '"]' );
16. countryTag.attr( "code" );
17. var activeCode = countryTag.attr( "code" );
18. $( currenciesData ).find( "entry[code2='AF']" );
19. /** trying to line up quotes, parenethes, braces can be a pain in javascript */
20. var activeCurrency = $( currenciesData ).find( "entry[code2='" + activeCode + "']" );
21. /** chaining is powerful but its easy to be off by a special character */
22. activeCode = $( countriesData ).find( 'country[name="' + $( '#countries' ).val() + '"]' ).attr( "code" );
    /** Exercise use line 21 and modify the newCountry code in this file to set id code in this file*/
    
23. var activeCurrency = $( currenciesData ).find( "entry[code2='" + activeCode + "']" );
24. /** check for not found condition */
25. activeCurrency = $( currenciesData ).find( "entry[code2='12']" );
26. console.log( activeCurrency.length === 0 ? "currency for " + activeCode + "not in currency.xml" : activeCurrency.text() );
27. $( "#currencyFacts" ).text( "Hello" ); /* test location of id=currencyFacts, it is below this ordered list */
    /* display currency facts into id=currencyFacts */
    
28. $( "#currencyFacts" ).text( activeCurrency.length === 0 ? "currency for " + activeCode + " not in currencies.xml" : activeCurrency.text() );

These assignment is using older XML data, a pay sites allow you to access active data,

To complete ajax2 assignment, first add code to open currencies.xml in your $( document ).ready block. The add code to function newCountry that used code and sets currencyFacts. You will also need to add a div block with id currencyFacts.

We should use XSLT so that codes in countriesFinal.xml and currencies.xml line up. XSLT is an XML Styling Language and transformation it is both a presentation styling language like CSS, but adds the ability to transform (aka create) a new document.