This is a migrated thread and some comments may be shown as answers.
Change URL of tab content
8 Answers 312 Views
This is a migrated thread and some comments may be shown as answers.
DMC Helpdesk
Top achievements
Rank 1
DMC Helpdesk asked on 16 Apr 2012, 12:02 PM
Hi,

I am trying to load a different page on the first,second, and third tab when a drop down list selected item changes.I followed the solution at (http://www.kendoui.com/forums/ui/tabstrip/change-url-of-tab-content.aspx) but the code does not seem to work.

<script type="text/javascript">
$(function () {
  $("#AlliancesSummaryFormModel_CodeShare").change(function () {
$($('#timelineTabStrip').find('a.k-link')[0]).data('contentUrl', '/AlliancesPerformancePortal/Flown/AlliancesSummary/Q/2015/1/All/AED');
 
            });
        });
 
    </script>

The find method return value evaluates to an object which means it not null, but the call to .data('contentUrl',url) does not load the new URL content.

Thanks

Madani

8 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 18 Apr 2012, 08:26 AM
Hi,

You have to use the select method if you want to open the tab in question.
Regards,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
DMC Helpdesk
Top achievements
Rank 1
answered on 18 Apr 2012, 01:38 PM
The code works now, but I still have one problem.The URL is changed for the already visited tabs but not for the others.Here is my scenario:

-click tab1
-click tab2
-select an item from the dropdwon list.This triggers contentUrl update for all tabs.
-click tab1: the url is updated
-click tab2: the url is update
-click tab3: the url is NOT updated

Thanks

Madani
0
DMC Helpdesk
Top achievements
Rank 1
answered on 18 Apr 2012, 02:11 PM
It seems the contentUrl does not take effect until I reolad all the tabs.

     $($('#q1Tab').find('a.k-link')[0]).data('contentUrl', q1Url);              
               $($('#q2Tab').find('a.k-link')[0]).data('contentUrl', q2Url);
               $($('#q3Tab').find('a.k-link')[0]).data('contentUrl', q3Url);
               $($('#q4Tab').find('a.k-link')[0]).data('contentUrl', q4Url);
               timelineTabStrip.reload($('#q1Tab'));
               timelineTabStrip.reload($('#q2Tab'));
               timelineTabStrip.reload($('#q3Tab'));
               timelineTabStrip.reload($('#q4Tab'));

Is there a way to avoid that?

Thanks
0
Kamen Bundev
Telerik team
answered on 23 Apr 2012, 12:00 PM
Hello,

Since you can pass a selector with several tabs, can you try like this:
timelineTabStrip.reload("#q1Tab,#q2Tab,#q3Tab,#q4Tab");

Regards,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
DMC Helpdesk
Top achievements
Rank 1
answered on 25 Apr 2012, 07:55 AM
Thanks Kamen. I want to avoid loading all tabs.I want only the current tab to be reloaded.All the other tabs should load the new URL I stored in 'contentUrl' when they are clicked.

Is this possible ?

Thanks

Madani

0
Kamen Bundev
Telerik team
answered on 27 Apr 2012, 04:33 PM
Hi,

You can try another way to accomplish this - the initial load of ajax content is detected by both contentUrl presence and empty content element. So, in order to trigger reload, you can change the contentUrl and empty the content element, or you can do this in the select event, like this:
select: function (e) {
    $(e.contentElement).empty();
}


Kind regards,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
DMC Helpdesk
Top achievements
Rank 1
answered on 30 Apr 2012, 09:48 AM
Thanks Kamen. Unfortunately, the code you mentioned did not help.Changing the contentUrl data attribute of each tab has no effect unless the tab is reloaded immediately.I Emptied the content but the tab keeps loading the old url and not the new one which I stored last.

I am now thinking of updating the contentUrls property of the tabstrip iteself instead of the contentUrl  data attribute of the tab.How can I access this property ?

Thanks

Madani



0
Kamen Bundev
Telerik team
answered on 02 May 2012, 02:30 PM
Hello,

The below mentioned method works here, I will need to see more code to be able to help you get it running on your side. Can you provide a sample project or a live URL where I can see it in action?

Kind regards,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
DMC Helpdesk
Top achievements
Rank 1
Answers by
Petyo
Telerik team
DMC Helpdesk
Top achievements
Rank 1
Kamen Bundev
Telerik team
Share this question
or