In the logic of my Vue component in my VuePress site, can I determine whether it's running in the context of vuepress build generating the static HTML, or in the context of a genuine browser session?
My use case is I am using momentjs to format datetimes relative to the current datetime. eg. To say 'Yesterday' instead of '2020-04-03'.
The issue is the static HTML that VuePress generates at build time contains the phrase relative to the date on which the build was run. I want the static HTML to always contain the absolute, not the relative, datetime.
For human visitors to the site, Vue runs and replaces the pre-rendered date/phrase with the correct freshly calculated phrase/date and they are none the wiser.
For machine visitors that don't run the JavaScript, they see the pre-rendered relative phrase which is only correct on the day it was built.
Basically I want to do something like this:
if (/* in context of vuepress pre-rendering */) {
return 'content for static HTML'; // eg '2020-04-03'
}
// else, In context of visitors browser
return 'my dynamic content that depends on the date at view time'; // eg 'Yesterday'
Thanks in advance.
You can try to separate your code into different life-cycle hooks to achieve that.
Generate the absolute time in the created hook of your Vue component, and then dynamically calculate the relative time in the mounted hook.
created will be called during both ssr and client. But code in mounted will only be executed during client
Related
Unlike onMount there is no beforeMount lifecycle event in SvelteJS. So, how do we fetch data that the page depends on before mounting? onMount fetches produces glitches. One can say that I can wrap dependent DOM inside if conditions. But I don't think it is the right solution. Very like in Sapper there is a preload function that can load page dependent data before mounting. What is the alternative to this (Sapper's preload) behavior in SvelteJS?
You'd create another component that doesn't render the Component until the data is ready.
<script>
import Post from "./Post.svelte";
const url = 'https://jsonplaceholder.typicode.com/posts/1';
const promise = fetch(url).then(response => response.json());
</script>
{#await promise then data}
<Post title={data.title} />
{/await}
REPL
Depending on the scenario you can use a router that has data loading supports, like the sveltekit router.
You can put the fetch code right under <script> tag
A <script> block contains JavaScript that runs when a component instance is created.
There is also context="module" attribute with <script> tag. It
runs once when the module first evaluates, rather than for each component instance
See the official docs
Noob here, to your sub-question: isnt svelte front end only? Meaning no SSR support and thus no option for preloading data with first user request.
Since, you dont have any server that would preload your data and give the user prepacked front-end (svelte pages) with data. Thus, you need sapper to provide a functionality where server can fetch data with first user request, populate front end and send it to user.. This way, user receives svelte pages, populated with data, upon first response from your server.
Since you use only svelte, user needs to contact your server more often.. First, it fetches the front-end, then front-end fetches data from back-end. Furthermore, it aint SEO friendly as robots dont wait for the subsequent server responses. Thus, your pages wont be analyzed properly as robots analyze 'blank'page, no data mounted yet, and move to next, before response can be processed.
Please, correct me If I am wrong ;)
I believe above answer is right:
1. create empty variable in script tag
2. add below onMount call and fetch data from serverto above declared variable
3. check if var is empty and show loading button
4. if var isnt empty, then show user content
6. profit?
P.S: Sorry for any misconceptions or bad English :)
I have a project where I need to be able show a html item on a page depending on what the domain is.
What I want to be able to do is call the component site wide (front end) so that it is basically hooking in on every page load.
Sounds a little complicated but really need it too run
Essentially I have two domains both linking to the same install of joomla.
When a user visits domain X I don't want to see a particular over lay, but when a user visits domain Y then I want the component to kick in, put in the html and also insert an extra parameter into the url.
Just test for the server name against JURI::base(false) and set the new var with JRequest::setVar('newparam','newvalue'); But where do you need this var? it may not be available depending on where you set it: i.e. if you set it in a module it won't be available to the component
Saving the image in a web directory and storing the URL in the database using this approach, I stored the image URL in the database. Based on that image id (I need to pass this image id to the controller from an Ajax call). I need to retrieve the image.
I got the image id using a jQuery template, so I have passed that image id to the controller. What should I write in the controller, filepathresult or fileresult? Or is there another approach?
OK, you're a bit confused.
You have the actual image file, file.jpg and you have the physical path to the file, D:\some\path\to\file.jpg.
You have the URL path to the file and a surrogate identity (your id).
id: 1337 (some random number)
URL: ????
First question:
You say you're storing the URL. Is it really the complete URL? Is it just a partial path to the image? Is the path from the root of the website or the root of the application? Is it just a partial physical path?
Second question:
What are you actually trying to do?
Do you just want to get the full path to the image? Why do you need Ajax to do this, if you already have the id? You might want to rethink how you're storing the images if any performance needs to come out of this.
Once an image gets a new identity, it often makes sense to use that new identity everywhere; you might ought to consider copy/rename the file for the new identity after it's uploaded (and possibly save the old filename for record keeping purposes). If you need to keep the file names (more or less) as-is, however, it'd be better to provide the ability to grab the URLs for a whole set of ids rather than to individually make an Ajax request id-by-id.
If you request a resource (AKA navigate to a URL) that has a physical file, IIS is going to serve it directly (that is, if you ask for www.mysite.com/Images/Image3.jpg IIS is going to serve it directly). I really don't understand exactly what you are doing, but if you mean that you get the associated URL for an image using an Ajax call to an MVC controller with the id of the image, you could do several things.
You could simply return the URL and use JavaScript code to create an image tag with that URL and inserting it in the DOM.
You could return a view like <img src="{yoururl}" /> and insert it in the DOM using JavaScript.
You could store the images on the database directly and use the File method to return the image bits indicating the correct MIME type.
In a SO response to a different question, a user stated that it allowed you to avoid hard-coding route values into a html link tag, but that is not really valid since you have to put in the controller, action, area, etc as strings so you are still hard-coding the route values.
How is this:
#Html.ActionLink(linkText: "MyLink", actionName: "MyAction", controllerName: "MyController", new { id = #myId }, new { area = "SomeArea"})
better than this:
<a href='/SomeArea/MyController/MyAction/myId'>MyLink</a>
Your observation is only true if (a) you're using strictly the default routing format and (b) if your application will always be installed at the root of the site. If you don't do the former (say create a short cut route /help which goes to the Home controller and Help action, and subsequently change it by introducing a Help controller with more actions, then you'll need to update all of your hard-coded anchor tags. A better alternative is using the RouteLink helper with the route name and, optionally, other parameters.
With regard to the latter, I typically use a single server for most of my staging deployments and the application does NOT sit at the site root, but rather in a subdirectory. Production deployment is mixed, but many applications get installed at the site root. Using the helpers allows me to ignore the difference during development as the helper properly constructs the url relative to the current site in all cases. This is so helpful that I even use it for scripts, css files, images, etc. via the UrlHelper to make sure that any paths specified for those do not break between staging and production.
There seems to be little to benefit in using the helper, providing you make one change - add a tilda so that the router automatically resolves the address to the correct place.
<a href='~/SomeArea/MyController/MyAction/myId'>MyLink</a>
Renting houses can be nasty so I need to automate it. Please, have a look at here. If you make a mistake, all of your changes are gone. I tried to insert the values in the url like:
https://www.hoas.fi/web/hak_inet.nsf/WebHakemus?OpenForm&02.07?PersonFirstName=Alex?PersonLastName=Smith
but it does not work. What is the problem?
Firstly, your query string is incorrect. It should be:
https://www.hoas.fi/web/hak_inet.nsf/WebHakemus?OpenForm&02.07&PersonFirstName=Alex&PersonLastName=Smith
Secondly, in order to pre-populate the page with the results of the query string, the developer of the page would have had to added logic to extract the query string values and pre-populate the page with those values. In this case, it does not appear that they have done that.
You could try saving the page locally as HTML. Then you could modify the HTML to include your default values. You would also need to update any relative paths to point to the server as a full URL. Then you could open the page on your machine and hopefully post to the server. This assumes that they are not injecting any session or other temporary information in the page that they validate.