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

时间：2018-06-06 14:40:36

标签： javascript jquery html jquery-mobile

我有两个页面，供用户输入公共汽车站ID。此总线站ID解析实时API。并且有一页结果。这些页面目前正在单页上显示。我希望用户被重定向到第二页。我已经厌倦了链接页面，但它没有用。任何建议？

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

请参阅以下示例中的$.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>

答案 1 :(得分：-1)

删除旧的jquery库并在启动脚本之前添加库。您可以添加以下任何CDN来启动它。

<强>谷歌： 

<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

相关问题
最新问题