Angular Universal not rendering async content (like api calls) before page render. only leaves empty places like ""
already tried to copy all universal-starter configuration to an existing project but still same result.
i expect the page to render only after all http calls on the onInit function has ended , this is very important for seo matters
Found the problem , it was one of the 3rd party lib that cause this problem (Cookies Service)
Related
I'm developping a jqm application with spring mobile in the back-end.
Whenever I hit the browser refresh button on my mobile phone the page is completely devastated afterwards. Browsers back-button works properly.
The data are still available due prg pattern (flashAttributes in Spring) after refresh. Only the view is malformed.
Any ideas how to solve this problem?
From jQuery Mobile docs :
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pageinit event (details below) to run necessary code when a specific page is created (which can be determined by its id attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax
So what happens is - in jQuery Mobile, the scripts and styles defined in the head are loaded only once. So, in normal conditions, it works fine, as all the pages will use the scripts loaded from the first page.
But. When you refresh a page in-between, it triggers a page-reload instead of the ajax navigation model thatjqm uses. So all the scripts and styles loaded from the first page will not be included from here on out.
What you need to do is "reference the same set of stylesheets and scripts in the head of every page", so that even if you hit refresh in the middle, the scripts and styles that had been loaded from the head of the first page are loaded again.
I recommend you read the docs from the above link fully to gain a better understanding.
Reading the Mozilla guide on prefetching, I'm interested in implementing it.
My site is a single page app, so it's pointless to actually pre-fetch an entire page (incl. headers/footers/etc) when all that happens when an anchor is clicked is an ajax call is made to the backend API. Everything else is handled on the front-end.
So would it be possible to specify this API route as the prefetched link, and will Firefox use it if the call to use it is made via an ajax call?
In other words:
Two pages: / and /foobar, going to either through addr. bar loads all content.
Going to /foobar from / causes an ajax call to be made to /api/foobar, not /foobar
Can /api/foobar be prefetched, and if so, will it be utilised by the underlying js?
I have a jqm multipage document (index.html) that includes several pages and other assets (js, css, etc.). I have my server configured to use etags for the html, css, and js files. The request/response headers are set appropriately and it works as expected.
During use of my application there are no requests (with the exception of signing off) to index.html, so there is never really a chance for the browser to see if there is a new file out there, let alone all of it's css and js files (unless the user signs off, requests the page again or does a refresh). If I deploy new software, how might I notify the user that new sw is available and/or somehow force a refresh of the index.html file?
My initial thoughts were to store the version # on the client and periodically make ajax requests to the server to check the version #. If new sw is available, display a link to notify the user informing them of the new sw and to click on the link to get it (reload index.html).
I'm curious how others have done this? Thoughts? Recommendations?
If you link to multipage document, you must use a data-ajax="false"
attribute on the link to cause a full page refresh due to the
limitation above where we only load the first page node in an Ajax
request due to potential hash collisions. There is currently a subpage
plugin that makes it possible to load in multi-page documents.
Reference: http://jquerymobile.com/demos/1.1.0/docs/pages/page-navmodel.html
Please also look at this:
Cases when Ajax navigation will not be used
Under certain conditions,
normal http requests will be used instead of Ajax requests. One case
where this is true is when linking to pages on external websites. You
can also specify that a normal http request be made through the
following link attributes:
rel=external
target (with any value, such as "_blank")
If the pages is loaded as http request instead of Ajax, the problem would be solved.
In the past I have developed large extjs single page applications. Many users get frustrated for not being able to use the Back or Fwd buttons or reload the page.I would also like to warn the user if they navigate away from a page without completing a work flow, and enable users to directly access particular views.
For the next application, I am thinking of using the Codeigniter php MVC framework. It is possible to something similar to this example. I am stucked thinking about the navigation. If I load the ExtJs for each view, that is a significant slowdown.
How best to approach this?
Have a look at the Ext.History class (Ext.util.History on Ext4). With it you can register listeners for changes to the hash:
Ext.History.on('change', function( token ) {
console.log('token changed to: ', token);
});
The Ext.History singleton includes forward() and back() methods for triggering navigation from within the client-side code.
By having only the hash part of the URL change the browser stays on the same page, thus eliminating the need to reload the Ext library.
How this would integrate with your PHP framework I cannot say. I am not familiar with CodeIgniter and your example link goes to a dead page.
Also, do note a caveat with History in that under Ext3 at least it may give you issues with newer browsers. If this is the case an alternative is to code your own History-like solution using the 'hashchange' browser event as illustrated in this answer.
I have a page that gathers environment status from a couple of IBM WebSphere servers using iframes similar to this:
<iframe src="http://server:9060/ibm/console/status?text=true&type=server&node=NODE&name=ServerName_server_NODE"></iframe>
and it happily prints out "Started" or "Unavailable" etc. But if I load the same url in a normal browser sometimes it works, sometimes it does not? Some of them are showing a login page, while others are simply return HTTP code 500.
So whats the difference between loading the page through an iframe vs through a browser?
I can tell you that the iframe solution works no matter which machine I am doing it on, so I do not belive it has anything to do with the user whos opening the page. And before you ask, why not keep the solution that works, well its because it takes a long time to open the page with the iframes vs a page where everything is requested through ajax.
Update: Using jQuery to perform the ajax call returns "error" and "undefined" for the servers that I can't see in a normal browser.
One difference is an iframe has to render the view while XHR would not.
An iframe is essentially the same as opening with the browser. In both cases the browsers credentials are used, so there will be no difference between the two.
Secondly, loading something in an iframe should take the same amount of time as requesting it through XHR, since in both cases the browser makes an HTTP request and waits for the response. Although I should add that an iframe will take time to render the content onto the page. However if you plan on displaying it with ajax anyways, an iframe/xhr solution will be more or less the same.
In case of ajax request same origin policy (which restricts cross domain call) comes into picture. So you can't make cross domain call using xhr. Alternative for same is embed flex swf file in your page as activex control and make flex call through javascript and then flex is responsible to make cross domain call (flex can if targeted domain allows cross domain using crossdomain.xml) and renders result using javascript again.