Почему получаю ошибку Uncaught TypeError: $.ajax is not a function?

Question

[gromyko21]

Всем привет. Получаю ошибку в скрипте. Гуглил, все пишут, что ошибка из-за slim библиотеки, у меня же

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Пытаюсь отработать вот этот скрипт

<script src="{% static 'js/reconnecting-websocket.js' %}"></script>
    <script>

function selectFile() {
	e = document.getElementById('upload')
  if(e.files[0]) {
    let item = e.files[0];
    let filesize = item.size;
    let filesizeMB = (filesize / (1024 * 1024)).toFixed(2);
    if (filesizeMB >= 3) {
      alert('Максимальный размер фотографии 3 мб');
    } else {
      let form = new FormData();
      form.append('image_message', item);
      form.append('room_id', {{ room_name_json }});
      form.append('user_id', {{ username }});
        $.ajax({
            url: '/chat/upload/',
            type: "POST",
            data: form
        });
    }
  } else {
    alert('Файл не найден');
  }
}
</script>

Если просто вводить console.log($.ajax); он его находит function ajax(t, n)
Как можно исправить?

Answer 1

[Pavel Shvedov]

Возможно функция вызывается раньше, чем подключается $

Comments

[gromyko21]

В шапке идет скрипт вызова jquery, а внизу страницы уже идет этот скрипт, если вы об этом

Answer 2

[Absolute138]

Замените

$.ajax({
            url: '/chat/upload/',
            type: "POST",
            data: form
        });

На

jQuery.ajax({
            url: '/chat/upload/',
            type: "POST",
            data: form
        });

Comments

[gromyko21]

Это уже пробовал(
Uncaught TypeError: jQuery.ajax is not a function

[Absolute138]

gromyko21, а если над этой строкой добавить:
console.log('jQuery' in window);
true или false вернет в консоль?

[gromyko21]

Absolute138, вернул true

[Absolute138]

gromyko21, возможно переопределен ajax...
А так что вернет на этом конкретном участке кода?
console.log(jQuery.ajax);

[gromyko21]

Absolute138, возвращает undefined. Да вроде бы ничего не переопределено. Стоит всего 3 скрипта 2 на вебсокеты и один с ajax .

[Absolute138]

gromyko21, может быть jQuery - slim-package?? Здесь похожая проблема описана.

[gromyko21]

Absolute138, почему-то в вопрос не вставился этот код. Нет, не слим я когда гуглил мою ошибку все на нее говорят, а у меня

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

[Absolute138]

gromyko21, надо копать))
Закомментить методы, который могут обращаться к другим библиотекам, выпиливать поочереди остальные скрипты и наблюдать, пока console.log(jQuery.ajax) - не вернет функцию в консоль...

//    let form = new FormData();
//      form.append('image_message', item);
//      form.append('room_id', {{ room_name_json }});
//      form.append('user_id', {{ username }});
console.log(jQuery.ajax);

[gromyko21]

Absolute138, сделал максимально простую функцию. Внутри этой функции лог выводит underfind, а за ее пределами видит ajax... Вообще не понимаю что к чему.

console.log(jQuery.ajax);

$( "#upload" ).change(function() {
console.log(jQuery.ajax);
      jQuery.ajax({
            url: '/chat/upload/',
            type: "POST",
        });
});

[Absolute138]

gromyko21, да... не встречал еще таких аномалий, как у вас))
А если так?

window.myAjax = jQuery.ajax;
$( "#upload" ).change(function() {
console.log(window.myAjax);
console.log(window.jQuery.ajax);
      jQuery.ajax({
            url: '/chat/upload/',
            type: "POST",
        });
});

[gromyko21]

Absolute138, undefined и jquery is not a function. Тоже вообще не понимаю как так