Displaying XML value using JQuery

I am using JQuery and XML.

I have got below XML format.

Resource XML:

<?xml version="1.0"?>
<root xmlns:link="http://www.example.com/tridion">
    <data name="LoginAccount" tcm="tcm:233-191754" type="Text">
        <value>Login to your Account</value>
    </data>
    <data name="Airport" tcm="tcm:233-191754" type="Text">
        <value>Airport</value>
    </data>
    <data name="BusinessClass" tcm="tcm:233-191754" type="Text">
        <value>Business</value>
    </data&开发者_StackOverflow社区gt;
</root>

Now I have got JQuery where I am looking to get these values loaded first and then further use them in page, for example.

JQuery Code Sample:

// Dialog           
    $('#LoginLink').click(function(){
        $('#Login').dialog({
            autoOpen: true,
            width: 450,
            modal: true,
            title: 'Login to your Account'
        });
        if($('#Login').is(':visible')) {
            hideSelect();
        } else {
            showSelect();
        }
    });

In above jquery code the text 'Login to your Account' should come from my Resource XML as my application is multilingual.

I am looking to create such function in JQuery where I will just passing the name attribute value and which will fetch the actual values from XML, say for example.

getDataFromResourceFile('LoginAccount'); should display 'Login to your Account'

Please suggest!

Use this to load up ur xml document into a variable:

var xmlData;
$.ajax({
    type: "GET",
    url: "resources.xml",// your xml file path
    dataType: "xml",
    success: function(xml) {
    xmlData = xml;// set the returned xml into a global variable
    }
});

Then

function getDataFromResourceFile(resourceKey)
{
  return $(xmlData).find('data[name=' + resourceKey + '] value').text();
}

That will do it for your XML file. You may have to check whether the XML data has loaded into the variable(xmlData) or not before using it.

EDIT:

Edited to Load the xml from server if it is not found.

<script type="text/javascript">
    var xmlData;
    function getDataFromResourceFile(key)
    {
        if (xmlData == null)
        {
            $.ajax({
                type: "GET",
                url: "resources.xml",
                dataType: "xml",
                success: function (xml)
                {
                    xmlData = xml;
                    return $(xmlData).find('data[name=' + key + '] value').text();
                }
            });
        }
        else
        {
            return $(xmlData).find('data[name=' + key + '] value').text();
        }
    }
</script>