I have created a sample application with login page and home page.
i have loaded the login page as Main Page successfully and i have homePage.html/homePage.js files. What i need to do is, when i click on Login button from loginPage.html file, user should navigate to Home Page. I couldn't see any APIs fro navigate/load to different html files.
i referred some worklight samples it says loading on same HTML using div and pageport commands.
$("#pagePort").load("pages/homePage.html", function(){
alert("Home Page Loaded")
});
Can any one help me to get resolve, how we can load another html on click of login button?
Worklight is a single DOM application, hence the notion of "pages" is an artificial one.
You have 1 singular HTML file and what you need to do is replace content inside it to display different content, or "pages".
There are numerous ways you can accomplish this. None of them relate directly to Worklight, but to the framework you select to work with, be it jQuery, jQuery Mobile, Dojo, Ionic and so on...
The important thing to remember is to never navigate away from the index.html file because you will then "lose" the Worklight context and your application will then fail loading. The reason is because from the index.html file, you load various required Worklight-related files.
In this Worklight 6.2 project I demonstrate, using jQuery Mobile, how to navigate between pages. For your purpose, think of them as a mainpage that is a login page and then some other page that is the home page...
Related:
https://stackoverflow.com/a/25060136/1530814
https://stackoverflow.com/a/22171687/1530814
Related
I am looking at a website template with themewagon. There is a modal feature using magnific-popup that works on the live web version to display a video in a modal.
https://themewagon.github.io/videograph/
However, when I download the template and open the index file from my browser, the video modals do not function properly.
Can anyone explain why this may be the case?
I used the theme online, but when I downloaded it, the functionality was not there.
So I just got into the topic of Vue router today. I know that it helps contents to load faster by preventing the whole page to refresh everytime but to only bring necessary components.
But didn't it just load the whole bundle.js file (by Webpack) upon visiting the home page already? So since we already loaded the whole JS file upon first visit, wouldn't it be unnecessary to call separate JS files when visiting different pages?
This is the lesson I was watching.
The main benefit you're talking about is navigating from one URL to another.
Normally, this would require a full page load, eg
Page1.html 👉 click link 👉 Page2.html
- JS - JS
- CSS - CSS
- Images - Images
but by using a component router, you only need to swap out the parts of the page that have changed without reloading all your layout.
This is really at the core of what is known as a Single-page application where your app is quite literally one HTML page with parts within it that respond to URL changes.
The URL is able to be changed without requiring a full page load by either manipulating the URI fragment (aka hash) or by using the browser's History API.
In Vue Router, this choice is controlled by the mode configuration.
"But didn't it just load the whole bundle.js file"
Not necessarily. See Lazy Loading Routes.
So, I've built an SPA with Vue. We hire a designer to create a landing page. The landing page looks great. It shows some info about the app and there is a "Sign in" button that does nothing at the moment.
The landing page does include CSS and Javascript (jQuery etc) that I don't, and don't want to, use in the Vue app.
So the question is: Is it possible to include the landing page code in my Vue project without loading landing page JS/CSS if user is already signed in?
Plan B for me is to host the landing page on mydomain.com and the app on app.mydomain.com. This will work I guess, I see others do this. But it would be nice to know my possibilities
Did some search and didn't find exact solution to your issue, however it seems that this is doable. I have some concerns regarding the head part of the page, but this is a way to start:
Create new Vue component that will include all the HTML code (body only) that you need + install (with npm) and import all needed js files, including jQuery, in that component.
Make sure, that you configure this component as lazy loaded in vue-router - so all your html and scripts will be separated from the app.
From there Vue should do the job - you will get your page where needed and other routes will be inside the app.
I have created an extension and added to a page when I executed page got a blank page. Then I inspected through view-source of browser the contents are there. but not visible.
The view was visible on Typo3 v7 local, but not on the server.
I'm using the Typo3 v7 and Typo3 v8.
Extension has been installed in both server versions, but not displaying.
I have included the extension into the template.
I have Checked the Debug functionality through the controller
that also didn't display on front-end, But is visible as source code
Should anything to be done more? Any idea?
Thank you
That does not sound like a problem of TYPO3 than a problem with CSS.
If the HTML markup is available at the browser but not visible the browser has decided not to show it. And that probably is CSS. Use the browser debugger (firebug, inspector, ...) to identify which CSS hides the content.
Also Javascript might interact as it could change visibility after page submit. (try to load the page with deactivated javascript)
In the end it could be an additional or missing div tag or css class that is responsible and you could configure TYPO3 to change the HTML markup in the way so that your content is not hidden.
If you have one server where the content is visible and one where it is not shown you may do a diff on a page to find the difference between these servers. The HTML could be the same if CSS and/or Javascript is different.
I would save the same page from both servers localy (with all CSS and JS) and do a tree diff with a tool like kdiff3
Good morning,
I am installing a APP with IBM MobileFirst Platform and seen in the documentation, by making an APP multi page, you should avoid the attributes href and document.location.href of javascript. I have verified that the system used is that of a single page and upload the content in div with jquery load () function.
Is strictly necessary this requirement or I can continue using href and document.location.href? I say this, because in my APP, the header and footer, change in each html page and I do not want to reload the html page with many divs, shown and hidden.
What you recommend to resolve this issue? How I can connect different html pages in MobileFirst, without using href or document.location.href?
Thank you.
Best Regards,
The reason why it is recommended to load the page contents via ajax is because MobileFirst libraries are loaded in the main html file. Loading other html files would require you to include all the MobileFirst libraries "including cordova" in every single html file of your application. Doing that will decrease the performance of your application since you will have to load all the library files for each page. It may also cause some conflicts with the objects loaded into the DOM since they may be loaded already.