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

[Solved] Reload a tab on click

18 Answers 503 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.

18 Answers, 1 is accepted

answered on 08 Mar 2010, 05:30 PM

Hello Andy McShane,

Please review the following forum threads devoted on the same matter:
http://www.telerik.com/community/forums/aspnet-mvc/tabstrip/loadcontentfrom-when-does-it-do-an-action.aspx
http://www.telerik.com/community/forums/aspnet-mvc/general/invoke-tabstrip-methods-from-content.aspx

Best regards,
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 09 Mar 2010, 03:06 PM

Ok, I have followed the instructions and have implemented this code

    
            <script type="text/javascript"> 
        
                function Select(e) { 
        
                    alert('Hello!'); 
        
                    var $item = $(e.item); 
        
                    var $link = $item.find('.t-link'); 
        
                    var contentUrl = $link.data('ContentUrl');  
        
                } 
        
            </script>

I have created the script above and at the end of my control I have added the following

    
                        }) 
        
                        .SelectedIndex((int)ViewData["tabIndex"]) 
        
                        .HtmlAttributes(new { @style="Height:100%" }) 
        
                        .ClientEvents(events => events.OnSelect("Select")) 
        
                        .Render();

Now, whenever I click a tab it displays the alert 'Hello!' but it does not make another call to my action to reload the tab like I need it to? How do I force another ajax call?

answered on 10 Mar 2010, 11:13 AM

Yes, thank you, I know that I need to create the Ajax request manually but I obviously need to be able to make the correct request for the selected tab. I thought the following code would give me the required url for the selected tab

var $item = $(e.item);

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

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

Hoever 'contentUrl' always returns 'undefined' so how do I get the required url to manually make an Ajax call and repopulate the correct tab?

answered on 15 Mar 2010, 05:21 PM

Ok, I have created a test enviroment where you can view this behaviour and try to see what I have done wrong. This is only a temporary link and will only be available for approx 24 hours.

http://mvc.asmwp.co.uk/

username: andy.mcshane
password: password

Once logged in click on 'Customer Administration',
Select 'Edit' for 'Customer ID' 7,

You will see the tabs and you will also see that each tab is loaded dynamically upon first selection via Ajax.

Any subsequent click on a tab shows the content url to be undefined.
Hope this helps?

answered on 16 Mar 2010, 09:45 AM

Hello Andy,

I was able to observe the depicted issue. Unfortunately I am not able to help further without running test project, which shows what your current implementation is. If you are able to host running test project, I will be able to investigate locally the issue and advice you further.

Kind regards,
Georgi Krustev
the Telerik team

answered on 16 Mar 2010, 10:32 AM

Unfortunately I am unable to do that. Never mind, I think it is time I went back to web forms anyway, I have lost far too much time trying to do this project using MVC already. Thanks anyway.

EDIT: Well so much for that idea, I have had the web forms option removed so I must now figure out how to get this to work somehow. What is it exactly that you will need form me? Do you need me to provide you with a remote desktop session to a develop environment where you can access the actual code? If so can you provide me an off forum email address where I can send you the details of a login once I have set one up?

answered on 16 Mar 2010, 05:52 PM

I have tried debugging this in IE and I can get as far as this;

            var $item = $(e.item); //I can see that this var contains an object
            var $link = $item.find('.t-link'); //I can see that this var also then contains an object

When I get to this point it is not possible to see that $link has a property called 'data' therefore it is not possible to obtain the 'ContentUrl' value. Am I looking for the correct property? Should 'data' exist?

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

This is driving me nuts as I am really struggling to be able to provide a development environment where you could access the code to view it.

answered on 17 Mar 2010, 10:29 AM

Hello Andy McShane,

We offer support tickets for exchanging personal information. Only users, which has bought some of our license has priority support and they can submit support tickets.

I will ask you to host simple test project which describes the depicted issue somewhere we can download it locally. For instance you can use RapidShare or etc.

Kind regards,
Georgi Krustev
the Telerik team

answered on 18 Mar 2010, 04:31 PM

Hello Andy McShane,

Unfortunately our policy does not allow us to provide such support to users, which are not our customers.

If you cannot upload runnable test project, please post the code of the page here. Use the "Format Code Block" button, which is placed in the upper left corner of the editor.

Regards,
Georgi Krustev
the Telerik team

answered on 18 Mar 2010, 04:44 PM

Ok, I understand. here goes then;

