Getting blank page while deploying extjs6 application in liferay6? - javascript

While trying to deploy Extjs Applicaiton getting blank portlet in Liferay not sure what is the issue can someone tell where to add js file currently I am adding them in .html file also i tried to add them all in Liferay-Portal.xml. one more thing which all file need to add to these location i am adding App.js, Main.js, ext-all.js
Below are files I have added in liferay-portal-xml.
before this I have also tried to add all files in index.jsp
<?xml version="1.0"?>
<liferay-portlet-app>
<portlet>
<portlet-name>d1523bb0-7f00-0001-4cfb-83e75e3cc848</portlet-name>
<requires-namespaced-parameters>false</requires-namespaced-parameters>
<icon>/img/task_list.png</icon>
<instanceable>false</instanceable>
<header-portlet-css></header-portlet-css>
<footer-portlet-javascript>/examplecalculator/ext-all-debug.js</footer-portlet-javascript>
<footer-portlet-javascript>/examplecalculator/app.js</footer-portlet-javascript>
<footer-portlet-javascript>/examplecalculator/theme-crisp-debug.js</footer-portlet-javascript>
<footer-portlet-javascript>/examplecalculator/app/view/main/Main.js</footer-portlet-javascript>
<footer-portlet-javascript>/examplecalculator/app/view/main/MainModel.js</footer-portlet-javascript>
<footer-portlet-javascript>/examplecalculator/app/view/main/MainController.js</footer-portlet-javascript>
<user-principal-strategy>screenName</user-principal-strategy>
<private-request-attributes>false</private-request-attributes>
<active>true</active>
</portlet>
</liferay-portlet-app>

According to the documentation for <footer-portlet-javascript> (emphasis mine):
Set the path of JavaScript that will be referenced in the page's footer relative to the portlet's context path.
e.g. your examplecalculator/ in the declaration doesn't belong there.

Related

How to add a page route with html extension on nextjs

I need to convert a non-nextjs page to nextjs. In order to not lose my SEO ranking, I have to create the route with html extension. To make the picture look better, I am adding the folder structure down below.
Unfortunately, this route ending up as 404 on the browser.
What is the problem? Am I allowed to use Next.js routes like that with html extension?
You can do this via the pageExtensions option in nextJS -
I deployed a vercel app to show how this is working
https://html-ext.vercel.app/search-results.html
Steps
Add the pageExtensions to next.config.js files
i.e
pageExtensions: ['html', 'jsx', 'js', 'tsx', 'ts'],
Rename the file under pages directory to .html.js - search-results.html.js in this case.
This naming convention search-result.html is not allowed for public sub-directories .
There are some ways of showing html file in next but I'm not sure they will workcheck this
But you can easily copy everything inside your <body> tag inside your Next js project and it will work properly . How ever you have to manually add your <meta> and other head tags inside Next js built in <Head/> component .

JavaScript path doesn't load on Live Server extension (VS Code)

HTML and CSS files are working perfectly on my live server. But every time I lead to a .js script it will not be shown on my live server. If I try to load the .js file directly through the URL it shows "Cannot GET /line.js". I already tried out everything I've found on the internet but it's still not working. Here are the points I checked/did:
Installed Code Runner
Installed Node.js = node.js system path done
Settings = Live Server Config = specified browser
"liveServer.settings.CustomBrowser": "chrome" on JSON settings
.js file is in a separate folder and accessed via <script src="line.js"></script> on index.html
Chrome is set as default browser on my system
Thanks for your inputs.
If the js file is in a separate folder, you need to provide the exact route to the folder in the script tag, since in the current form it is trying to find the js file in the root directory. The script tag should look like this:
<script src="FOLDER_NAME/line.js"></script>
It's possible that your javascript file is being loaded before the HTML page is rendered. You can try adding "defer" to your script tag like this:
<script src="demo_defer.js" defer></script>

Why isn't my stylesheet page working when using handlebars(javascript)?

