Question

我在aspx文件中嵌入了以下JS。目的是在TextBoxAirportPkup框中获取航班标识，调用FlightAware，并在TextBoxAirportName文本框中写入目的地机场。

<div class="rows">
    <div class="inputbtnholder">
        <script type="text/javascript">
           var fxml_url = ....
           $(document).ready(function () {
                $('#FlightPickupBtn').click(function () {
                    $.ajax({
                    type: 'GET',
                    url: fxml_url + 'FlightInfoEx',
                    data: { 'ident': $('#TextBoxAirportPkup').val(), 'howMany': 1, 'offset': 0 },
                    success: function (result) {
                        var flight = result.FlightInfoExResult.flights[0];
                    $('#TextBoxAirportName').html(flight.origin);
                },
                 error: function(data, text) { alert('Failed to fetch flight: ' + data); },
                 dataType: 'jsonp',
                 jsonp: 'jsonp_callback',
                 xhrFields: { withCredentials: true }
             });
         });
     });
     </script>
     <asp:TextBox class="input1" ID="TextBoxAirportPkup" placeholder="Enter Flight Number" runat="server"></asp:TextBox>
     <div id="FlightPickupBtn" class="imgbtn searchbtn"></div>
 </div>
</div>
<div class="rows">
   <div class="inputbtnholder">
      <asp:TextBox class="input1 " ID="TextBoxAirportName" placeholder="Airport" runat="server" />
      <div id="airport_search" class="imgbtn searchbtn"></div> 
   </div>

我可以使用Chrome DevTools中的JS调试器逐步完成此过程。不会引发任何错误，但文本框不会更新。我怀疑在调用$（＆＃39;＃TextBoxAirportName＆＃39;）。html（flight.origin）时出现语法错误，但JS不是我的优势。任何人都可以识别错误吗？

Answer 1

jQuery .html(aValue)设置元素的HTML（对输入字段没有任何作用）。您可能想要设置输入的值：

$("#TextBoxAirportName").val(flight.origin)

Answer 2

使用ASP.NET，控件的ID将在项目运行时更改为唯一。如果您希望使用Javascript定位ASP控件，则有三个选项：

选项一

为每个TextBox创建一个唯一的类标识符：

<asp:TextBox class="input1 txt-airport-pkup" ID="TextBoxAirportPkup" placeholder="Enter Flight Number" runat="server"></asp:TextBox> <%-- Use 'txt-airport-pkup' in your jQuery --%>

然而，这个选项违背了课程的目的。或者（和推荐），你可以这样做：

选项二

使用ClientID

使用TextBox控件的ID

$('#<%=FlightPickupBtn.ClientID%>').click(function () {
   (...)
}

选项三

根据David Hammond的说法，您也可以按如下方式选择ID：

$("[id$='FlightPickupBtn']").click(function () {
   (...)
}

JS没有更新Textbox

2 个答案:

选项一

选项二

选项三