ajaxエラーに関するエラーメッセージを表示するには：function（）

Question

私のajax.butでエラー部分が発生した場合は、指定されたページにエラーメッセージを表示したいのですが、この指示されたページに行くとエラーメッセージが表示されます。このページはエラーメッセージを示しています。下は私のコードです。

index.htmlを

<form method="post" name="myForm" action="tracking.php"> 
         <input type="text" name="number" id="number" placeholder="Enter LR Number" required> 
         <input type="submit" name="submit" value="Go">  
        </form> 

tracking.php

<script> 
     $(document).ready(function() { 
      var from = ""; 
      $('#loadings').show(); 
      $.ajax({ 
       type: "GET", 
       url: 'http://apis.abc.abc/api/Get_Loadsheet_Details/<?php echo $number; ?>', 
       dataType: 'json', 
       success: function (response) { 
        $('#loadings').hide(); 
        console.log(response); 
        document.getElementById('lrid').innerHTML = "LR NO: " + response[0].LRSUFIX + response[0].LR_NO; 
        document.getElementById('consign').innerHTML = response[0].COMPANY_NAME; 
        document.getElementById('from').innerHTML = response[0].LOADFROMMST; 
        document.getElementById('dest').innerHTML = response[0].DESTINATION; 
        document.getElementById('case').innerHTML = response[0].NO_OF_PKT; 
        document.getElementById('lrsta').innerHTML = response[0].LR_STATUS; 
        document.getElementById('lr').innerHTML = response[0].lrLoadStatus; 
        document.getElementById('vecno').innerHTML = response[0].VEHICLE_NO; 
        document.getElementById('lrstatus').innerHTML = response[0].LOADIG_STATUS; 
        document.getElementById('ldate').innerHTML = response[0].DATE; 
       }, error: function (errors) { 
        console.log(errors);//alert('hi');      
        $('#loadings').hide(); 
        $('#error').html("<h2><span style='color:red;'>No data found on this LR No.</span></h2>");       
       } 
      }); 
     }); 
    </script> 
    <section> 
     <div id="error"></div> 
     <div class="loader-div" style="position:relative;" ><img id="loadings" src="images/loading2.gif" style=" left: 40%; 
             position: absolute; 
             top:250px; 
             z-index:1111;"></div> 
     <div class="container" >    

      <div class="body_left" id="container">     
       <h1 class="heading_3">Tracking Details</h1> 
       <table width="100%" class="track"> 
        <tr> 
         <th >Order Information</th> 
         <th id="lrid"></th> 
        </tr> 
        <tr> 
         <td>Consignee</td> 
         <td id="consign"> </td> 
        </tr> 
        <tr> 
         <td>From</td> 
         <td id="from"></td> 
        </tr> 
        <tr> 
         <td>Destination</td> 
         <td id="dest"> </td> 
        </tr> 
        <tr> 
         <td>Cases</td> 
         <td id="case"> </td> 
        </tr> 
        <tr> 
         <td>LR Status</td> 
         <td id="lrsta"></td> 
        </tr> 
        <tr> 
         <td>LR</td> 
         <td id="lr"></td> 
        </tr> 
       </table> 
       <br> 
       <br> 
       <table width="100%" class="track"> 
        <tr> 
         <th colspan="2">Load Information</th> 
        </tr> 
        <tr> 
         <td>VEHICLE NUMBER:  </td> 
         <td id="vecno"></td> 
        </tr> 
        <tr> 
         <td>LOAD STATUS </td> 
         <td id="lrstatus"> </td> 
        </tr> 
        <tr> 
         <td>LOAD DATE:</td> 
         <td id="ldate"> </td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </section> 

Answer 1

は、HTMLコードの下にスクリプトコードを置くようにしてください。 Jqueryはhtmlがロードされる前にセレクタ "#error"を見つけることができないためです。 試してみてください。