When working on a handlebars demo, I am noticing that the stylesheet does not show up when viewing the page. I have provided links to the code and the live page below. Does anyone know why the stylesheet isn't working?
The code is here:
https://github.com/sutri001/DA670/tree/master/week7_handlebars
The live page is here:
http://67.205.184.187:1000
Your rendered page does have the link tag that references the stylesheet you're looking for. What's happening is your server is throwing a 404 when a request is made for the stylesheet.
Looking at the code for your express server, I see you're telling express to serve files staticly from the public directory (good)... but you don't have a public directory, and even more your css directory is located outside of such a place.
My advice is to move your css directory into a new public directory (so you'll have public/css/style.css). That should resolve your issue.
Also, remember that it's the browser that's handling your link tags, not the server! That means browsers are currently trying to go to http://yoursite/../../css/style.css. Thankfully your browser understands how to handle this, but this is definitely not what you want.
Your link tag's href attribute should be set to /css/style.css because, from the browser's perspective, that's where the stylesheet is located.

Load a directory in a js with flask

I would like to declare in a script, a directory.
$images_dir = '{{url_for('.../pictures')}}';
My flask application directory looks like:
Root
-wep.py
-templates
-gallery.html
-static
-pictures
The picture are located inside the pictures folder, and the html page that contains the script is gallery.html which located in the templates folder.
The purpose of that script is to list all the images that are located in the pictures folder and present them as a gallery view when the gallery.html page is loaded.
The script works fine if I run it in a normal apache webserver though.
When I run the web.py, the debuger gives me the error:
BuildError: ('../pictures', {}, None)
So I think the problem is to declare the directory in flask.
UPDATE:
Im using this guy's script : http://davidwalsh.name/generate-photo-gallery
As you can see in the source code:
/** settings **/
$images_dir = 'preload-images/';
$thumbs_dir = 'preload-images-thumbs/';
Im trying to adjust those line to work with flask.
I think you're misunderstanding the purpose of url_for. url_for is for generating a link to one of your application's HTTP endpoints/view functions. You don't need any flask-specific method to get a list of files. You might find glob or os.listdir() helpful for this purpose. Then you can pass a list of the relevant paths to your template for rendering.

Why my site isn't fully functioning on public domain (in the world wide web)?

I made a simple website. The site is fully functionable in my localhost (my computer). Everything working fine here.
But problem arises when I upload the files into the web server in order for running that in public domain. There, no content is showing except the layout. No link or tab is working, no paragraph inside the body is displaying. You may have a look here.
For what reason?
I uploaded all the files (with source code) associated my website except the images and videos (since there are a lots of images and I will upload it a bit later).
[NOTE: I have xampp local server installed in my computer. All the
sourse codes files are stored inside the htdocs folder. Inside the
htdocs folder I have a folder named jquery(which was installed with
the package). I saved my .JS file inside the JQuery folder (since I
used jquery code too). So when I upload file into the server do I need
to upload the whole htdocs folder? Or how about the JQuery folder
(which contains the JQuery source code)? Do I also need to upload it?
My paths set are the following:
C:\xampp\htdocs\jquery [contains the whole project's source file]
C:\xampp\htdocs\jquery\js [Contains only JavaScript&JQuery file]
If you inspect your page and look where you expect the content to be, you'll find <div id="home">. Looking at the CSS for this, it shows line 258 of your css file has this:
#all_contents >div {
display:none;
}
This is causing all of your contents to not display. Removing this will fix the problem.
Also, if you look on the browser's console when your page loads, you'll notice a lot of 404s trying to load various scripts, stylesheets, and images. That's potentially contributing to the problem. I'd focus on fixing those first, to make sure everything is loading properly.
I tried debugging the HTML on your website. I found the following code in design.css at line number 258
#all_contents >div {
display:none;
}
Once you remove this(display:none), all the content is available on the website link that you shared.
Also, I am not sure why this is working on your local. Are you sure that you have uploaded the same version which is running in your local?
You can debug your webpage by pressing F12 and then selecting the problematic area. On the right hand side, you can see the css rules associated with the selected element.
For getting the specific content in a page and not all, create a new file by the name who_im.html and put your content over there and then You should do something like
About Me
Like this you will have to make other pages as well and add the hyper links to the menu in every page.

Categories