HTML FILE
<!DOCTYPE html>
<html>
<head>
<title>ApartmentPro</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="_assets/css/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="_assets/css/styles.css" />
<script src="_assets/js/jquery-1.9.1.min.js"></script>
<script src="_assets/js/jquery.mobile-1.3.1.min.js"></script>
<script src="_assets/js/apartmentList.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>APARTMENTPRO</h1>
</div>
<div data-role="content" class="content">
<div id="image">
</div>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active" data-theme="a">Near</a></li>
<li><a href="#" data-theme="a">Featured</a></li>
<li><a href="#" data-theme="a">Price</a></li>
</ul>
</div><!-- /navbar -->
<div class="content-primary">
<ul id="listOfApartments" data-inset="true" class="ui-li-icon ui-corner-none" data-role="listview" data-theme="d" data-filter-placeholder="Search Apartment...">
</ul>
</div>
</div><!-- /content -->
<div data-role="footer">
<div data-role="navbar" data-theme="a">
<ul>
<li><a href="#" data-icon="grid">Apartment</a></li>
<li><a href="#" data-icon="grid">My City</a></li>
<li><a href="#" data-icon="star" class="ui-btn-active">Featured</a></li>
<li><a href="#" data-icon="gear">Map</a></li>
<li><a href="#" data-icon="grid">Profile</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!--index -->
<div data-role="page" id="Details">
<div data-role="header">
<a href="#" data-icon="bars" id="c"></a>
<h1>APARTMENTPRO</h1>
<a href="#" data-icon="check"></a>
</div>
<div data-role="content">
<div id="imageDetails">
</div>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active" data-theme="a">Details</a></li>
<li><a href="#photos" data-theme="a">Photos</a></li>
<li><a href="#map" data-theme="a">Map</a></li>
<li><a href="#reviews" data-theme="a">Reviews</a></li>
</ul>
</div><!-- /navbar -->
<div id="apartmentDetails">
<h2 id="tile"></h2>
<label id="address"></label></br>
<label id="telNo"></label></br></br>
<h3>Apartment Building</h3>
<label id="checkInTime"></label></br></br>
<label id="reviews"></label>
</div>
</div><!-- /content -->
<div data-role="footer">
<div data-role="navbar" data-theme="a">
<ul>
<li><a href="#index" data-icon="grid">Apartment</a></li>
<li><a href="#" data-icon="grid">My City</a></li>
<li><a href="#" data-icon="star" class="ui-btn-active">Featured</a></li>
<li><a href="#" data-icon="gear">Map</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!--apartmentDetails -->
JAVASCRIPT
var xml;
$(document).ready(function(){
$.ajax({
type: "GET",
url: '_assets/xml/apartments.xml',
//url: "http://labs.philippineglobaloutsourcing.com/apartmentpro/datav2/apartments",
dataType: "xml",
success: xmlParser
});
});
function xmlParser(data) {
var imageUrl;
xml = data;
$(xml).find("entry").each(function () {
imageUrl = $(this).find("imageUrl").text();
var id = $(this).find("id").text(),
title = $(this).find("title").text(),
address = $(this).find("address").text(),
zipCode = $(this).find("zipCode").text(),
telNo = $(this).find("telNo").text();
$("#listOfApartments").append('<li id="' + zipCode + '"><a href="#"><img src="' + imageUrl + '"/><h3 id="title">' + title + '</h3><p>'+ address +'</p><p>'+ telNo +'</p></a></li>');
$('#listOfApartments').listview('refresh');
});
$("#image").append('<img src="' + imageUrl + '"/>');
}
$(document).on("pageinit", "#index", function (){
$('#listOfApartments').delegate('li', 'click', function () {
//e.preventDefault();
$.mobile.changePage($('#Details'), 'pop');
var title = this.id;
if($.mobile.activePage.attr("id") == "Details"){
var xml;
$(document).ready(function(){
$.ajax({
type: "GET",
url: '_assets/xml/apartments.xml',
//url: "http://labs.philippineglobaloutsourcing.com/apartmentpro/datav2/apartments",
dataType: "xml",
success: xmlParser
});
});
function xmlParser(data) {
xml = data;
var imageUrl;
$(xml).find('entry').filter(function() {
return $(this).children('zipCode').text() == title;
}).each(function() {
imageUrl = $(this).find("imageUrl").text();
var id = $(this).find("id").text(),
title = $(this).find("title").text(),
address = $(this).find("address").text(),
zipCode = $(this).find("zipCode").text(),
checkInTime = $(this).find("checkInTime").text(),
reviews = $(this).find("reviews").text(),
telNo = $(this).find("telNo").text();
$("#imageDetails").append('<img src="' + imageUrl + '"/>');
$("#tile").append('' + title + '');
$("#address").append('' + address + '');
$("#telNo").append('' + telNo + '');
$("#checkInTime").append('' + checkInTime + '');
$("#reviews").append('' + reviews + '');
});
}
}
});
});