Ссылка на новую страницу из пользовательского ввода ajax-запроса - PullRequest
Новая
       7

Ссылка на новую страницу из пользовательского ввода ajax-запроса

0 голосов
/ 06 июня 2018

Я создаю приложение для поиска шин.Я хочу, чтобы пользователь был перенаправлен на новую страницу после того, как у него есть входная информация для запроса ajax api.На данный момент информация вставляется после первой страницы, но на той же странице.Как создать новую страницу с результатами AJAX, как только пользователь введет информацию и отправит запрос.У меня есть переменная, созданная с результатами в виде виртуальной страницы. 

<!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>


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

  <div data-role="header">
    <h1>Get Next Bus Details</h1>
  </div>

      <div data-role="content">
        <div class="content-primary">
          <div data-demo-html="true">

            <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">
            </div>

            <input type="button" value="Get Current Update" id="button_get_bus">

      </div>
    </div>  
  </div>
</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
		var str = JSON.stringify(results);  

		// Code for parsing json 
		var myObj = JSON.parse(str);

		var destination = myObj.results[0].destination;
		var origin = myObj.results[0].origin;
		var arrivaldatetime = myObj.results[0].arrivaldatetime;	
		var departuredatetime =     myObj.results[0].departuredatetime;
    var routenumber = myObj.results[0].route

    var virtualPage = "";

    virtualPage += 
    '<div data-role="page" data-theme="a" id="virtualPage">' 
    + '<div data-role="header">' 
    + '<h1>' + origin + '</h1>' 
    + '<div data-role="content">' 
    + '<h3>Venue: '  + destination + '</h3>' 
    + '<h3>Date: ' + arrivaldatetime + '</h3>' 
    + '<h3>Time: ' + departuredatetime + '</h3>' 
    + '</div' 
    + '<div class="wrapper"><a data-role="button" data-transition="slide" href="#pageone">Back</a></div>' 
    + '</div>'
    + '</div>';

     $(virtualPage).insertAfter($('#pageone'));

		}
       
		});
	});

</script>
</body>
</html>

До запроса AJAX Before AJAX request

После запроса AJAX After AJAX request

...