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.
Related
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.
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
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
What I want to do is displaying a website (a Portal one) within Worklight. So I'm hardcoding the URL in the mainFile tag:
<mainFile>http://example.com/page.html</mainFile>
Now I need to download the resources from this page (JS and CSS files), store them locally and replace the absolute URLs of the page with WorkLight URLs in order to speed up the page loading.
How could I do this?
You cannot change the mainFile (the "index.html") value during runtime, as it is set in application-descriptor.xml which is a server-side file that the build process uses.
I would also question the flow. If you want to speed up application loading, hinting that by using Portal the loading is slow, why use Portal to begin with? Place your resources locally in the application.
I am developing the WP HTML5 app. I've set of HTMLs, js and css created for it.
The IsScriptEnabled flag is set to true, before I Navigate to the HTML page added as project asset.
The js is not getting executed from the index.html page, I am navigating to. When trued, the same js execution is happening properly on iOS and Android.
What can be the possible reasons for the same.
Anything that has to be done (apart from enabling script) before navigating to the page? Please help!
The IsScriptEnabled flag does not enable/disable JS, but it enables JS to call out to the app and vice versa.
So, I assume you have some JS in the OnLoad of the page you are navigating to. If you replace your code with a simple document.writeLine("test"), does that work? If it does work I'd assume that IE's JS engine is (once again) not compliant.
You could also listen to window.onError