I am using angular 6 material tab component, and I found the tab contents are loaded laziy.
Are there any way I can make it eager load instead of lazy load?
The reason is I need to use third party plugin, but if for lazy load, the content is null, and actual dimension is not accurately detected. So the third party can not be displayed accurately.
I remember this is configurable, but can not find way to do it.
some thing like:
<mat-tab-group [lazy]=false >
<mat-tab label="xxx">
content
</mat-tab>
As stated on the documentation:
By default, the tab contents are eagerly loaded. Eagerly loaded tabs will initalize the child components but not inject them into the DOM until the tab is activated.
So there is no action needed to eager load the contents.
In case this is still not enough for your use case, you may want to use a resolver or one of the available lifecycle hooks.
Related
Is there a way to preserve the contents of a tabbed component when toggling between them? I found #PreserveOnRefresh but that only seems to work when refreshing the browser.
Assuming you mean navigating between Routes/views rendered as tabs, I think what you're looking for is the #SpringComponent and #UIScope annotations. Add these to the relevant classes to preserve any input fields and outputs when toggling. Note that you'll still need #PreserveOnRefresh if you want to retain those fields when refreshing the page itself.
See: Vaadin Component as Spring bean for a breakdown of the specific functions the two annotations serve.
I'm developing a web application that is making use of tabs. I've run one issue that seems small, but I haven't been able to locate a solution and I'm worried it is indicative of larger problems with my code.
My application has one main page that includes a tab container with several content panes then inserted as children. I figured that having each content pane load an external HTML file and loading it that way was a good solution - it seemed to provide modular design and allow for easy changing of the contents of an individual tab. The issue I am running into now is that while everything loads correctly, I'm unable to provide anchor links in inside a tab or between tabs. Here is some sample code:
var tabs = new TabContainer({
style: "height: 100%; width: 100%;"
}, "tab-container");
tabs.startup();
var metadata = new ContentPane({
title: "Metadata",
id: "Metadata"
});
/* repeat for the non-metadata content panes */
request.get("/js/viewer/templates/splash.html").then(function (results) {
splash.set("content", results);
});
/* repeat for each pane */
For my metadata page I want it to contain information about the datasets I am providing to users. Ideally, it would have a table of contents with anchor links to the proper entries. However, when I implement an anchor link, like so:
Click me to jump down the page!
<!-- some content here -->
<div id="test">We made it!</div>
The link is clickable and it does in fact bring you to the proper location, but it seems to invariably load this in a new frame that requires a user to reload the page if they wish to do anything else. I've tried playing with tag properties but it's been to no avail. I'm also hoping to be able to link between tabs (say, if a user is querying on one of the query pages I have presented them and then wants to know where a dataset came from or other information).
Here is a simple imgur album showing what happens: http://imgur.com/a/JCnlH
After clicking the link in the first image, you're sent down the page. However, the tab bar and the navigation bar of the page disappear completely, even when you scroll back up. I don't know why this is.
So, this has been a long question, but here is the core of it:
What am I doing wrong with anchor links?
To answer your first question:
You should put all JavaScript inside your main page, not inside partials. This is not considered a best practice with JavaScript because it means you will have to eval() the content and usually when you start doing that when you don't need to, then you're doing something wrong.
In this case you can easily add all JavaScript code to the main page. If you need to wait for a specific tab to be opened or loaded, you can use the onShow or onLoad events on the dijit/layout/ContentPane widgets.
Also, when you're using ContentPane you should use the proper setters for adding content/HTML to it.
Rather than doing:
request.get("/js/viewer/templates/splash.html").then(function (results) {
dojo.byId("Splash").innerHTML = results;
});
You should be doing:
request.get("/js/viewer/templates/splash.html").then(function (results) {
splash.set("content", results);
});
Or if you don't have a reference anymore to the splash variable, you should be using registry.byId("splash").set("content", results).
About the hyperlinks, I have no idea. I'm not getting the same behavior, so could you explain a bit further on that?
Here's a (as far as I can see) working example: http://jsfiddle.net/n4515tsz/
In my case, this behavior seems to be caused by interaction of the overflow: hidden CSS property of my website's body interacting with the height: 100% property of my tab container. I didn't realize that the overflow: hidden property was set because it was part of a framework I was using. By changing the overflow property I have been able to achieve the desired behavior.
I have some experience with GWT . In GWT , widget.setVisible() method will add style="display:none" style to widget. But component of vaadin wouldn't . I checked with firebug , I can't see my component while set component's visible to false. Why ?
I think that should be also have hidden style instead of not containing. I reallize that vaadin's codes were server side. But sometimes , if I would like to just hidden (set style display to none) , has there anyway to accomplish this instead of using css ?
I don't understand concept of what different between without adding component and setVisible(false) ?
As you already noticed, an invisible component is not transferred from server to browser, and from browser's point of view the component doesn't exist. This approach has to benefits:
Less data to transfer from server to client
Security: User cannot inspect invisible components' generated HTML with tools like Firebug because those doesn't exist on the browser.
So basically from browser's point of view it's the same thing that you don't add it to the UI at all. But usually it's just easier to toggle component's visibility instead of adding and removing it from its parent.
If you want to hide components with CSS, you can do it by defining your own theme and adding a style for that there. Then just apply the style for the component you want to hide by using the addStyleName method.
SETVISIBLE Sets the visibility of the component.
Visible components are drawn in the user interface, while invisible ones are not. The effect is not merely a cosmetic CSS change - no information about an invisible component will be sent to the client. The effect is thus the same as removing the component from its parent.
So as the documentation says invisible components are not not visible.
My initial page has an empty div. An ajax transaction fills it with suitable h3/div content. If I call .accordion() before there's any content, it has no effect. If I call it after the first content is loaded, the first content looks good. Calling it a second time, however, does not work. Do I really need to destroy and redo?
At the moment you have to destroy and re-create the whole thing using the official stable release. There is already a feature request for it, scheduled for 1.next: http://bugs.jqueryui.com/ticket/4672
If you have a read above, mrfr0g says he built a custom accordion based on jQuery UI 1.8.2, give that a try.
give the inner DIV of each tab an id
and use document.getElementById("content1").innerHTML = "HelloEveyOne345443333334422" to dynamically change the content of each tab
I'm using the jQuery tabs library to create a set of remote (i.e., ajax loaded) tabs.
However, to avoid the initial page load being empty until the ajax request finishes, I'd like to include the content for the initial tab with the initial page download.
I've got this generally working by providing a div in the initial page load that matches the title of the tab, but even though this content appears immediately, as soon as I initialize the tabs it does the ajax request IN ADDITION which is both wasteful and causes a flicker. My basic question is how can I get jQuery tabs to NOT do an ajax request for the initially selected tab, and get this content as part of the initial page load, while still loading the other tabs dynamically.
The complication is that I can't hard code the ids/hrefs for which tab is the "initial" one since the initial tab will change based on available content.
I'm sure there is some kind of hacky way to do this with javascript rewriting the URLs of tabs dynamically before I initialize the tabs but I'm looking for a cleaner solution.
Any ideas?
Are you using a specific tab control to do this? It's pretty dependent on how your tabs are implemented...
If you want the data to be included without a delayed load, you will have to include it server side.
Give me some more details and I'll see what I can do!
The best way to do it is using server side implementation to add the starting text. In the JQuery documentation the default text it is not loaded through AJAX.
I'm not sure exactly what you are doing but if that is not your case, then a simple boolean "hack" could be used like this:
var initial=true;
Then, in your tabs code:
$('.selector').tabs({
select: function(event, ui) { if(initial) { initial=false; return false; }
});
This will prevent to execute the ajax call the very first time.
There's an option called "spinner" which holds the text, gif-animation or whatever to be displayed.
$( ".selector" ).tabs( { spinner: 'Retrieving data...' } );