Функция Javascript не определена при частичном просмотре

Question

У меня есть частичное представление, как так:

@model Blah.Blah.ThisModel

<script type="text/javascript">
    $.getScript("/Scripts/Pages/ReferralEdit.js");
    initReferralEdit();
</script>

@* blah blah rest of view here *@

Тогда в моем внешнем файле ReferralEdit.js у меня есть следующее:

console.log('external loading');

function initReferralEdit() {
    console.log('function is here');
}

При загрузке в качестве основного маршрута (не Ajax), это работает нормально. При загрузке через Ajax, при проверке консоли при загрузке страницы я получаю следующее:

Uncaught ReferenceError: initReferralEdit is not defined
external loading

Итак, я знаю, что файл загружается, как первый console.log() стреляет нормально, но функция, кажется, не доступна.

Кто-нибудь может объяснить почему? (и почему ошибка отображается в журнале Chrome до external loading вывод?) Как мне добавить эти функции, чтобы они были "зарегистрированы" или "в правильной области" или что-то еще, что я пропустил?

(Я потратил много часов, пытаясь выяснить, как загрузить JS при частичном просмотре, и я всегда застрял на этих функциях, которые не определены...)

Answer 1

Вы должны убедиться, что файл полностью загружен, прежде чем пытаться вызвать какой-либо метод в нем. Попробуйте что-то вроде ниже:

$.getScript( "/Scripts/Pages/ReferralEdit.js" )
  .done(function( script, textStatus ) {
     initReferralEdit();
  })
  .fail(function( jqxhr, settings, exception ) {
    console.log('failed to load script');
});