Uncaught ReferenceError: CallApi не определен - PullRequest
Новая
       2

Uncaught ReferenceError: CallApi не определен

0 голосов
/ 05 июля 2019

Я пытаюсь вызвать API с помощью кнопки отправки, но при проверке страницы в Chrome я получаю следующие ошибки:

Uncaught ReferenceError: CallApi не определено

Мой код выглядит следующим образом: 

  <script type="text/javascript" href="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">



function CallApi(event)
{
  var username = "****"
  var password = "***"
  var engagamentId=$('#ctl00_ctl05_fvlc_Form1_txtEngagementID').val();
  if (engagamentId) 

    $.ajax({
      url: 'https://hello.com/engagements/engagementdetails/'+ $('#ctl00_ctl05_fvlc_Form1_txtEngagementID').val(),
      type: "GET",
      crossDomain: true,
      dataType: "jsonp",
      jsonp: "json_callback",
      headers: {
                "Authorization": "Basic " + btoa(username + ":" + password)"
                },
      success: function (data) {  
        $('#ctl00_ctl05_fvlc_Form1_txtEngagementID').val(data.EngagementID);
        $('#ctl00_ctl05_fvlc_Form1_txtClientName').val(data.ClientName);
        $('#ctl00_ctl05_fvlc_Form1_txtPOA').val(data.AccountingEndPeriod);
        $('#ctl00_ctl05_fvlc_Form1_txtCurrentTaxYear').val(data.TaxYear);
        $('#ctl00_ctl05_fvlc_Form1_txtEngagementManager').val(data.EngagementManager);

      },
      error:function(a,b,c)
      {
        alert(a.responseText);
        //alert("Engagement not found!");
      }

    });
  else alert("Please enter 'Engagement ID'");
}

И моя кнопка имеет следующий HTML-код: 

<input type="button" value="Get Engagement Details" onclick="CallApi(event)" class="RadButton RadButton_Cora rbButton rbRounded rbIconButton">

Может кто-нибудь посоветовать, что я?я делаю неправильно?Я посмотрел на связанные вопросы / ответы, но не могу заставить его работать.

Спасибо!

Ответы [ 4 ]

0 голосов
/ 05 июля 2019

Это не работает, потому что в момент, когда DOM создается браузером, функция CallApi еще не существует.Это происходит из-за порядка загрузки элемента и сценариев.Я полагаю, что если вы вставите скрипт в раздел <head>, функция должна работать.

Я рекомендую изменить что-то вроде этого: 

$ (document) .ready (function () {
   $ ('#id-of-my-button-element').on('click', CallApi);
});
0 голосов
/ 05 июля 2019

Вы оба пытаетесь импортировать JQuery и писать собственный код JS в одном теге скрипта.

Вы должны включить JQuery в тег.Затем в другом теге объявите свой пользовательский код JS.

Сделайте это так (я просто делаю предупреждение для демонстрационных целей): 


<html>
<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script type="text/javascript">
        function CallApi(event) {
            alert('test')
        }
    </script>
</head>

<body>
   <input type="button" value="Get Engagement Details" onclick="CallApi(event)" />
</body>
</html>
0 голосов
/ 05 июля 2019

Следующий HTML-файл работает для меня, поскольку он может вызвать ваш URL-адрес API и получить 404, а затем выдать предупреждение в ответном сообщении об ошибке: 

<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
  </script>
  <script>

    function CallApi(event)
    {
      var username = "****"
      var password = "***"
      var engagamentId=$('#ctl00_ctl05_fvlc_Form1_txtEngagementID').val();
      if (engagamentId) 

      $.ajax({
       url: 'https://hello.com/engagements/engagementdetails/'+ 
          $('#ctl00_ctl05_fvlc_Form1_txtEngagementID').val(),
       type: "GET",
       crossDomain: true,
       dataType: "jsonp",
       jsonp: "json_callback",
       headers: {
        "Authorization": "Basic " + btoa(username + ":" + password)
       },
        success: function (data) {  
          $('#ctl00_ctl05_fvlc_Form1_txtEngagementID').val(data.EngagementID);
          $('#ctl00_ctl05_fvlc_Form1_txtClientName').val(data.ClientName);
          $('#ctl00_ctl05_fvlc_Form1_txtPOA').val(data.AccountingEndPeriod);
          $('#ctl00_ctl05_fvlc_Form1_txtCurrentTaxYear').val(data.TaxYear);
          $('#ctl00_ctl05_fvlc_Form1_txtEngagementManager').val(data.EngagementManager);

       },
       error:function(a,b,c)
       {
         alert(a.responseText);
         //alert("Engagement not found!");
       }
     });
     else alert("Please enter 'Engagement ID'");
   }
 </script>
 <input type="button" value="Get Engagement Details" onclick="CallApi(event)" 
    class="RadButton RadButton_Cora rbButton rbRounded rbIconButton">
  <input type="text" id="ctl00_ctl05_fvlc_Form1_txtEngagementID" value="foo" />
</html>
0 голосов
/ 05 июля 2019

функция не определена, поэтому, скорее всего, файл javascript не включен правильно. Чтобы предотвратить такие ошибки, как:

  1. включайте файлы, используя src вместо href <script src="myscripts.js"></script>
  2. включайте файлы в правильном порядке (сначала jquery, затем ваш скрипт)
  3. понимаете, что означает термин "подъем" в js
  4. проверьте инструменты разработчика в chrome (сеть), чтобы проверить, правильно ли загружены файлыили проверьте window.CallApi, так как он должен быть определен глобально
  5. , если вы задаете скрипты direclty в html, все равно оберните их тегами скрипта <script>function CallApi(event) {console.log(event);};</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...