Load XML into HTML using jquery

I've been trying to load an xml file into my html page using jquery and have come as close as the result on the url below.

I've managed to extract the data from the xml file and display it on my page but there is an error in the result, the info is all blocked together.

(see this link to my page)

How can I divide the data into it's own container?

Here is my code


    <html>
<head>
    <style>
        .stats {
        padding: 10px;
        font-size: 15px;
        color: #fff;
        background-color: #003468;
        height: 20px;
        }
        .address {
        width: 360px;
        float: left;
        color: #003468;
        }

    </style>

    <script type="text/javascript">
$(document).ready(function(){
    $.ajax({
        type:"GET",
        url:"/I8959.xml",
        dataType:"xml",
        success: function(data){

    $('#load').fadeOut();


            $(data).find('Builder[BuilderID="4364"]').each(function(){    

            var Brandname = $(this).find("BrandName").text();
            var Subdivision = $(this).find("Subdivision SubParentName").text();    
            var Description = $(this).find("Description").text();
            var Address = $(this).find("Spec SpecStreet1").text();
            var Price = $(this).find("Spec SpecPrice").text();
            var Image = $(this).find("Spec SpecElevationImage").text() + '" width="220" height="124" alt="' + $(this).find("Spec SpecStreet1").text();             
            var Beds = $(this).find("Spec SpecBedrooms").text();
            var Baths = $(this).find("Spec SpecBaths").text();
            var Sqft = $(this).find("Spec SpecSqft").text();
            var Garage = $(this).find("Spec SpecGarage").text();


            $("#homecontainer").append(' <div class="address"> ' + Address + ' <br><span>Section: ' + Subdivision + '</span>' + '</div>' + ' <div class="price"> $' + Price + ' <br><span> ' + Brandname + ' </span>' + '</div>'  + '<div class="clearboth"></div>' +  ' <div class="home-image"><img src="' + Image + '"/>' +'</div>' + ' <div class="home-description"> ' + Description + '</div>' +  '<div class="clearboth"></div>' + ' <div class="stats"><div class="beds"><img alt="" src="/images/ico-beds.png" style="border: 0px; width:22px;" /> ' + Beds + ' Bedroom(s)</div><div class="baths"><img alt="" src="/images/ico-baths.png" style="border: 0px; width:22px;" /> ' + Baths + ' Bath(s)</div><div class="sqft"><img alt="" src="/images/ico-sqft.png" style="border: 0px; width:22px;" /> ' + Sqft + ' Sq. Ft.</div><div class="garage"><img alt="" src="/images/ico-garage.png" style="border: 0px; width:22px;" /> ' + Garage + ' Car Garage</div></div>');




                }); //End Data Function "Builder"
        },
        error:function(){
        $("#homecontainer").text('Failed to get feed');
        }
    });
});



</script>
</head>
<body>
    <div class="inventory-home" id="homecontainer">
    <div id="load"><img alt="" src="/images/animationload.gif" /></div>
    </div>
</body>

Load XML into HTML using jquery

Tiada ulasan:

Catat Ulasan