刷新关闭按钮上的值

时间：2014-04-20 23:49:21

标签： javascript jquery html

我在这里有一个航班跟踪器，我想拥有它，所以当你查看航班时，你可以点击关闭，然后搜索一个新航班并显示详细信息...目前如果你搜索LAX-JKF它将显示所有当前的航班，但如果您点击关闭并搜索LAX-SFO，它仍会列出LAX-JFK航班，但是在控制台中它实际上显示的是正确的搜索信息，它不会将其附加到屏幕上。

我们正在使用的模式是myModal2 ......实际上它有一个隐藏功能，也许这就是为什么它不起作用。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Flight info for <div id="results"></div></h4>
      </div>
      <div class="modal-body">


        <div id="results"></div>
        <div id="map_div" style="width: 400px; height: 300px"></div>

        <table class="table" id="clouds">

          <tbody>
            <tr>
              <th>Cloud Type</th>
              <th>Cloud Altitude</th>
            </tr>
          </tbody>
        </table>

        <table class="table" id="info">

          <tbody>
            <tr>
              <th>Tail Number</th>
              <th>Meal Service</th>
            </tr>
          </tbody>
        </table>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</div>

<div id="modal2">


  <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title" id="myModalLabel">All current Flights</h4>
        </div>

        <div id="showThis">
          <div id="results"></div>
          <div id="map_div" style="width: 400px; height: 300px"></div>
        </div>
        <div class="modal-body">



          <table class="table" id="search">

            <tbody>
              <tr>
                <th>Ident</th>

              </tr>
            </tbody>
          </table>



        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" onclick="refresh()" >Close</button>
          <script>

            function refresh() {
              // $("#origin_text").html=""
              // console.log("Test");
              document.getElementById("origin_text").value = "" //clearing the origin text box and dest text
              document.getElementById("destination_text").value = ""

            }
          </script>


        </div>
      </div>
    </div>
  </div>
</div>

<span id="airport">


欢迎来到Skytime
实时实时航班跟踪
作者：Ryan Holstein 

<form onsubmit="return false;">



  <div id="bottom">
    <img alt="787" src="./Skytime_files/787nightedit-6cb8bcca496484b3e4746781c18bbccf.jpg" style="visibility:hidden;">
  </div>

  <div id="submitfield" style="margin-top:-500px">

    <p id="identflight1" style="margin-left:150px;margin-top:100px;color:white;background-color:rgba(0, 0, 0, 0.5);margin-right:550px">&nbsp&nbsp<u>Instructions</u>
      <br/>&nbsp&nbsp1. Enter the airport code of where you are flying from and to. i.e From: KLAX TO: KJFK
      <br/>&nbsp&nbsp2. Click search and Select which flight you want to track.
      <br/>&nbsp&nbsp3. Then enjoy real live flight tracking!
      <br/>

      <div id="megatron" style="color:black;background-color:rgba(0, 0, 0, 0.5);height:200px;">
    </p>
    <h1 id="h1">Enter a flight ident to track</h1>
    <input type="text" name="ident" id="ident_text" placeholder="airport code">

    <button type="submit" id="go_button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Go</button>
    <p></p>

    <p id="originid1"><span id="from">From</span>
      <input type="text" name="origin" id="origin_text">
    </p>

    <p id="destinationid1"><span id="to">To</span>
      <input type="text" name="origin" id="destination_text">
      <!--   <button id= "go_button">Go</button>
    <button id= "go_button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Go</button> -->

      <button type="submit" id="search_button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">search</button>
      </div>
    </p>

  </div>


</form>





<script type="text/javascript" src="./Skytime_files/jsapi"></script>