I have a master page as follows

    
            <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
                <head id="head2" runat="server">  
        
                    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>  
        
                    <%   
        
                        Html.Telerik().StyleSheetRegistrar()  
        
                            .DefaultGroup(group => group.Add("telerik.common.css")  
        
                                                        .Add("telerik.web20.css"))  
        
                            .Render();   
        
                    %> 
        
                    <script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script> 
        
                    <script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>   
        
                    <!--Update jQuery to latest Telerik Version as needed--> 
        
                    <script src="<%= Url.Content("~/Scripts/jquery-1.4.2.min.js") %>" type="text/javascript"></script> 
        
                </head> 
        
                <body> 
        
                <div id="page_header">  
        
                </div> 
        
                <div id="page_container">  
        
                    <div id="tabs_container">  
        
                        <div id="left_filler">  
        
                            <img alt="" src="<%= Url.Content("~/Content/Images/button_left.png") %>" width="56" height="51"/><img alt="" src="<%= Url.Content("~/Content/Images/button_filler.png") %>" width="24" height="51" /> 
        
                        </div> 
        
                        <div id="tab1">  
        
                            <img alt="" src="<%= Url.Content("~/Content/Images/buttonUnSelected.png") %>" width="210" height="51" /> 
        
                        </div> 
        
                        <div id="tab2">  
        
                            <img alt="" src="<%= Url.Content("~/Content/Images/buttonUnSelected.png") %>" width="210" height="51" /> 
        
                        </div> 
        
                        <div id="tab3">  
        
                            <img alt="" src="<%= Url.Content("~/Content/Images/buttonUnSelected.png") %>" width="210" height="51" /> 
        
                        </div> 
        
                        <div id="tab4">  
        
                            <img alt="" src="<%= Url.Content("~/Content/Images/buttonSelected.png") %>" width="210" height="51" /></a>  
        
                        </div> 
        
                        <div id="right_filler">  
        
                            <img alt="" src="<%= Url.Content("~/Content/Images/button_filler.png") %>" width="25" height="51" /><img alt="" src="<%= Url.Content("~/Content/Images/button_right.png") %>" width="55" height="51" /> 
        
                        </div> 
        
                    </div> 
        
                    <div id="sidebar_left"></div> 
        
                    <div id="content_container">  
        
                            <asp:ContentPlaceHolder ID="MainContent" runat="server" /> 
        
                    </div> 
        
                    <div id="sidebar_right"></div> 
        
                    <div id="footer"></div> 
        
                </div>     
        
                <!--SETTING JQUERY FALSE STOPS THE SCRIPT LOADING AT END OF PAGE AND BREAKING OTHER FUNCTIONALITY--> 
        
                <%= Html.Telerik().ScriptRegistrar()  
        
                               .jQuery(false)   
        
                               .DefaultGroup(group => group  
        
                                                        .Add("telerik.common.js")  
        
                                                        .Add("telerik.grid.js")  
        
                                                        .Add("telerik.grid.filtering.js")  
        
                                                        .Add("telerik.calendar.min.js")  
        
                                                        .Add("telerik.datepicker.min.js"))  
        
                %>      
        
                </body> 
        
            </html>

Then this is the tab page that is loaded up inside of the 'MainContent' place holder

    
            <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> 
        
            <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">  
        
                <%= ViewData["txtCustomerDetails"].ToString() %> 
        
            </asp:Content> 
        
            <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">  
        
                <script type="text/javascript">  
        
                    function onSelect(e) {  
        
                        // "this" in this event handler will be the component.  
        
                        // the "e" is an object passed by the jQuery event trigger.  
        
                        var $item = $(e.item);  
        
                        var $link = $item.find('.t-link');  
        
                        var contentUrl = $link.data('ContentUrl');  
        
                        alert($contentUrl);             
        
                    }  
        
                </script> 
        
                <% Html.Telerik().TabStrip()  
        
                        .Name("TabStrip")  
        
                        .Items(parent => {  
        
                             parent.Add()  
        
                                 .Text(ViewData["txtCustomerDetails"].ToString())  
        
                                 .LoadContentFrom("Edit", "Customer", new { id = ViewData["CustomerId"] });  
        
                             parent.Add()  
        
                                 .Text(ViewData["txtLicenceDetails"].ToString())  
        
                                 .LoadContentFrom("Index", "Licence", new {id = ViewData["CustomerId"] });  
        
                             parent.Add()  
        
                                 .Text(ViewData["txtSupportSchema"].ToString())  
        
                                 .LoadContentFrom("Index", "SupportSchema", new {id = ViewData["CustomerId"] });  
        
                             parent.Add()  
        
                                 .Text(ViewData["txtSystemUsers"].ToString())  
        
                                 .LoadContentFrom("Index", "SystemUser", new {id = ViewData["CustomerId"] });  
        
                             parent.Add()  
        
                                 .Text(ViewData["txtProviders"].ToString())  
        
                                                 .Content(() => 
        
                                                              {%> 
        
                                    <p>TODO:</p> 
        
                                <%  
        
                                                              });  
        
                             parent.Add()  
        
                                 .Text(ViewData["txtServiceUsers"].ToString())  
        
                                                 .Content(() => 
        
                                                              {%> 
        
                                    <p>TODO:</p> 
        
                                <%  
        
                                                              });                  
        
                        })  
        
                        .SelectedIndex((int)ViewData["tabIndex"])  
        
                        .HtmlAttributes(new { @style="Height:100%" })  
        
                        .ClientEvents(events => events.OnSelect("onSelect"))  
        
                        .Render();  
        
                %>        
        
            </asp:Content>

As you can see I am trying to use code to access the 'ContentUrl' in order to be able to reload the tab everytime it is clicked on and I cannot get the value that is required.

Does this help at all?

answered on 18 Mar 2010, 05:48 PM

Hello Andy,

To achieve your goal you can use this code snippet:

<script type="text/javascript">

function onSelect(e) {

var $item = $(e.item);

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

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

if (contentUrl) {

//reload the content tab if the contentUrl is available

$.get(contentUrl,

function(data) {

e.contentElement.html(data);

});

}

</script>

As you can notice the code checks whether the contentUrl is available. On first load it will be undefined, because it is still not set in the $link.data("ContentUrl");

I also was not enough precise in my explanation about the support, which we offer. Please review this blog post devoted on this subject.

Kind regards,
Georgi Krustev
the Telerik team