Динамическая генерация страниц Jquery Mobile - PullRequest
Новая
       9

Динамическая генерация страниц Jquery Mobile

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

Я создаю приложение для поиска шин.Пользователь вводит идентификатор автобусной остановки, который анализирует действующий API с идентификатором, и результаты внедряются в динамическую страницу в переменной.Я хочу перенаправить пользователя на страницу результатов "# page2". Код работает без ошибок, а синтаксический анализ API работает отлично.Вставки и страницы нет.Какие-либо предложения?в тот момент, когда я использую этот код для переноса пользователя на страницу, но он не работает: 

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

$.mobile.pageContainer.pagecontainer("change", "#page2");

Я думаю, что это может быть связано с идентификатором в моей переменной "virtualPage".Я делал это раньше с помощью приложения на основе списка, но в каждом цикле создавался идентификатор для ссылки с i и то же для идентификатора страницы.

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