正在链接 Jquery 个移动页面。一个带有用户输入，另一个带有结果

Question

我有两个页面，其中一个页面供用户输入公交车站 ID。这个公交站台id解析一个直播API。一页显示结果。这些页面目前显示在单个页面上。我希望用户被重定向到第二页。我厌倦了链接页面，但它没有用。有什么建议吗？

<!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">
<link rel="stylesheet" href="css/custom.css" />
<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" />
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>

<body class="ui-mobile-viewport ui-overlay-a">
<div data-role="page1">
  <div data-role="content">
    <div class="content-primary">
      <table cellpadding="5" cellspacing="5" align="center" width="100%">
        <tr>
          <td align="center"><h1>Get Next Bus Details</h1></td>
        </tr>
        <tr>
          <td align="center">
          <div class="ui-input-search ui-shadow-inset ui-input-has-clear ui-body-inherit ui-corner-all">

              <input data-type="search" placeholder="Bus Stop Id" id="bus_stop_id" name="bus_stop_id">

              <a href="#" 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>
              <input type="button" value="Get Current Update" id="button_get_bus" style="background-color: #fff;padding: 8px;"></td>
        </tr>
      </table>
    </div>
  </div>
</div>

<div data-role="page" id="page2">
  <div data-role="content">
    <div class="content-primary">
      <div id="resultDiv" style="display:none; padding-top:40px">
        <table cellpadding="5" cellspacing="5" align="center" width="50%" style="border:solid 1px #fff; ">
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td><strong>From</strong> </td>
            <td>: </td>
            <td><span id="from"></span> </td>
          </tr>
          <tr>
            <td><strong>To</strong> </td>
            <td>: </td>
            <td><span id="to"></span> </td>
          </tr>
          <tr>
            <td><strong>Arival Date Time</strong> </td>
            <td>: </td>
            <td><span id="arival"></span> </td>
          </tr>
          <tr>
            <td><strong>Departure Date Time</strong> </td>
            <td>: </td>
            <td><span id="departure"></span> </td>
          </tr>
       <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- end of pageone -->
<!--Loading scripts at bottom of the page-->
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
  <h1>loading</h1>
</div>
<div class="ui-panel-dismiss"></div>

<script type="text/javascript">
 //On click of button this function get call
 $('#button_get_bus').click(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 str = JSON.stringify(results);        
  // Code for parsing json and inserting data in html
  var 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";
  }
  });
 });
</script>
</body>
</html>

Answer 1

删除旧的 jquery 库并在启动前添加库 script.You 可以添加以下任何 CDN 来启动它。

Google:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

微软

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

your above example

Answer 2

请参阅以下示例中的 $.mobile.pageContainer.pagecontainer("change", "#page2");：

//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 str = JSON.stringify(results);
      // Code for parsing json and inserting data in html
      var 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>
<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="page1">
  <div class="ui-content">
    <div class="content-primary">
      <table cellpadding="5" cellspacing="5" align="center" width="100%">
        <tr>
          <td align="center"><h1>Get Next Bus Details</h1></td>
        </tr>
        <tr>
          <td align="center">
          <div class="ui-input-search ui-shadow-inset ui-input-has-clear ui-body-inherit ui-corner-all">

              <input data-type="search" placeholder="Bus Stop Id" id="bus_stop_id" name="bus_stop_id">

              <a href="#" 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>
              <input type="button" value="Get Current Update" id="button_get_bus" style="background-color: #fff;padding: 8px;"></td>
        </tr>
      </table>
    </div>
  </div>
</div>

<div data-role="page" id="page2">
    <div data-role="header" data-add-back-btn="true"></div>
  <div  class="ui-content">
    <div class="content-primary">
      <div id="resultDiv" style="display:none; padding-top:40px">
        <table cellpadding="5" cellspacing="5" align="center" width="50%" style="border:solid 1px #fff; ">
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td><strong>From</strong> </td>
            <td>: </td>
            <td><span id="from"></span> </td>
          </tr>
          <tr>
            <td><strong>To</strong> </td>
            <td>: </td>
            <td><span id="to"></span> </td>
          </tr>
          <tr>
            <td><strong>Arival Date Time</strong> </td>
            <td>: </td>
            <td><span id="arival"></span> </td>
          </tr>
          <tr>
            <td><strong>Departure Date Time</strong> </td>
            <td>: </td>
            <td><span id="departure"></span> </td>
          </tr>
       <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- end of pageone -->
<!--Loading scripts at bottom of the page-->
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
  <h1>loading</h1>
</div>
<div class="ui-panel-dismiss"></div>

</body>
</html>

正在链接 Jquery 个移动页面。一个带有用户输入，另一个带有结果

Linking Jquery mobile pages. One with user input and another with results

javascript

jquery

html

jquery-mobile