Несколько обработчиков событий jQuery document.read, работающих в неправильном порядке

Question

Недавно я добавил функцию в наше веб-приложение ASP.NET MVC. Появляется страница, которая отображается, когда пользователь нажимает на элемент в таблице. На странице используется AJAX для отображения частичного представления в одном div в HTML-странице страницы. В частичном представлении используется пользовательский интерфейс Telerik Kendo для определения и отображения диалогов и элементов управления DropDownList. Это сложно в том, что импорт JavaScript находится на странице View, а PartialView просто создает HTML-код, который будет отображаться в div.

JavaScript Я написал на странице включает в себя обработчик событий с jQuery document.ready:

$(document).ready(
    function() { 
     if ($('#details-map').val() != '') 
      $('#details-map').remove(); 

     var urlTail = '?t=' + (new Date().getTime()); 

     // Make the AJAX call and load the result into the details box. 
     $('#detailsbox').load('<%= Url.Action("Details") %>' + '/' + '<%: Model.Id %>' + urlTail, displayDetails); 
    } 
) 

Это прекрасно работает, когда я запустить приложение на моем локальном хосте. Проблема возникает при развертывании страницы на нашем сервере разработки. В этом случае, есть дополнительный обработчик document.ready события, которое испускаемый до самого конца страницы расширений Telerik Кендо/ASP.net MVC:

<script type="text/javascript"> 
//<![CDATA[ 
jQuery(document).ready(function(){ 
if(!jQuery.telerik) jQuery.telerik = {}; 
jQuery.telerik.cultureInfo=...; 
}); 
//]]> 
</script> 

На этой странице, обработчик $(document).ready событий я написал пробеги до Telerik обработчик, и мой код явно зависит от обработчика Telerik, работающего в первую очередь. Когда моя первая работает, я получаю ошибку JavaScript, в которой говорится: «jQuery.telerik.load не является функцией».

Поскольку этого не происходит на моем локальном хосте, как я могу убедиться, что обработчик события, подготовленного вторым документом, запустить первый

Edit:

После дополнительных исследований, я обнаружил, что проблема заключается в том, что два сценария, упомянутые в моем ответе, который, как предполагается, должны быть записаны на страницу с помощью следующей строки в Master Страница, используемая мной страницами:

<%= Html.Telerik().ScriptRegistrar().Globalization(true).jQuery(false).DefaultGroup(group => group.Combined(false).Compress(false)) %> 

Не загружаются. Другими словами, указанная выше строка ничего не делает. Однако он работает на другой странице, которая использует одну и ту же главную страницу. Я поместил точку останова на линии, и она выполняется. У кого-нибудь есть идеи?

Answer 1

Вы либо будете иметь, чтобы сделать это шоу после второго на странице или сделать что-то я не хочу предложить:

$(document).ready(function() { 
    function init { 
     /* all your code that needs to be run after telerik is loaded */ 
    } 
    if ($.telerik) { 
     init(); 
    } else { 
     setTimeout(function check4telerik() { 
      if ($.telerik) { 
       return init(); 
      } 
      setTimeout(check4telerik, 0); 
     }, 0); 
    } 
}); 

Итак, если загружен $.telerik, он работает, в противном случае это опросы, пока он не установлен, и когда он установлен, он запускает код. Это некрасиво, но если у вас больше нет контроля, это, вероятно, ваш единственный вариант, если только $.telerik не использует какое-либо событие, в которое вы можете подключиться.

Answer 2

После нескольких часов работы над этим, я, наконец, получил его на работу. Проблема заключалась в том, что два файла JavaScript, которые используются элементом управления Telerik DropdownList и Window, не загружались.

В спелеология через JavaScript на странице, я наткнулся на этот сценарий, который был создан с помощью Telerik:

if(!jQuery.telerik){ 
jQuery.ajax({ 
url:"/Scripts/2011.3.1306/telerik.common.min.js", 
dataType:"script", 
cache:false, 
success:function(){ 
jQuery.telerik.load(["/Scripts/2011.3.1306/jquery-1.6.4.min.js","/Scripts/2011.3.1306/telerik.common.min.js","/Scripts/2011.3.1306/telerik.list.min.js"],function(){ ... }); 
}});}else{ 
jQuery.telerik.load(["/Scripts/2011.3.1306/jquery-1.6.4.min.js","/Scripts/2011.3.1306/telerik.common.min.js","/Scripts/2011.3.1306/telerik.list.min.js"],function(){ ... }); 
} 

Этот сценарий был излучаемого вызовом Html.Telerik.DropdownListFor() на мой частичный вид. Я предполагаю, что код для двух файлов JavaScript, упомянутых в коде, telerik.common.min.js и telerik.list.min.js, не был выпущен, так как вызов был на частичном представлении.Или я должен был включить их все вместе & не знал об этом (я очень новичок в этих элементах управления). Как ни странно, все работало, когда я запускал его локально, поэтому я не понимаю.

В любом случае, я добавил два тега <script> к моему View, чтобы включить эти файлы, и все началось. То есть, я добавил на свою страницу следующие метки:

<script type="text/javascript" src="../../Scripts/2011.3.1306/telerik.common.min.js"></script> 
<script type="text/javascript" src="../../Scripts/2011.3.1306/telerik.list.min.js"></script> 

Живи и учись.