Linking Jquery Mobile Pages. One With User Input And Another With Results
I have two pages one for a user to input a bus stop id. This bus stop id parses a live API. And one page for the results of that. The pages are showing on the single page at the mo
Solution 1:
Please see $.mobile.pageContainer.pagecontainer("change", "#page2"); in this example below:
//On click of button this function get call
$(document).on('click', '#button_get_bus', function() {
//Get Enter Bus Idvar bus_stop_id = document.getElementById("bus_stop_id").value;
//If Id is blank then given errorif (!bus_stop_id) {
alert("Please enter bus stop number");
returnfalse;
}
// 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 dataconsole.log(results);
var str = JSON.stringify(results);
// Code for parsing json and inserting data in htmlvar obj = jQuery.parseJSON(str);
var destination = obj.results[0].destination;
document.getElementById("to").innerHTML = destination;
var origin = obj.results[0].origin;
document.getElementById("from").innerHTML = origin;
var arrivaldatetime = obj.results[0].arrivaldatetime;
document.getElementById("arival").innerHTML = arrivaldatetime;
var departuredatetime = obj.results[0].departuredatetime;
document.getElementById("departure").innerHTML = departuredatetime;
document.getElementById("resultDiv").style.display = "block";
$.mobile.pageContainer.pagecontainer("change", "#page2");
}
});
});<!DOCTYPE html><htmllang="en"><head><title>Dublin Concert Listings</title><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1, user-scalable=no"><linkrel="stylesheet"href="css/theme.min.css" /><linkrel="stylesheet"href="css/jquery.mobile.icons.min.css" /><linkrel="stylesheet"href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /><linkrel="stylesheet"href="css/custom.css" /><scriptsrc="https://code.jquery.com/jquery-2.2.4.min.js"></script><scriptsrc="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script></head><body><divdata-role="page"id="page1"><divclass="ui-content"><divclass="content-primary"><tablecellpadding="5"cellspacing="5"align="center"width="100%"><tr><tdalign="center"><h1>Get Next Bus Details</h1></td></tr><tr><tdalign="center"><divclass="ui-input-search ui-shadow-inset ui-input-has-clear ui-body-inherit ui-corner-all"><inputdata-type="search"placeholder="Bus Stop Id"id="bus_stop_id"name="bus_stop_id"><ahref="#"tabindex="-1"aria-hidden="true"class="ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all ui-input-clear-hidden"title="Clear text">Clear text</a></div><inputtype="button"value="Get Current Update"id="button_get_bus"style="background-color: #fff;padding: 8px;"></td></tr></table></div></div></div><divdata-role="page"id="page2"><divdata-role="header"data-add-back-btn="true"></div><divclass="ui-content"><divclass="content-primary"><divid="resultDiv"style="display:none; padding-top:40px"><tablecellpadding="5"cellspacing="5"align="center"width="50%"style="border:solid 1px #fff; "><tr><td> </td><td> </td><td> </td></tr><tr><td><strong>From</strong></td><td>: </td><td><spanid="from"></span></td></tr><tr><td><strong>To</strong></td><td>: </td><td><spanid="to"></span></td></tr><tr><td><strong>Arival Date Time</strong></td><td>: </td><td><spanid="arival"></span></td></tr><tr><td><strong>Departure Date Time</strong></td><td>: </td><td><spanid="departure"></span></td></tr><tr><td> </td><td> </td><td> </td></tr></table></div></div></div></div><!-- end of pageone --><!--Loading scripts at bottom of the page--><divclass="ui-loader ui-corner-all ui-body-a ui-loader-default"><spanclass="ui-icon-loading"></span><h1>loading</h1></div><divclass="ui-panel-dismiss"></div></body></html>Solution 2:
Remove your old jquery library and add the library before you start the script.You can add any of these following CDN to start it.
Google:
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>Microsoft
<scriptsrc="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
Post a Comment for "Linking Jquery Mobile Pages. One With User Input And Another With Results"