Getting a local xml document to populate a listview works in "Live View", but fails in browsers

Question

I'm am extremely new to this so if there is a link or tutorial that explains what I should be doing, please direct me there, however I was unable to locate one on this site.
Challenge:
I'm trying to build a mobile app to read a local xml file and populate a listview.  Everything works perfect in the 'Live View' mode of CS5.5, but when I go to preview in Safari or Firefox all that is generated is the  listview container with none of the xml loaded content.
I'm reading the xml file as text and then running it through parsexml.
I am sure there is something glaring that I am missing, but I've seen many posts on other sites (not dreamweaver specific) which have shown people struggling with how to accomplish reading a local xml file and using it in a mobile app.
Any Help, insights, suggestions or examples of how to make this work in more than just the 'Live View' will be greatly appreciated.
Many thanks in advance!
XML and Code is Below
XML:
<?xml version="1.0" encoding="utf-8"?>
<Components>
     <Component Id="1" Name="TermOne" Description="Definition of term one.">
           </Component>
        <Component Id="2" Name="Term Two" Description="Definition of term two.">
           </Component>
</Components>
CODE:
$(document).ready(function(){
           $.get( "jquery-mobile/dictionary.xml", function(xml) {
                     var xparse = $($.parseXML(xml));
                    var xlines = [];
                    xparse.find('Component').each(function(){
                              var name = $(this).attr('Name');
                              var description = $(this).attr('Description');
                              xlines.push('<li>' + name + ': ' + description + '</div></li>');
           $('#Dictionary').append(xlines.join(''));
           $('#Dictionary').listview('refresh');
           },"text");
Is there any dreamweaver expert out there who knows why this code will only render in liveview and not on the browsers?
Message was edited by: Lane Hammons

Answer 1

Thanks Murray!  viewing the source code, copy/paste worked!
I tried to use the insert image object for the next rollover button...but then got another error message (thankfully just one).  I know that I could simply copy the format that you did for the first button, but since this site will be image rollover intensive, I'd like to try to fix this error so I can use the design feature.
Here is the message from validator:
Line 73, Column 443: required attribute "alt" not specified
…me="familytrees" width="105" height="57" border="0" id="familytrees" /></a></p>
✉
The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.
Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
I checked the document and both types have been entered - very confused.  Have any recommendations?
BTW - do you think it is a good idea for me to get css/html and or javascript for dummies?  Do those books really help novices, such as myself?
Your patience and help is great appreciated!