can't seem to load CSS and JS to JSF files - javascript

I'm trying to import a CSS file and a JavaScript file into a JSF file but it doesn't seem to work:
I created the following folders in WebContent and put the files there.
WebContent > resources > css > DBankWebsite30.css And
WebContent > resources > js > mainScript18.js
When I look in the source code of the browser in my web page, the files aren't loaded
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<h:outputStylesheet name="css/DBankWebsite30.css"/>
<h:outputScript name="js/mainScript18.js"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255"/>
<title>DBank - The best bank</title>
</h:head>
<style>
#content>p
{
font-size:20px;
font-style:italic;
}
</style>
<h:body onload="javascript:setInterval(clock,1000);javascript:buttonClicked();">
<div id="main">
<div id="upper">
<p id="welcomeMessage">Hello guest.</p>
<div id="login">
Login/Logout
</div>
</div>
<div id="left">
<div id="hour"></div>
<ul>
<li id="MainPage" class="mainButtons">- Home - <hr/></li>
<li id="Personal" class="mainButtons">- Personal - <hr/></li>
<li id="AboutUs" class="mainButtons">- About us -<hr/></li>
<li id="ContactUs" class="mainButtons">- Contact us -<hr/></li>
</ul>
</div>
<div id="content">
<p><h:form> Bank content <h:outputLabel value="bla" /></h:form> </p>
</div>
<div id="bottom">
<p id="rights">DBank © All rights reserved. </p>
</div>
</div>
</h:body>
</html>

Is the web page you are displaying inside the resources folder or is it in the WebContent folder. If in webcontent, you need to link them
<h:outputStylesheet name="resources/css/DBankWebsite30.css"/>
<h:outputScript name="resources/js/mainScript18.js"/>

Related

How do I get Flask to serve my .js files?

I am doing some coding with Python, Flask and .js files all with some HTML and CSS linked in as well. My problem is that I have a dropdown menu and a button that can hide and unhide password text but when running in Flask, this side of things is not working and I believe that it has something to do with the javascript. This function works perfectly when I am running the HTML file locally and not through flask, but I am completely lost as to where to go from here?
In terms of what I have done already is to ensure that my file structure is correct and that these .js files are within the static folder (where CSS stylesheets are being pulled from perfectly fine). My script tags where I link the .js files are all at the end of the body tag and do not sit within the head tag.
<script src="../static/js/vendor/jquery.js"></script>
<script src="../static/js/app.js"></script>
<script src="../static/js/vendor/foundation.js"></script>
<script src="../static/js/vendor/what-input.js"></script>
This is the app file that I am using for Flask and the simple code used to run this if it helps?
from flask import Flask
from flask import render_template
app = Flask(__name__)
#app.route("/")
def render_static():
return render_template('splash_page.html')
#app.route("/account")
def account_page():
return render_template('account.html')
if __name__ == '__main__':
app.run(debug = True)
Below you will find my HTML code used as a template in Flask, this is it before the changes suggested below -
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link href="../static/css/app.css" rel="stylesheet" type="text/css">
<link href="../static/css/foundation.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Premier League Pro</li>
<li>
Account
<ul class="menu vertical">
<li>My Account</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</li>
<li>Predictor</li>
<li>Odds Calculator</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
<div class="row">
<div class="columns large-3"></div>
<div class="columns large-6">
<br>
<br>
<form class="show-password">
<label for="username">Your login</label>
<input type="text" value="" placeholder="Enter Username" id="username">
<div class="password-wrapper">
<label for="password">Your password</label>
<input type="password" value="" placeholder="Enter Password" id="password" class="password">
<button class="unmask" type="button" title="Mask/Unmask password to check content">Unmask</button>
</div>
</form>
</div>
<a class="button small" href="#">Sign In</a>
<div class="columns large-3"></div>
</div>
<script src="../static/js/app.js"></script>
<script src="../static/js/vendor/foundation.js"></script>
<script src="../static/js/vendor/what-input.js"></script>
<script src="../static/js/vendor/jquery.js"></script>
</body>
</html>
If it helps to mention I am using Foundation as a CSS to help edit and make my webpages look nice.
When using the methods suggested below in terms of changing the script tags I get an error in the browser as follows -
jinja2.exceptions.TemplateSyntaxError: expected token ',', got 'static'
you should link your js files using this:
<script src="{{ url_for('static', filename='js/vendor/jquery.js') }}"></script>
do this for all js files.
Hope that helps. If you still have any problem, please let me know.
for further investigation enable flask debug mode
To enable debug mode you can export the FLASK_DEBUG environment variable before running the server:
$ export FLASK_DEBUG=1
$ flask run
this will show you more detailed errors and stack traces in the browser.
Jinja2 is a modern and designer-friendly templating language for Python. https://jinja2docs.readthedocs.io/en/stable/
https://jinja.palletsprojects.com/en/2.11.x/templates/
Try surrounding the script tag in your template with these two Jinja2 syntactic structures below:
{% block javascript %}
<script src="{{ url_for('static', filename='js/vendor/jquery.js') }}"></script>
{% endblock %}
I vaguely recall Flask serving Javascript without this block once, but that was with Python 2.7. Maybe it's a bug.
It's probably a security feature to prevent XSS.

