title: TypeError: $.ajax is not a function at HTMLSelectElement
body: <p>I have a problem in my jquery (I think) and I'm not seeing the solution. I have 3 select boxs in html structure. The first one is populated by a sqlsrv query and the second one uses as ajax call based on the selection of the first one.</p>
  <p>Till this point, is everything Ok.</p>
  <p>Then, the third select box, I use another ajax call based on the selection of the second select box and does not work. Console log shows that &quot;TypeError: $.ajax is not a function&quot;.</p>
  <p>I don't understand because in the previous selections, it works.</p>
  <p>Html Code:</p>
  <pre><code>&lt;label for='cliente' class='mr-sm-2' style='font-size: 14px; margin-top: 15px;'&gt;Cliente&lt;/label&gt;
  &lt;select class='custom-select' id='cliente' name='cliente' style='font-size:12px;' required&gt;
          &lt;?php
          $sql= sqlsrv_query($conn,&quot;Select no, nome from cl(nolock) where vendnm='&quot;.$utilizador.&quot;' 
          &quot;);
           ?&gt;
  &lt;option value=''&gt;-- Select --&lt;/option&gt;
  &lt;?php
  while ($row = sqlsrv_fetch_array( $sql, SQLSRV_FETCH_ASSOC) ) {
  echo &quot;&lt;option value='&quot;.$row['no'].&quot;'&gt;&quot;.$row['nome'].&quot;&lt;/option&gt;&quot;; }
  ?&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;form-group col-6&quot; style='text-align: left;'&gt;
  &lt;label for='doc' class='mr-sm-2' style='font-size: 14px; margin-top: 15px;'&gt;Document&lt;/label&gt;
  &lt;select class='custom-select' id='doc' name='doc' style='font-size:12px;' required disabled&gt;
  &lt;option value=''&gt;-- Select --&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;form-group col-4&quot; style='text-align: left;'&gt;
  &lt;label for='referencia' class='mr-sm-2' style='font-size: 14px; margin-top: 15px;'&gt;Item&lt;/label&gt;
  &lt;select class='custom-select' id='referencia' name='ref' style='font-size:12px;' required disabled&gt;
  &lt;option value=0&gt;-- Select --&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  <p>Jquery:</p>
  <pre><code>    &lt;script&gt;
  
  $(document).ready(function(){
  
            $(&quot;#cliente&quot;).change(function () {
      
              var cat = $(&quot;select[name=cliente]&quot;).val();
              $.ajax({
              url: 'docs.php',
              type: 'POST',
              data:{doc:cat},
            
  
  
                beforeSend: function(){
                  $(&quot;#doc&quot;).css({'display':'block'});
                  $(&quot;#doc&quot;).html(&quot;Carregando...&quot;);
  
                  $('#doc').html('&lt;option value=&quot;&quot;&gt;-- Seleccione o doc.compra --&lt;/option&gt;');
                  $('#referencia').html('&lt;option value=&quot;&quot;&gt;-- Seleccione a referencia --&lt;/option&gt;');
  
                  },
                  success: function(data)
                  {
                      $(&quot;#doc&quot;).css({'display':'block'});
                      $(&quot;#doc&quot;).html(data); 
                  },
                  error: function(data)
                  {
                      $(&quot;#doc&quot;).css({'display':'block'});
                      $(&quot;#doc&quot;).html(&quot;Houve um erro ao carregar&quot;);
  
                  }
              });
              });
  
              $(&quot;#doc&quot;).change(function (){
              var deptid1 = $(this).val();
              $.ajax({
              url: &quot;refs.php&quot;,
              type: &quot;POST&quot;,
              data:{referencia:deptid1},
  
                beforeSend: function(){
                  $(&quot;#referencia&quot;).css({'display':'block'});
                  $(&quot;#referencia&quot;).html(&quot;Carregando...&quot;);
                  },
                  success: function(data)
                  {
                      $(&quot;#referencia&quot;).css({'display':'block'});
                      $(&quot;#referencia&quot;).html(data);
                  },
                  error: function(data)
                  {
                      $(&quot;#referencia&quot;).css({'display':'block'});
                      $(&quot;#referencia&quot;).html(&quot;Houve um erro ao carregar&quot;);
                  }
              });
              });
  
   
   });
  
  &lt;/script&gt;
  </code></pre>
  <p>Any suggestion will be appreciated. Thanks</p>
  <p>Note:</p>
  <p>If I cancel ajax on the second select box and use fixed options, the ajax call for the third selection box, works fine.</p>
  <p>Help ?</p>