GET multiple xml files?

Question

I'm trying to load multiple xml files depending on which button is clicked.

I have attached a snippet of code, I'm really more focused on the if...else if.

Is what I'm trying to do even logical or possible?

Updated Code with Claudio suggestion:

    <script src="scripts/jQuery.js"></script>

<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<script>
/*********** jQuery Accordion Menu ****************/
$(document).ready(function(){
    $('.btn_countries, .btn_regions').hide();
    $('.mainbar > ul > span ul').each(function(index, element){
        var count = $(element).find('li').length;
            $(element).closest('span').children('a').append(content);
                });

    $('.mainbar > ul > span > a').click(function() {
        var checkElement = $(this).next();
    $('.mainbar span').removeClass('active');
    $(this).closest('span').addClass('active'); 
        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
             $(this).closest('span').removeClass('active');
             checkElement.slideUp('normal');
             }
        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
             $('.mainbar ul ul:visible').slideUp('normal');
             checkElement.slideDown('normal');
             }
        if($(this).closest('span').find('ul').children().length == 0) {
            return true;
        } else {
            return false; 
        }
        });


/*********** jQuery Accordion Menu End****************/

/*********** jQuery load XML ****************/
function xmlFunction( xmlUrl ) {
    $.get( xmlUrl, function ( d ) {
        $( 'body' ).append( '<dl />' );
        $( d ).find( 'company' ).each( function () {

            var $company = $( this ),
                name = $company.attr( "name" ),
                certification = $company.find( 'certification' ).text(),
                employee = $company.find( 'employee' ).text(),
                quote = $company.find( 'quote' ).text(),
                industry = $company.find( 'industry' ).text(),
                signature = $company.find( 'signature' ).text(),
                title = $company.find( 'title' ).text(),
                url = $company.find( 'url' ).text(),
                imageurl = $company.attr( 'imageurl' ),
                html = '';

            html += '<dd> <span class="loadingPic" alt="Loading" />';
            html += '<div class="container">';
            html += '<div class="content">';
            html += '<div class="maincontent">';
            html += '<div class="logoblock">';
            html += '<img class="companyLogo" alt="" src="' + imageurl + '" />';
            html += '</div>';
            html += '<div class="contentblock">';
            html += '<h1 class="name">' + name + '</h1>';
            html += '<h2 class="certification">' + certification + '</h2>';
            html += '<p class="employee">' + employee + '</p>';
            html += '<p class="industry"> ' + industry + '</p>';
            html += '<p class="quote"> ' + quote + '</p>';
            html += '<p class="signature"> ' + signature + '</p>';
            html += '<p class="title"> ' + title + '</p>';
            html += '<a class="url"> ' + url + '</a>';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '</dd>';

            $('#global').append( $( html ));
        });
        //show after appending all
        $( '#global' ).show();
    });
}

//when dom is ready
    //listener for click on all our buttons
    $( 'button.someCommonClass' ).on( 'click', function ( e ) {
        var $this = $( this );
        e.preventDefault();
        //using return after calling our function, so we don't need to care with so many 'else if'
        //easier to read IMO
        if ( $this.hasClass( 'btn_globalImg' ) ) {
            xmlFunction( 'inc/Global_BestEmployers.xml' );
            return;
        }
        if ( $this.hasClass( 'btn_regionalImg' ) ) {
            xmlFunction( 'inc/Regional_BestEmployers.xml' );
            return;
        }
        if ( $this.hasClass( 'btn_countriesImg' ) ) {
            xmlFunction( 'inc/Countries_BestEmployers.xml' );
            return;
        }
    });
});
/*********** jQuery load XML End****************/
</script>

<body>


<div class="mainbar">
  <ul class="btn_container">
   <span><a href='#' class="btn_globalImg"></a></span>
   <span><a href='#' class="btn_regionalImg"></a>
     <ul class="btn_regions">
       <li><a href='#' class="btn_africaImg"></a></li>
       <li><a href='#' class="btn_asiaImg"></a></li>
       <li><a href='#' class="btn_eurImg"></a></li>
       <li><a href='#' class="btn_latinImg"></a></li>
       <li><a href='#' class="btn_northImg"></a></li>
      </ul>
   </span>
   <span><a href='#' class="btn_countriesImg"><span></span></a>
     <ul class="btn_countries">
       <li><a href='#' class="btn_africaImg"></a></li>
       <li><a href='#' class="btn_asiaImg"></a></li>
       <li><a href='#' class="btn_eurImg"></a></li>
       <li><a href='#' class="btn_latinImg"></a></li>
       <li><a href='#' class="btn_northImg"></a></li>
     </ul>
   </span>
