CODEWITHSUNDEEP
javascriptasp.net
Aharon Manne
Aharon Manne

Reputation: 712

JS not updating Textbox

I have the following JS embedded in an aspx file. The purpose is to take the flight identification in the TextBoxAirportPkup box, call FlightAware, and write the destination airport in the TextBoxAirportName textbox.

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

I can step through the procedure using the JS debugger in Chrome DevTools. No error is thrown, but the textbox is not updated. I suspect a syntax error in the call to $('#TextBoxAirportName').html(flight.origin), but JS is not my strength. Can anyone identify the error?

Upvotes: 0

Views: 69

Answers (2)

Drew Kennedy
Drew Kennedy

Reputation: 4168

With ASP.NET, the ID of Controls will change to be unique when the project is run. If you wish to target an ASP control with Javascript, you have three options:

Option One

create a unique class identifier for each 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 --%>

However, this option defeats the purpose of classes. Alternatively (and recommended), you can do:

Option Two

Use the ID of the TextBox Control by using ClientID

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

Option Three

As provided by David Hammond, you can alternatively select the ID as follows:

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

Upvotes: 1

devqon
devqon

Reputation: 13997

The jQuery .html(aValue) sets the HTML of an element (which doesn't do anything for an input field). You'll probably want to set the value of the input:

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

Upvotes: 2

Related Questions