gistfile1.html

<div data-role="page" id="page2">

    <div data-role="header">
    <div class="row">
    <div class="container">
      <div class="col-xs-4 back_button"> 
          <a href="#" data-role="button" data-direction="reverse" data-icon="arrow-l" data-iconpos="left" data-theme="b" data-rel="back">Back</a> 
      </div>
      <div class="col-xs-4">
         <img src="img/logo.png"> 
      </div>
         <div class="col-xs-4 back_button"> 
          <a href="<?=URL_SITE?>" data-role="button" data-direction="reverse" data-icon="home" data-iconpos="left" data-theme="b">Home</a> 
      </div>
         </div>
       
    </div>
    
</div>

  <div class="container">
  
	<form class="ui-filterable">
    		<input id="myFilter" data-type="search">
	</form>
    <div id="new_div">
      
      </div>
  </div>
       <?php include('include/footer.php'); ?>
</div>

<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
	
	 $("a").on("click", function (event) {  
		var id= $(this).attr("id");
		
		var readFile = "";
		if(id == "jobs") {
			readFile = "api/json_files/ads_json.json";
		}else if(id == "tenders"){
			readFile = "api/json_files/tenders.json";
		}else if(id == "events"){
			readFile = "api/json_files/events.json";
		}else if(id == "admissions"){
			readFile = "api/json_files/admissions.json";
		}
		
		var result= "";
		$.getJSON( readFile, function( data ) {				
				
				$.each(data, function(index, value) {
					result+= "<ul data-role='listview'><li><a class='ads_link' href='#ads_detail' data-news="+value.paper_name+" data-year="+value.year+" data-month="+value.month+" data-day="+value.day+" data-img="+value.image+">"+value.title+"</a></li></ul>"; 
					//alert(result)
				$("#new_div").html(result);
				 });
					if(result == "") {		
						$("#new_div").html("<div class='no-data'><p>Sorry! There are no records in this section</p></div>");	
					}
				 
				$('.ads_link').click(function() {
					var sitePath	=	'http://'+window.location.host+'/app/';
			   		var paper_name  = $(this).attr('data-news');
					var year  		= $(this).attr('data-year');
					var month 		= $(this).attr('data-month');
					var day   		= $(this).attr('data-day');
					var image 		= $(this).attr('data-img');
					var title		= $(this).text();
					var img_src 	= sitePath  + 'xads/' + year + '/'  + month + '-' + day + '/' + paper_name + '/' + image; 
					
					
						$(".ads_title h4").html(title);		
						$("#ads_image img").attr("src",img_src);
   
		     });	 
			   
		});
		
   });
      
</script>