I'm creating a bus finder application. The user inputs a bus stop id the live API is parsed with the ID and the results are injected into a dynamic page in a variable. I want to redirect the user to the results page "#page2" The code is running without errors and the parsing of the API is working perfect. The inserting and of the page is not. Any suggestions? at the minute I am using this code to bring the user to the page but is not working:
$(virtualPage).insertAfter($('#pageone'));
$.mobile.pageContainer.pagecontainer("change", "#page2");
I think it could be something to do with the id on my "virtualPage" variable. I have done this before with a list based application but had an each loop creating the id for the link with was i and the same for the page id.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dublin Concert Listings</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div class="ui-content">
<div class="content-primary">
<div data-role="header">
<h1 style="text-align: center;">Get Next Bus Details</h1>
</div>
<div >
<input data-type="search" placeholder="Enter Bus Stop Number" id="bus_stop_id" name="bus_stop_id">
</div>
<input type="button" value="Get Current Update" id="button_get_bus" style="background-color: #fff;padding: 8px;"></td>
</div>
</div>
</div>
<script type="text/javascript">
//On click of button this function get call
$(document).on('click', '#button_get_bus', function() {
//Get Enter Bus Id
var bus_stop_id = document.getElementById("bus_stop_id").value;
//If Id is blank then given error
if (!bus_stop_id) {
alert("Please enter bus stop number");
return false;
}
// This Function post request to API with the given bus stop id
$.ajax({
url: "https://data.smartdublin.ie/cgi-bin/rtpi/realtimebusinformation?stopid=" + bus_stop_id + "&format=json",
dataType: 'json',
success: function(results) {
// It returnes json data
console.log(results);
var virtualPage = "";
var str = JSON.stringify(results);
// Code for parsing json and inserting data in html
var obj = jQuery.parseJSON(str);
var destination = obj.results[0].destination;
var origin = obj.results[0].origin;
var arrivaldatetime = obj.results[0].arrivaldatetime;
var departuredatetime = obj.results[0].departuredatetime;
virtualPage +=
'<div data-role="page" data-theme="a" id="#page2">'
+ '<div data-role="header">'
+ '<h1>' + destination + '</h1>'
+ '<div data-role="content">'
+ '<h3>Venue: ' + destination + '</h3>'
+ '<h3>Date: ' + destination + '</h3>'
+ '<h3>Time: ' + destination + '</h3>'
+ '</div'
+ '<div class="wrapper"><a data-role="button" data-transition="slide" href="#pageone">Back</a></div>'
+ '</div>'
+ '</div>';
$(virtualPage).insertAfter($('#pageone'));
$.mobile.pageContainer.pagecontainer("change", "#page2");
}
});
});
</script>
</body>
</html>
