Loading Telerik controls via jQuery.load()

[ctca]

I have a web page that uses jquery.load() to load different pages into a div.

When I invoke the .load command, it loads the page perfectly into a div, but it throws an error saying that "$telerik is undefined"

On the main page, I have a link that does this when you click it...

changeTab: function (tabURL) {
        var loader = $("#tabLoad");
        var content = $("div[id$='pnlTabContent']");
        loader.css("height", content.height());
        loader.fadeIn('fast', function () {
            content.load(tabURL, function () {
                loader.fadeOut("fast");
            });
        });
    }

When I call that function, I pass in a URL that has a bunch of telerik sliders on it. Everything shows up and works properly (all CSS and self defined JavaScript) except the telerik controls.

The strange thing is that when I invoke the function again or if I call "content.load(tabURL)" a second time, everything loads fine and all the telerik controls load perfectly.

It seems as if it has to load the telerik library the first time, and the second time, it will work.

Is there any way for me to load the telerik library or initialize telerik before I call the content.load() function?

[Niko]

Hi Chad,

After reviewing the jQuery documentation for the load method, it turns out that only the fetched HTML is rendered on the page, but not the CSS and JavaScript resources. Also the page life-cycle is not executed correctly. As the RadControls rely heavily on these features having the controls rendered and functioning without them is impossible. Therefore I would not recommend to you the use of the jQuery's load method. Your option is to use an UpdatePanel or RadAjaxPanel, or even the use of an iframe in order to have the content rendered on the page.

Hope this brief explanation will help you cope with the issue you are facing.

Greetings,
Niko
the Telerik team

[ctca]

Thanks for responding to my message.

I thought the CSS and JS wouldn't load as well, which is why I did some testing, and that is actually not the case. I put a script tag on the page that I am loading with an alert and it ran just fine. It's also importing all the CSS fine as well.

Looking at the net tab when I get the page, it comes back with all the javascript I need.

Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadSlider, {"_accessKey":"","_height":"55px","_skin":"Vista","_tabIndex":0,"_uniqueID":"userPrivacy$activity1","_width":"560px","clientStateFieldID":"userPrivacy_activity1_ClientState","itemData":[{"text":"Just Me","value":"4"},{"text":"My Friends","value":"3"},{"text":"Members","value":"2"},{"text":"Everyone","value":"1"}],"itemType":2,"maximumValue":8,"value":1}, null, null, $get("userPrivacy_activity1"));
});
Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadSlider, {"_accessKey":"","_height":"55px","_skin":"Vista","_tabIndex":0,"_uniqueID":"userPrivacy$activity2","_width":"560px","clientStateFieldID":"userPrivacy_activity2_ClientState","itemData":[{"text":"Just Me","value":"4"},{"text":"My Friends","value":"3"},{"text":"Members","value":"2"},{"text":"Everyone","value":"1"}],"itemType":2,"maximumValue":8,"value":3}, null, null, $get("userPrivacy_activity2"));
});
Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadSlider, {"_accessKey":"","_height":"55px","_skin":"Vista","_tabIndex":0,"_uniqueID":"userPrivacy$activity3","_width":"560px","clientStateFieldID":"userPrivacy_activity3_ClientState","itemData":[{"text":"Just Me","value":"4"},{"text":"My Friends","value":"3"},{"text":"Members","value":"2"},{"text":"Everyone","value":"1"}],"itemType":2,"maximumValue":8,"value":1}, null, null, $get("userPrivacy_activity3"));
});
Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadSlider, {"_accessKey":"","_height":"55px","_skin":"Vista","_tabIndex":0,"_uniqueID":"userPrivacy$activity4","_width":"560px","clientStateFieldID":"userPrivacy_activity4_ClientState","itemData":[{"text":"Just Me","value":"4"},{"text":"My Friends","value":"3"},{"text":"Members","value":"2"},{"text":"Everyone","value":"1"}],"itemType":2,"maximumValue":8,"value":2}, null, null, $get("userPrivacy_activity4"));
});
Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadSlider, {"_accessKey":"","_height":"55px","_skin":"Vista","_tabIndex":0,"_uniqueID":"userPrivacy$activity5","_width":"560px","clientStateFieldID":"userPrivacy_activity5_ClientState","itemData":[{"text":"Just Me","value":"4"},{"text":"My Friends","value":"3"},{"text":"Members","value":"2"},{"text":"Everyone","value":"1"}],"itemType":2,"maximumValue":8,"value":3}, null, null, $get("userPrivacy_activity5"));
});
Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadSlider, {"_accessKey":"","_height":"55px","_skin":"Vista","_tabIndex":0,"_uniqueID":"userPrivacy$activity6","_width":"560px","clientStateFieldID":"userPrivacy_activity6_ClientState","itemData":[{"text":"Just Me","value":"4"},{"text":"My Friends","value":"3"},{"text":"Members","value":"2"},{"text":"Everyone","value":"1"}],"itemType":2,"maximumValue":8,"value":3}, null, null, $get("userPrivacy_activity6"));
});
Sys.Application.initialize();

