This is a migrated thread and some comments may be shown as answers.

[Solved] LoadContentFrom when does it do an action

15 Answers 766 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

pol verpollen asked on 18 Feb 2010, 09:53 PM

Hello,

I try to use the tabstrip with the LoadContentFrom (Action, Controller) but it seems like the content is cached or something.
When does the tabstrip call the action?
I want every tab be dynamically loaded.
When I click on the New button (see code) I want the second tab disabled and the first reloaded with no data.

    
            <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<BuildingDetailModel>" %> 
        
            <%Html.Telerik().ScriptRegistrar().Scripts(scripts => 
        
                        scripts.Add("2009.3.1320/telerik.common.js")  
        
                        .Add("2009.3.1320/telerik.grid.js")  
        
                        .Add("2009.3.1320/telerik.tabstrip.min.js"))  
        
                        .jQuery(false).Render();%> 
        
            <script language="javascript">  
        
                $(document).ready(function() {  
        
                    $("#ButtonNewBuilding").click(function() { DisableAll();});  
        
                });  
        
                function CreateNewBuilding() {  
        
                    var urlAction = '<%= Url.Action("CreateNew", "Building") %>';  
        
                    $.ajax(  
        
                        {  
        
                            type: "POST",  
        
                            url: urlAction,  
        
                            success: function(result) {  
        
                               // ShowTab(1);  
        
                                DisableAll();  
        
                            },  
        
                            error: function(req, status, error) {  
        
                                alert("Sorry! We could not receive your feedback at this time.");  
        
                            }  
        
                        });  
        
                    }  
        
                    function DisableAll() {  
        
                        var tabstrip = $("#TabStrip").data("tTabStrip");  
        
                        var item = $("li", tabstrip.element)[2];   
        
                        tabstrip.select(item);  
        
                    }  
        
                function ShowTab(idx) {  
        
                    var tabstrip = $("#TabStrip").data("tTabStrip");  
        
                    //Change "TabStrip" for the name of your tab strip              
        
                    var item = $("li", tabstrip.element[idx]);  
        
                    tabstrip.select(item);  
        
                }      
        
            </script> 
        
            <div> 
        
                <div> 
        
                    <input type="button" id="ButtonNewBuilding" name="ButtonNewBuilding" value="New building" /> 
        
                </div> 
        
                <div> 
        
                    <% Html.Telerik().TabStrip().Name("TabStrip").Items(parent => 
        
                   {  
        
                       parent.Add().Text("Algemeen").LoadContentFrom(Url.Action("BuildingGeneralInformation", "Building")).Selected(true) ;  
        
                       parent.Add().Text("Kavels").LoadContentFrom(Url.Action("Show_BuildingKavel", "Building"));  
        
                   })  
        
                   .HtmlAttributes(new { style = "float: left; " })         
        
                   .Render();      
        
                    %> 
        
                </div> 
        
            </div>

Thanks in advance.

Regards,

Pol

15 Answers, 1 is accepted

answered on 19 Feb 2010, 09:22 AM

Hi Pol,

The Ajax request is made only once, when the tab is clicked for the first time. Once the content is loaded, clicking of the tab will no longer make an Ajax request to the server. When the content is loaded, the href of the link in the tab is replaced with "#". The content URL is saved in the data object of the "li" item. You can reach it with the following code snippet:

function onSelect(e) {

var $item = $(e.item);

var $link = $item.find('.t-link');

var contentUrl = $link.data('ContentUrl');

}

To achieve your goal you can wire the OnSelect client event and reload the content of the tab.

Greetings,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 22 Feb 2010, 09:14 AM

mvcapplication3.zip

Hi Pol,

I could not reproduce the depicted issue. I have attached a test project which I created in my attempt to replicate the described problem.

Sincerely yours,
Georgi Krustev
the Telerik team

answered on 18 Mar 2010, 01:57 PM

Hi there,

I've just started looking at Telerik controls for use in our company. It's great that the MVC is OpenSource and allows me to move on with prototyping a web application I am developing. I have also downloaded the ASP.Net AJAX trial and we will be purchasing in April as we require the WYSIWYG and more crucially, the spell checker (we write for hospital systems so a medical dictionary would be added).

In the meantime, for RAD, I looked at jQueryUI which I was impressed with, but decided to utilise the Telerik MVC API to keep consistency.

My very first minor hurdle, was as this thread mentions, caching in the tab strip. I was disappointed to see a lack of a server side setting to disable caching, and that I had to wire in a client side javascript option. Surely an overload on the LoadContentFrom with a cache property would be very simple to add, or just another method? The jQueryUI allows for this simply in the ajaxOptions {cache:false} at initialization.

I may be overlooking something here regarding the client script as well, and I understand your example offers up a near solution, but what I can't see, is how to retrieve the id of the containing div that the tab relates to which I can set on the ajax get i.e. the element to reload the content into. I've had a peruse through the api but couldn't see anything at fist look. I can see you logicall stucture the divs with an id of TabStrip-<index>, just need to know how it's linked!

function onSelect(e)

{

var $item = $(e.item);

var $link = $item.find('.t-link');

var contentUrl = $link.data('ContentUrl');

if (contentUrl == null)

return;

// will modify to add datetime ms to avoid caching, or use more verbose ajax with cache:false;

$.get(contentUrl, function(data)

{

$('#content').html(data); // All I need is to know the ID of the DIV that this item relates to!

});

}

Kindest Regards Sky

answered on 18 Mar 2010, 04:10 PM

Hello Sky Rumsey,

We actually do not cache the request, but perform it just once. The content is not loaded every time, because of performance issue.

Nevertheless I will log your suggestion for further investigation and possible implementation.

For now, you can use the suggested approach, as the content element is passed to the onSelect event handler. Here is the modified sample:

function onSelect(e)

{

var $item = $(e.item);

var $link = $item.find('.t-link');

var contentUrl = $link.data('ContentUrl');

if (contentUrl == null)

return;

// will modify to add datetime ms to avoid caching, or use more verbose ajax with cache:false;

$.get(contentUrl, function(data)

{

e.contentElement.html(data); // if the tab has content, it will be added to the "e" object.

});

Georgi Krustev

answered on 22 Aug 2012, 10:00 PM

For anyone still looking for a way to reload the content of a tab outside of the onSelect event, here is how I did it:

var tabstrip = $("#MainTabs").data("tTabStrip");

var tab = $('#MainTabs').data('tTabStrip').getTab({ index: tabIndex })

$('#MainTabs').data('tTabStrip').selectTab({ index: tabIndex })

var link = tab.find('.t-link');

var contentUrl = link.data('ContentUrl');

if (contentUrl) {

//reload the content tab if the contentUrl is available

$.get(contentUrl, function (data) { $(tabstrip.element).find('.t-content.t-state-active').html(data); });

}

The .getTab and .selectTab methods come from the extensions by John DeVight.

Hope that helps someone.

Thanks,
Donna