javascript - Multiple jQuery document.read event handlers running in wrong order -

i added feature our asp.net mvc web application. there's page displayed when user clicks on item in table. page uses ajax display partial view in single div in page's html. partial view uses telerik kendo ui define , display dialogs , dropdownlist controls. complicated in javascript imports on view page, while partialview builds html displayed in div.

the javascript wrote on page includes jquery document.ready event handler:

$(document).ready(     function () {         if ( $('#details-map').val() != '' )             $('#details-map').remove();          var urltail = '?t=' + (new date().gettime());          // make ajax call , load result details box.         $('#detailsbox').load('<%= url.action("details") %>' + '/' + '<%: model.id %>' + urltail, displaydetails);     } ) 

this works fine when run application on localhost. problem appears when deploy page our development server. in case, there's additional document.ready event handler that's emitted end of page telerik kendo / asp.net mvc extensions:

<script type="text/javascript"> //<![cdata[ jquery(document).ready(function(){ if(!jquery.telerik) jquery.telerik = {}; jquery.telerik.cultureinfo=...; }); //]]> </script> 

on page, $(document).ready event handler wrote runs before telerik handler, , code depends on telerik handler running first. when mine runs first, javascript error says "jquery.telerik.load not function'.

since not happen on localhost, how make sure second document ready event handler run first?

edit:

after more research, i've found problem 2 scripts mentioned in answer, supposed written page via following line in master page used page:

<%= html.telerik().scriptregistrar().globalization(true).jquery(false).defaultgroup(group => group.combined(false).compress(false)) %> 

are not being loaded. in other words, above line nothing. works on page uses same master page, though. i've placed breakpoint on line , executing. have ideas?

you're either going have make show after second 1 on page or hate suggest:

$(document).ready(function() {     function init {         /* code needs run after telerik loaded */     }     if ( $.telerik ) {         init();     } else {         settimeout(function check4telerik() {             if ( $.telerik ) {                 return init();             }             settimeout(check4telerik, 0);         }, 0);     } }); 

so, if $.telerik loaded, runs, otherwise polls until it's set, , when set, runs code. it's not pretty, if don't have more control, it's option, unless $.telerik emits kind of event can hook into.