I am having difficulty with the WebTab EnableLoadOnDemandURL capability.
I feel pretty foolish that I can't seem to figure this out... It seems like such a basic thing. I feel like I am missing something fundamental about WebTab implementation... especially since this is so easy to accomplish in UltraWebTab.
I have two ContentURL tabs.
EnableLoadOnDemandURL is set to "True".
When I click on each tab initially, I can see the content load in, and all is good. If I then navigate back to the data entry tab, and make changes. Then I navigate back to the "Print Friendly" tab (for a second time), the "Print Friendly" page does not reload. I have ruled out browser caching.
The behavior I am looking for is this: When you click the tab to navigate to the tab, the tab content URL should reload.
I thought that maybe the "EnableReloadingOnTabClick" property would give me the answer... but it only reloads the page if you click on the currently selected tab. So, if I a currently have Tab1 selected, and then I click on Tab1, then Tab1 will reload. However... if I currently have Tab1 selected, and I click Tab2 to navigate to it, Tab2 is not reloaded... despite the "EnableReloadingOnTabClick" value.
I know there's probably some really simple answer that will make me feel tremendously stupid, and I hope y'all can give it to me!
Hi Rob,
The EnableLoadOnDemandUrl is design to avoid loading iframes of all tabs on initial load (or after a full postback). Once url is loaded it stays loaded.There is no option like EnableLoadUrlOfOnlySelectedTab.
Though it is can be implemented by application while processing selected tab events. The SelectedIndexChanging event is raised before new tab is selected and provides index of that tab. So, application may process that event and remove current url/src from that tab. WebTab checks/validates src of iframe after tab was selected, and if it is different from ContentUrl property, then url is loaded. Below is example:
<script type="text/javascript">function WebTab1_SelectedIndexChanging(sender, eventArgs){ var index = eventArgs.get_tabIndex(); // check if url of that tab should be reloaded if(index != 0 && index != 1) return; var tab = sender.getTabAt(index); var iframe = tab.get_iframe(); // remove current url/src from iframe. // you can use any "reset" value, though BLOCKED SCRIPT"" is preferrable if(iframe) iframe.src = 'BLOCKED SCRIPT""';}</script><ig:WebTab ID="WebTab1" runat="server" ...> ... <ClientEvents SelectedIndexChanging="WebTab1_SelectedIndexChanging" /> <PostBackOptions EnableLoadOnDemandUrl="True" /></ig:WebTab>
Hi Viktor. What if the tab that needs to be reloaded is a UserControlUrl not a ContentUrl. When using your method above, I'm having trouble trying to find how to reset the UserControlUrl as the tab contains a div not an iframe for user controls.
Thanks!
Hi Hamiora,
The UserControlUrl means name of UserControl which is nothing more than a template which fills child control similar to controls defined in aspx. You may think of it, as if you drop a user control on aspx. It is not possible to reload only that control from client.
WebTab does not support reloading content of a random/specific tab. Async postback can be triggered from client, but server will not update content of a random tab. Server follows exact rules defined by PostBackOptions, but not actions on client.Below are some scenarios when EnableAjax is set and EnableLoadOnDemand is not set:1. If EnableReloadingOnTabClick is set, then if user clicked already selected tab, then that content of selected tab will be updated.2. If EnableReloadingUnselectedTab is set, then content of previously selected tab will be updated. So, if user will select that tab again, then it will have latest server data.3. If new tab is selected, then content of that new selected tab is not updated.
If application needs to update selected tab at the time when it was selected and work only with server properties, then it should use EnableAsyncUpdateAllTabs or EnableLoadOnDemand.Application also may trigger "reload" action from client which will be equivalent to user click on already selected tab. The set_selectedIndex(index, reload) on client supports second "reload" parameter. But UpdatePanel (or url) will be updated only if that index is equal to already selected tab, because of rules on server, which I mentioned. Below is example:
<script type="text/javascript">function reloadTab(){ var tab = $find('<%=WebTab1.ClientID%>'); var index = tab.get_selectedIndex(); tab.set_selectedIndex(index, true);}</script><input type="button" value="ReloadSelectedTab" onclick="reloadTab()" />
The webtab also has few internal methods which do actual reloads. They can not be exposed publically, because they may have effect only in very specific situations. The _doAjax(index) will trigger async postback for a tab which has UpdatePanel. So, if application knows exactly that a specific tab is selected and it has UpdatePanel, then it may use that internal method (no support in case of misbehavior). For example, it may use it within ClientEvents.SelectedIndexChanged or explicitly on external event instead of set_selectedIndex(selectedIndex, reload).Below are 2 examples.
Trigger ajax on external event:
<script type="text/javascript">function reloadTab(){ var tab = $find('<%=WebTab1.ClientID%>'); var index = tab.get_selectedIndex(); if(index == 1 || index == 2) tab._doAjax(index);}</script><input type="button" value="ReloadSelectedTab" onclick="reloadTab()" />
Trigger ajax within selected tab changed.
<script type="text/javascript">function WebTab1_SelectedIndexChanged(sender, eventArgs){ var index = eventArgs.get_tabIndex(); if(index == 0 || index == 1) sender._doAjax(index);}</script><ig:WebTab ID="WebTab1" runat="server" Width="321px" Height="200px"> <Tabs> <ig:ContentTabItem runat="server" Text="Tab 1" UserControlUrl="WebUserControl1.ascx"></ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Tab 2" UserControlUrl="WebUserControl2.ascx"></ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Tab 3"></ig:ContentTabItem> </Tabs> <ClientEvents SelectedIndexChanged="WebTab1_SelectedIndexChanged" /> <PostBackOptions EnableAjax="True" EnableReloadingOnTabClick="True" /></ig:WebTab>
Ok. I just want to reload the entire tab, regardless of the content, without having to click on a previously selected tab twice (It's not very intuitive otherwise).
If EnableReloadingOnTabClick is enabled, any tab, including a UserControl tab can be reloaded via AJAX postback on the client-side by clicking twice on the previously selected tab. Could the action that triggers the postback, be triggered in client-side in the SelectedIndexChanging event too?