My webpage is not displaying the text from a different html page. (javascript/jquery/ajax)

In this project, I am creating a contact.js file for the contact.html file that will pull the data from the listings.html file and append its entire contents to the aboutUs div in the contact.html page. I wrote a function to make the contents from the listings.html file appear in the contact.html file, but when I opened up my webpage, the contents were still not displayed. What am I doing wrong here.
I am using a contact.html file, a contact,js file, and a listings.html file (and a jquery file).
My contact.html file is this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Real Estate Sold</title>
<link rel="stylesheet" type="text/css" href="listing.css" />
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="contact.js"></script>
</head>
<body>
<nav class="main-navigation" role="navigation">
<div>
<ul id="menu-main-menu" class="nav-menu">
<li>Home</li>
<li>Regional Info</li>
<li>Current Listings</li>
<li>Sold</li>
<li>About Us</li>
</ul></div>
</nav>
<div id="aboutUs"></div>
</body>
</html>
My contact.html file is this:
$("document").ready(function() {
getData();
});
function getData() {
$("#aboutUs").load("listings.html");
}
My listings.html file is this:
<h2>About Us</h2>
<p>Wright Realty is a family owned real estate brokerage specializing in custom homes since 1852.
We appreciate that our customers demand quality that endures for generations, so we only
list with homeowners who have maticulously maintained their unique and timeless homes.</p>
<h3>Our Realtors:</h3>
<ul></ul>
Seems like you are loading the file using file:// which is not allowed. You have to use http:// instead.
You can use http-server to quickly start a server:
npm install http-server -g
To use it:
cd *your folder*
http-server

Displaying an imbedded pdf file

