I have a web component that renders properly when I load the page the first time. However, when I try to render it the second time, it doesn't load at all. What are some good ways to debug lit web components to see why its not loading properly.
What I see in the dom is the following:
<element><div></div></element>
It's missing all the html inside the div.
Related
I am moving an existing html portfolio hosted in githubpages to Blazor, but when the
index.html loads it doesn't load the script libraries on time, but it loads them before the content is shown.
Do you know if there is Scripts section as in ASP.NET MVC, or do you know how I can tell to Blazor
to loads the content synchonously?
Example: The working website is here http://tanyo.takerman.net. The
non working is here http://tanyo-blazor.takerman.net The second one
don't loads the scripts on time, but too late after the html is
loaded.
Disclaimer: You are using a LOT of JS. Blazor keeps an internal render tree - a bit like a shadow dom, but not exactly that. If your JS changes the dom inside the <app> tag, you can expect errors as Blazor won't know about those changes.
To delay Blazor startup (I think that is what you are trying to do) until after your scripts have loaded, you can turn off autostart.
<script autostart="false" src="_framework/blazor.webassembly.js"></script>
And then in some other script that runs at the right time (I don't know how you are going to know what is the right time), you can call window.Blazor.start(); to start the Blazor app.
We had a responsive html that was made responsive using bootstrap. Using Design manager i created a master page from it. Every thing works fine except 2 things.
Global Navigation doesn't match the UI, So i have applied all bootstrap classes using jQuery. Menu seems good later but at time of loading it looks bad.
When i go to add an app page, It shows only 4 apps. Search over there is not working as well as "Apps you can add" option is not visible on the page.
Can you provide exact steps that are to be followed in order to get it working fine?
For the part of question related to global navigation what you can do it in two ways.
Hide the global navigation using css first. Apply the bootstrap classes using jQuery and then show it on page to avoid loading effect.
Try to pull global navigation data using REST and generate html and append it on page using jQuery. Try this link : https://sharepoint.stackexchange.com/questions/116393/get-links-from-sharepoint-2013-global-navigation-using-rest
After many hours of research, I've seen multiple ways to do similar things. But I don't want to pigeonhole myself into approaching this in the wrong way, so I would appreciate any advice on how to achieve the following.
When clicking on my extension icon, I want to load a toolbar onto the current page. This toolbar has a number of links and forms that can:
Interact with the original page (DOM Listeners, changing the DOM)
Create additional extension popups on the original page
Make requests to external resources
From a JS perspective, I think it would be easiest to inject all my own HTML directly on the page and handle functionality via one content script. I abandoned that approach after realizing I'd never be able to account for all CSS conflicts in my popups.
So instead, this is what I have so far. When clicking on my Extension icon, I inject a div into the current page and load up an iframe sourced to a popup.html via chrome.extension.getURL('popup1.html'). This is where I get stuck. By loading my content into an iframe, I have isolated any CSS issues. But say I have text selected on the parent page and I click a button in my popup1.html. Is there then a way to pass the selected text back to the popup1.html or to show that selected text in a new popup2.html?
I hope that once I get the workflow down on how to do this kind of interaction I can move on with development. Thanks for your help!
I am embedding an org.eclipse.swt.browser.Browser into a view in a modified eclipse (Indigo), for use as a preview pane of a form editor component. On a form model change or an element selection change the code renders the form via vaadin 6 and displays it in the browser component.
Now, this works like a charm in most cases. But for some highly complex forms the HTML+JS generated by vaadin generates a lot of stress on the browser, rendering it unresponsive for up to a few seconds. That in itself wouldn't be tragic (1), but as long as the SWT Browser component is busy rendering that stuff, the entire eclipse UI thread is blocked.
A simple way to reproduce this is to create an HTML page that blocks inside a javascript function (see https://gist.github.com/creinig/5150747 for an example) and display it in the SWT browser. As long as that JS function is running, the entire SWT application is not responding to anything.
The only info I've found on this problem are
one SO question (without resolution) and
one question on EclipseZone (unanswered).
Not that helpful :(
The API docs of the Browser component don't seem to offer any insight on whether its rendering is triggered periodically by the UI thread or if itself triggers something that blocks the UI.
Is there a way to decouple the Browser component's rendering from the SWT UI thread? Or anything else that could be done to protect the eclipse UI from hanging stuff in the browser?
(1): We need forms of this complexity level, we're already optimizing the rendering performance and a switch to vaadin7 will most likely also speed things up. But the problem will certainly persist, if only in reduced severity.
Not a real solution, but a workaround that Works For Me (TM):
As described here it is really easy to launch the system's default browser from SWT. So I'm going to add an option to the view containing the browser control that will "detach" the view by disabling the browser control and opening the system browser instead.
In case the linked page drops off the net, here's the gist:
org.eclipse.swt.program.Program.launch("http://my.funny.url/");
launches the application registered for HTTP URLs. In other words: the system default browser.
Happiness ensues :)
I have a tab bar application and when it starts up there are web views on different tab bars. The app needs speed so when someone opens and it loads onto the first tab bar I need the other web views in the background to load when the application starts. One of my UIWebView's is named twitter and it is on the 'SecondViewController'. I assume the code is in the appDelegate, help is much appreciated in a basic form for my knowledge isn't great.
UIWebViews can't be rendered offscreen. The best you can do is cache an image of the content the last time it was accessed and present that, then load the web view and cross fade between the two.