<script type="text/javascript">
  var fxml_url = (MY API KEY)


  var flightOrigin;
  var flightDestination;
  var airport;
  var identAir;
  var aircraft;
  var originCity;
  var destinationCity;


  google.load("visualization", "1", {
    packages: ["map"]
  });


   // When the button is clicked, fetch the details about the entered flight ident.
  $(function () {
    $('#go_button').click(function () {
      wellLookitUp(fxml_url, $('#ident_text').val());
    });



    $('#search_button').click(function () {
      console.log($('#origin_text').val());
      console.log($('#destination_text').val());
      console.log($('#search').val());
      $.ajax({
        type: 'GET',
        url: fxml_url + 'Search',
        data: {
          'query': "-origin " + $('#origin_text').val() + " -destination " + $('#destination_text').val(),
          'howMany': 10,
          'offset': 0
        },
        success: function (result) {

          console.log(result.SearchResult.aircraft[0]);
          for (i = 0; i < result.SearchResult.aircraft.length; i++) {
            s = result.SearchResult.aircraft[i]
            // console.log(s.ident, s.destination)
            // $('#search').append($("<tr><td>" + s.ident + "</td><td>" + s.destination + "</td></tr>"));
            $('#search').append($('<tr><td><a href="#" onclick="wellLookitUp2(\'' + fxml_url + '\',\'' + s.ident + '\');return false;">' + s.ident + '</a></td></tr>'));
            console.log(results);
            $("#showThis").hide();

          }

        },

        error: function (data, text) {
          alert('Failed to fetch flight: ' + data);
        },
        dataType: 'jsonp',
        jsonp: 'jsonp_callback',
        xhrFields: {
          withCredentials: true
        }

      });

    });

  });

  function wellLookitUp(fxml_url, ident) {
    // $('#modal2').modal('hide');
    // $('#modal2').modal('hide');

    $.ajax({
      type: 'GET',
      url: fxml_url + 'InFlightInfo',

      data: {
        'ident': ident
      },
      success: function (result) {

        // display some textual details about the flight.
        var flight = result.InFlightInfoResult;
        flightOrigin = flight.origin;
        flightDestination = flight.destination;
        airport = flight.Taf;
        identAir = flight.faFlightID;

        $('#results').html('Flight ' + flight.ident + ' from ' + flightOrigin + ' to ' + flightDestination + ' Altitude: ' + flight.altitude + ' Groundspeed ' + flight.groundspeed); //+ ' Depature Time' + flight.departureTime + ' Arrival Time' + flight.arrivalTime );

        // display the route on a map.
        fetchAndRenderRoute(flight.faFlightID);
      },

      error: function (data, text) {
        alert('Failed to fetch flight: ' + data);
      },
      dataType: 'jsonp',
      jsonp: 'jsonp_callback',
      xhrFields: {
        withCredentials: true
      }
    });
  }


   // Fetch the planned route for a specified flight_id.
  function fetchAndRenderRoute(flight_id) {
    $.ajax({
      type: 'GET',
      url: fxml_url + 'DecodeFlightRoute',
      data: {
        'faFlightID': flight_id
      },
      success: function (result) {
        // Initialize a data table using the Google API.
        var table = new google.visualization.DataTable();
        table.addColumn('number', 'Lat');
        table.addColumn('number', 'Lon');
        table.addColumn('string', 'Name');

        // Insert all of the points into the data table.
        console.log(result);
        var points = result.DecodeFlightRouteResult.data;
        table.addRows(points.length);
        for (rowid = 0; rowid < points.length; rowid++) {
          table.setCell(rowid, 0, points[rowid].latitude);
          table.setCell(rowid, 1, points[rowid].longitude);
          table.setCell(rowid, 2, points[rowid].name + ' (' + points[rowid].type + ')');
        }

        // Render the data table into a map using Google Maps API.
        var map = new google.visualization.Map(document.getElementById('map_div'));
        map.draw(table, {
          showTip: true,
          showLine: true,
          lineWidth: 3,
          lineColor: '#009900'
        });

        addMetar();
        addTaf();
        addSearch();
        // addFlightInfo();



      },
      error: function (data, text) {
        alert('Failed to decode route: ' + data);
      },
      dataType: 'jsonp',
      jsonp: 'jsonp_callback',
      xhrFields: {
        withCredentials: true
      }
    });
  }



  function wellLookitUp2(fxml_url, ident) {
    // $('#modal2').modal('hide');
    // $('#modal2').modal('hide');

    $.ajax({
      type: 'GET',
      url: fxml_url + 'InFlightInfo',

      data: {
        'ident': ident
      },
      success: function (result) {

        // display some textual details about the flight.
        var flight = result.InFlightInfoResult;
        flightOrigin = flight.origin;
        flightDestination = flight.destination;
        airport = flight.Taf;
        identAir = flight.faFlightID;
        $("#showThis").show();
        $('.modal-body').html('Flight ' + flight.ident + ' from ' + flightOrigin + ' to ' + flightDestination + ' Altitude: ' + flight.altitude + ' Groundspeed ' + flight.groundspeed); //+ ' Depature Time' + flight.departureTime + ' Arrival Time' + flight.arrivalTime );



        // display the route on a map.
        fetchAndRenderRoute(flight.faFlightID);
      },

      error: function (data, text) {
        alert('Failed to fetch flight: ' + data);
      },
      dataType: 'jsonp',
      jsonp: 'jsonp_callback',
      xhrFields: {
        withCredentials: true
      }
    });
  }


  function addMetar() {
    $.ajax({
      type: 'GET',
      url: fxml_url + 'MetarEx',
      data: {
        'airport': flightOrigin,
        'howMany': 1,
        'offset': 0,
        'startTime': (new Date()).getTime()
      },
      success: function (result) {
        console.log(result.MetarExResult.metar);
        for (rowid = 0; rowid < result.MetarExResult.metar.length; rowid++) {
          m = result.MetarExResult.metar[rowid]
          console.log(m.cloud_type, m.cloud_altitude)
          $('#clouds').append($("<tr><td>" + m.cloud_type + "</td><td>" + m.cloud_altitude + "</td></tr>"));
        }

      },

      error: function (data, text) {
        alert('Failed to fetch flight: ' + data);
      },
      dataType: 'jsonp',
      jsonp: 'jsonp_callback',
      xhrFields: {
        withCredentials: true
      }
    });
  }


  function addTaf() {

    $.ajax({
      type: 'GET',
      url: fxml_url + 'AirlineFlightInfo',
      data: {
        'faFlightID': identAir
      },
      success: function (result) {
        console.log(result.AirlineFlightInfoResult);
        b = result.AirlineFlightInfoResult
        //          console.log(b.meal_service)
        $('#info').append($("<tr><td>" + b.tailnumber + "</td><td>" + b.meal_service + "</td></tr>"));

      },

      error: function (data, text) {
        alert('Failed to fetch flight: ' + data);
      },
      dataType: 'jsonp',
      jsonp: 'jsonp_callback',
      xhrFields: {
        withCredentials: true
      }

    });
  }
</script>
<script src="./Skytime_files/saved_resource" type="text/javascript"></script>
<link href="./Skytime_files/ui+en.css" type="text/css" rel="stylesheet">
<script src="./Skytime_files/format+en,default+en,ui+en,map+en.I.js" type="text/javascript"></script>

0 个答案:

没有答案
相关问题
最新问题