I've been struggling to find a workable way to imbed .pdf files in web pages that are broadly accessible, including to IE8 users. I don't think pdf.js is going to work because I want to embed the files, not load them as new pages.PDFObject seems like the best choice. But when I use their code, no matter what browser I use, I get only about a quarter of the page length displaying, as shown in the accompanying image. Everything below that first line of text is simply the white of my website background. I have tried both following the PDFObject instructions and using their code generator. No luck either way. Here's the code:
<!-- insert in the document body -->
<object data='http://www.example.com/TestDoc.pdf#'
type='application/pdf'
width='100%'
height='100%'>
<p>It appears your Web browser is not configured to display PDF files.
No worries, just <a href='http://www.chrisrichard.org/TestDoc.pdf'>click here to download the PDF file.</a></p>
</object>
And here's the javascript version:
<!-- insert in the document head -->
<script type='text/javascript'>
function embedPDF(){
var myPDF = new PDFObject({
url: 'http://www.example.com/TestDoc.pdf'
}).embed();
}
window.onload = embedPDF; //Feel free to replace window.onload if needed.
</script>
This is all directly from the PDFObject coder. There's a tutorial on the website, and I've followed it meticulously so far as I can tell, but no luck.
So I'm stumped, and would appreciate any suggestions. Frankly, I wish I didn't have to accomodate IE8 at all, and I wish I could make pdf.js work for what I want it to do, but neither seems to be a viable option. Again, thanks in advance for any ideas.
Note: Please note corrected code, which gives the entirety of what PDFObject generates.
Note 2: This is the entirety of the kind of page I would be seeking to insert the viewer into. I have skipped the javascript version, which would have me insert the code in the header and which would fill the entire page with the pdf and viewer. It's important that the .pdf be set within my page.
I would almost certainly be getting rid of the swfobject references, since that isn't working with mobile devices, etc.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>example.com - </title>
<link href="oneColLiqCtrHdr.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#MenuHolder {
position:absolute;
left:692px;
top:50px;
width:228px;
height:23px;
z-index:1;
}
-->
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<body class="oneColLiqCtrHdr">
<div id="container">
<div id="header">
<h1><img src="images/BodyLogo.jpg" width="665" height="57" alt="Logo" /></h1>
<link type="text/css" rel="stylesheet" href="/floatbox/floatbox.css" />
<script type="text/javascript" src="/floatbox/floatbox.js"></script>
<script type="text/javascript" src="/floatbox/options.js"></script>
<link rel="stylesheet" href="/Menu2Assets/mbcsmb4pc8.css" type="text/css" />
<div id="mb4pc8ebul_wrapper" style="max-width: 345px;">
<ul id="mb4pc8ebul_table" class="mb4pc8ebul_menulist css_menu">
<li><div class="arrow buttonbg"><a>Examples</a></div>
<ul>
<li>Example1</li>
<li>Example2</li>
<li>Example3</li>
<li>Example4</li>
</ul></li>
<li><div class="buttonbg" style="width: 86px;">Resume</div></li>
<li><div class="arrow buttonbg" style="width: 96px;"><a>Contact</a></div>
<ul>
<li>Email</li>
<li>Send</li>
</ul></li>
<li><div class="buttonbg" style="width: 69px;">Home</div></li>
</ul>
</div>
<script type="text/javascript" src="/Menu2Assets/mbjsmb4pc8.js"></script>
<!-- end #header --></div>
</head>
<div id="mainContent">
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<!-- insert in the document body -->
<object data='http://www.example.com/TestDoc.pdf#'
type='application/pdf'
width='100%'
height='100%'>
<p>It appears your Web browser is not configured to display PDF files.
No worries, just <a href='http://www.example.com/TestDoc.pdf'>click here to download the PDF file.</a></p>
</object>
<p align="center"> </p>
<p align="center"> </p>
</div>
<div id="footer">
<p align="center"><img src="images/Copyright.jpg" width="190" height="15" alt="Copyright" /></p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

jquery mobile app does not show styled text on iPhone

I am trying to build my first project for iOS using PhoneGap. I have picked up an example from this page:
http://www.codeproject.com/Articles/579532/Building-an-iPhone-App-using-jQuery-Mobile
And my code looks like this after changing reference to 1.4.1 ans 1.9:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Task Timer</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
</head>
<body>
<div id="tasksPage" data-role="page">
<div data-role="header" data-position="fixed">
Edit
<h1>Task Timer-1</h1>
Add
</div>
<div data-role="content">
<ul id="taskList" data-role="listview">
<li onclick="alert(1)">Task 1</li>
<li onclick="alert(2)">Task 2</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
About
</div>
</div>
</body>
</html>
This page, if you copy to an html file will display formatted text. However when I copy the App to iPhone it displays simple text.
Can someone please tell me what I am doing wrong?
I think I have just solved the issue.
I made a reference to cordova.js in main html file. And as a precaution copied cordova.js to www folder. And the text started appearing formatted the JQM way.