</ul>

<div id="global">

</div>
</div>

</body>
</html>

Answer 1

You could use hasClass for your scenario

var $this = $(this);
if($this.hasClass('btn_globalImg')) {
    $.get('inc/Global_BestEmployers.xml', function(d){ ... });
} else if ($this.hasClass('btn_regionalImg')) {
    $.get('inc/Global_BestEmployers.xml', function(d){ ... });
} else if ($this.hasClass('btn_countriesImg')) {
    $.get('inc/Global_BestEmployers.xml', function(d){ ... });
}

Answer 2

Considering you have something near this as html:

<div id="global">My global div</div>
<button class="someCommonClass btn_countriesImg">My btn_countriesImg</button>
<button class="someCommonClass btn_regionalImg">My btn_regionalImg</button>
<button class="someCommonClass btn_globalImg">My btn_globalImg</button>

I would do something like this (refer to the comments):

//Since you are doing the same thing for all, let's make it a reusable function
function myAwesomeFunction( xmlUrl ) {

    $.get( xmlUrl, function ( d ) {

        //hiding here
        $( '#global' ).hide();

        $( 'body' ).append( '<dl />' );

        $( d ).find( 'company' ).each( function () {

            //no need of all var var var..
            //declaring all at once into one var - that's called 'var lifting'
            var $company = $( this ),
                name = $company.attr( "name" ),
                certification = $company.find( 'certification' ).text(),
                employee = $company.find( 'employee' ).text(),
                quote = $company.find( 'quote' ).text(),
                industry = $company.find( 'industry' ).text(),
                signature = $company.find( 'signature' ).text(),
                title = $company.find( 'title' ).text(),
                url = $company.find( 'url' ).text(),
                imageurl = $company.attr( 'imageurl' ),
                html = '';

            html += '<dd> <span class="loadingPic" alt="Loading" />';
            html += '<div class="container">';
            html += '<div class="content">';
            html += '<div class="maincontent">';
            html += '<div class="logoblock">';
            html += '<img class="companyLogo" alt="" src="' + imageurl + '" />';
            html += '</div>';
            html += '<div class="contentblock">';
            html += '<h1 class="name">' + name + '</h1>';
            html += '<h2 class="certification">' + certification + '</h2>';
            html += '<p class="employee">' + employee + '</p>';
            html += '<p class="industry"> ' + industry + '</p>';
            html += '<p class="quote"> ' + quote + '</p>';
            html += '<p class="signature"> ' + signature + '</p>';
            html += '<p class="title"> ' + title + '</p>';
            html += '<a class="url"> ' + url + '</a>';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '</dd>';

            $( '#global' ).append( $( html ) );
            //NOTE: I would prefer using document fragment here and append once at the end
            //Has lot better performance and less browser repaint/reflow.
            //But I'll let that one for you to search and learn
        } );

        //show after appending all
        $( '#global' ).show();
    } );
}

//when dom is ready
$( document ).ready( function () {

    //listener for click on all our buttons
    $( 'button.someCommonClass' ).on( 'click', function ( e ) {
        var $this = $( this );
        e.preventDefault();

        //using return after calling our function, so we don't need to care with so many 'else if'
        //easier to read IMO

        if ( $this.hasClass( 'btn_globalImg' ) ) {
            myAwesomeFunction( 'inc/Global_BestEmployers.xml' );
            return;
        }
        if ( $this.hasClass( 'btn_regionalImg' ) ) {
            myAwesomeFunction( 'inc/Global_BestEmployers.xml' );
            return;
        }
        if ( $this.hasClass( 'btn_countriesImg' ) ) {
            myAwesomeFunction( 'inc/Global_BestEmployers.xml' );
            return;
        }
    } );
} );

If the comment didn't explained enough, let me know :-)