That's what is being brought back and it works just fine the second time I load it....so if I do something like this...

content.load(tabURL, function () {
        content.load(tabURL);
});

...it works just fine.

The issue that I'm having is that it doesn't load the telerik library on the first try.

Is there any kind of front end script that allows me to initialize the telerik library before I make my content.load call?

[Niko]

Hi,

Please, review the following help articles concerning RadScriptManager and RadStyleSheetManager. There you can find the way to include external scripts as well as scripts and resources for the RadControls. Loading the resources manually may solve the issue.
Still could you, please, provide the sample page that you are working with as all my current attempts to load content through the jQuery method fail. Also having such an example would be a great benefit to the community as this would provide an alternative way to dynamically load external content. Thank you in advance. 

Greetings,
Niko
the Telerik team

[ctca]

Thanks for getting back to me.

The reason why you are having trouble loading JS and CSS with jquery.load() is because the page you're loading probably has <html> tags in it.

After doing a bunch of research on the .load() function from jquery, it doesn't load CSS/JS when there is an <html> (maybe body as well) tag in the document you are loading.

I was thinking I could initialize the telerik controls by including a js file first and then doing the load...something like this...

$.getScript("/scripts/telerik.js", function() {
    content.load("/my-page-to-load.html", function(){
         alert("page is loaded");
    });
});

If there was a js file from telerik that would initialize the $telerik variable, I could call that with $getScript and then after that js is loaded in the callback, I would be able to load my page.

For now, I think I am going to go with the jQuery slider and just build the functionality myself that telerik provides out of the box. I can't afford to use an update panel or something like that because of the load it would put on all my AJAX requests. The site I am developing for gets a considerable amount of traffic and using technology like an update panel wouldn't be good for that many requests.

[Barak]

Same here

While JQuery loads html with scrip tag, the kendo controls are not available
this works: <script type="text/javascript">
    alert("Outside the jQuery ready");
    $(function () {
        alert("Inside the jQuery ready");
    });
</script>

I did learn that pausing the debugger eventually makes the controls available

[Niko]

Hello,

Could you, please, give more details what are you trying to accomplish and what exactly does not get loaded correctly? Code samples would help immensely.

Regards,
Niko
Telerik

[Barak]

<body><div id="div1"></div></body>
<script>$(function(){
    $('#div1').load('secondpage.html') // or $.ajax('secondpage.html').done(function(html){$('#div1').html(html)})
})</script>

secondpage.html
===============
<div id="div2"></div>
<script>
var grid = $('div2').kendoGrid({...}).data('kendoGrid');
console.log(grid) // null
</script>
==============
Managed to resolve this by setting the $('div1')[0].innerHTML = html
and MANUALLY CALLING THE script
$('div1').find('script').each(function(){new Function($(this).html())()})

[Niko]

Hi,

Glad that you managed to resolve it. My tests show that everything should be loaded correctly. Still in your sample code I noticed that the selector for getting elements through ID attribute using jQuery is not prefixed with #. I assume this is a typo in the sample only.

Nevertheless I would advise you to direct KendoUI related questions to the Kendo forums in order for you to get the best experience for KendoUI specifics.


Regards,
Niko
Telerik