PhoneGap jQuery mobile multiple html files css not working

I have implemented a Phone Gap application using jQuery Mobile and java script for iPhone and android.
My app is almost completed.
Till now I used single index.html file for all the pages.
Now I need to use different html files for different pages.
So I have created multiple external html files for different pages, linked the references and added them in to www folder.
in that the i have a list view its css not visable
Main Page:- See page2 and page3 ref in index.html file
<div data-role="content">
<ul data-role="listview" data-theme="e" data-header-theme="a" data-dividertheme="a" id="List view">
<li data-role='list-divider' ><big>Lis view</big></li>
<li><a href='#page1' id='Page1' data-panel='main'>Page1 Information</a></li>
<li><a href='page2.html' rel="external" id='pagetwoid' data-panel='main'>Go to Page 2</a></li>
<li><a href='page3.html' rel="external" id='pagethreeid' data-panel='main'>Go to Page 3</a></li> </ul>
</div>
Page2:-
<!DOCTYPE html>
<html>
<head>
<title>Multiple htmls</title>
<meta id="viewport" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<!--
<link rel="stylesheet" href="inc/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="inc/jquery.mobile.splitview.css" />
<link rel="stylesheet" href="inc/jquery.mobile.grids.collapsible.css" />
<link rel="stylesheet" href="inc/jquery.mobile.structure-1.0.1.min.css" />
-->
<link rel="stylesheet" href="inc/jquery.alerts.css" />
<link rel="stylesheet" href="inc/jquery.mobile.datebox.css" />
<script charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" src="inc/jquery-1.7.1.js"></script>
<script type="text/javascript" src="inc/jquery.mobile.splitview.js"></script>
<script type="text/javascript" src="inc/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="inc/jquery.alerts.js"></script>
<script type="text/javascript" src="inc/iscroll-wrapper.js"></script>
<script type="text/javascript" src="inc/iscroll-lite.js"></script>
<script type="text/javascript">
alert('js Loadfed');
</script>
<style>
alert();
alert('css loaded');
</style>
</head>
<body>
<!--============= Page2 ===============--->
<div data-role="page" id="siteContacts" data-theme="e" >
<div data-role="header">
<h1>Page 2 </h1>
<a href="page2.html" id="EditButton" data-role="button" data-icon="gear" class="ui-btn-right" data-theme="e" >Edit</a>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" class="ui-listview" data-dividertheme="a">
<li data-role="list-divider"> <!--list Header --->
<div class="ui-grid-c"> <!--Section Headers Grid--->
<div class="ui-block-a" ><big> aaaa</big> </div>
<div class="ui-block-b" ><big> bbbb</big> </div>
<div class="ui-block-c" ><big> ccc</big> </div>
<div class="ui-block-d" ><big> e-sss</big> </div>
</div>
</li>
</ul>
</div>
</body>
</html>
Maybe I'm reading your code wrong, but it looks like the links to the jquery mobile stylesheets are commented out. You definitely need to have them defined in the HTML to get the styles applied.
Are you loading them someplace else that it not apparent from the code you posted?
PhoneGap requires you to manually set/allow aspects of your app in your "config.xml" file in the root directory.
The solution you are looking for, I believe, is this line:
<access origin="http://code.jquery.com" subdomains="true" />
You are allowing access to the external resource of "http://code.jquery.com" and allowing all of its subdomains. This means that you have just unlocked jquery mobile, which is what you are going for, as seen by your script tags:
<script type="text/javascript" src="inc/jquery-1.7.1.js"></script>
<script type="text/javascript" src="inc/jquery.mobile.splitview.js"></script>
These "src" attributes are now seen as "subdomains" of http://code.jquery.com, which you have just successfully allowed!

Categories