Somewhat new to XML, but s there a way to pull info from an xml file based on the country and have it displayed in a div?
Ex. I just want data from the element containing Europe, when the Europe btn/link is clicked then append into the global DIV.
<div>
<div class="btn_all">
<a href='#' value="Global" class="btn_globalImg"></a>
<a href='#' value="Regional" class="btn_regionalImg"></a>
<a href='#' value="Country" class="btn_countriesImg"></a>
</div>
<div class="btn_regions">
<a href='#' value="Africa" class="btn_africaImg"></a>
<a href='#' value="Asia" class="btn_asiaImg"></a>
<a href='#' value="Europe" class="btn_eurImg"></a>
<a href='#' value="Latin America" class="btn_latinImg"></a>
<a href='#' value="North America" class="btn_northImg"></a>
</div>
<div class="btn_countries">
<a href='#' value="Africa" class="btn_africaImg"></a>
<a href='#' value="Asia" class="btn_asiaImg"></a>
<a href='#' value="Europe" class="btn_eurImg"></a>
<a href='#' value="Latin America" class="btn_latinImg"></a>
<a href='#' value="North America" class="btn_northImg"></a>
</div>
<div id="global"></div>
</div>
<script>
function ResetandSet(set){
$('.btn_regions, .btn_countries').hide(); //hide regions submenu
$('#global').html(""); //clear #global
set=="global" ? $('.btn_globalImg').addClass('active'):$('.btn_globalImg').removeClass('active');
set=="region" ? $('.btn_regionalImg').addClass('active'):$('.btn_regionalImg').removeClass('active');
set=="country" ? $('.btn_countriesImg').addClass('active'):$('.btn_countriesImg').removeClass('active');
}
function loadXML(that) {
var Step1 = $('.btn_all').find('.active').attr("value");
var Step2 = $(that).attr("value");
var cty_count="";
$.get('inc/BestEmployers.xml', function(d){
$(d).find('company').filter(function(){
return Step1 == "Global" ? $(this).find("category").text() == Step1 : $(this).find("category").text() == Step1 && $(this).find("region").text() == Step2;
//sort by
}).each(function(){
var name = $(this).attr("name");
var category = $(this).find('category').text();
var region = $(this).find('region').text();
var country = $(this).find('country').text();
var year = $(this).find('year').text();
var employee = $(this).find('employee').text();
var industry = $(this).find('industry').text();
var url = $(this).find('url').text();
var logo = $(this).find('logo').text();
var quote = $(this).find('quote').text();
var title = $(this).find('title').text();
if (Step1 == "Global")
makeGlobal(name, category, region, country, year, employee, industry, url, logo, quote, title);
else if (Step1 == "Regional")
makeRegional(name, category, region, country, year, employee, industry, url, logo, quote, title);
else if (Step1 == "Country") {
if (cty_count=="")
$('#global').append("<div class='header'><div>Company</div><div>Industry</div><div>Website</div><div>No. of Employees</div></div>");
if (cty_count != country) {
$('#global').append("<div class='subheader'>" + country + "</div>");
cty_count = country;
}
makeCountry(name, category, region, country, year, employee, industry, url, logo, quote, title);
}
});
});
}
function makeGlobal(name, category, region, country, year, employee, industry, url, logo, quote, title){
var html = '';
html += "<div class='global'>";
if(logo) {html += "<div><img src='images/" + logo + "' width='100px' height='100px'/></div>"}
html += "<div>"
if(name) {html += "<div class='company'>" + name + "</div>"}
if(category) {html += "<div class='desc'>Certified Best Employer - " + category + " " + year+ "</div>"}
if(employee) {html += "<div class='employee'>No of employees: " + employee + "<div>"}
if(industry) {html += "<div class='industry'>Industry: " + industry + "</div>"}
if(quote) {html += "<div class='quote'>" + quote + "</div>"}
if(title) {html += "<div class='title'>From: " + title + "<div>"}
if(url) {html += "<div class='more'><a href='" + url + "' target='_blank'>" + url + "</a></div>"}
html += "</div>"
html += "</div><br/>";
$('#global').append($(html));
}
function makeRegional(name, category, region, country, year, employee, industry, url, logo, quote, title){
var html = '';
html += "<div class='regional'>";
if(logo) {html += "<div><img src='images/" + logo + "' width='100px' height='100px'/></div>"}
html += "<div>"
if(name) {html += "<div class='company'>" + name + "</div>"}
if(region) {html += "<div class='desc'>Certified Best Employer - " + region + " " + year+ "</div>"}
if(employee) {html += "<div class='employee'>No of employees: " + employee + "<div>"}
if(industry) {html += "<div class='industry'>Industry: " + industry + "</div>"}
if(url) {html += "<div class='more'><a href='" + url + "' target='_blank'>" + url + "</a></div>"}
html += "</div>"
html += "</div><br/>";
$('#global').append($(html));
}
function makeCountry(name, category, region, country, year, employee, industry, url, logo, quote, title){
var html = '';
html += "<div class='country'>";
html += "<div class='name'>" + name + "</div>";
html += "<div class='industry'>" + industry + "</div>";
html += "<div class='website'><a href='" + url + "' target='_blank'>" + url + "</a></div>";
html += "<div class='employee'>" + employee + "</div>";
$('#global').append($(html));
}
/* Second Level Buttons */
$('.btn_africaImg, .btn_asiaImg, .btn_eurImg, .btn_latinImg, .btn_northImg').click(function(){
$('#global').html(""); //clear #global
$('.btn_regions a, .btn_countries a').each(function( index ) { $(this).removeClass('active') });
$(this).addClass('active')
loadXML(this);
$xml.find('country').each(function () {
$(this).find("whatever you want").text()
});
});
/* End Second Level Buttons */
/* Top Level Buttons */
$('.btn_regionalImg').click(function() {
ResetandSet("region");
$('.btn_regions').show(); //hide regions submenu
});
$('.btn_countriesImg').click(function() {
ResetandSet("country");
$('.btn_countries').show(); //hide regions submenu
});
$('.btn_globalImg').click(function() {
ResetandSet("global");
loadXML(this);
});
/* End Top Level Buttons */
</script>
/* XML file */
<script type="text/xml" id="xmlData">
<companies>
<country>Europe<country>
<company name="1" imageurl="logo">
<certification> Certified Best Employer </certification>
<employee> 5,0000 </employee>
<industry> Risk Services </industry>
<html_url> http://www.google.com </html_url>
</company>
<country>Europe<country>
<company name="2" imageurl="logo">
<certification> Certified Best Employer </certification>
<employee> 5,0000 </employee>
<industry> Risk Services </industry>
<html_url> http://www.google.com </html_url>
</company>
<country>Asia<country>
<company name="3" imageurl="logo">
<certification> Certified Best Employer </certification>
<employee> 5,0000 </employee>
<industry> Risk Services </industry>
<html_url> http://www.google.com </html_url>
</company>
</companies>
</script>
A good way to do this is to use some AJAX. First call a javascript function in your html div/body, or wherever. In your javascript you can call your xml file and then do something like:
$xml.find('country').each(function () {
$(this).find("whatever you want").text()
});
set your div with an id and then append the $(this) to the id
$(this).find("industry").text().appendTo('#divID')
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments