How to include JavaScript file in JSF - javascript

he truth is that the code is small since I am learning, but I can not make it work, I have already touched other issues about this and I have not found a solution
<!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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<h:outputScript library="js" name="jquery-last.js" />
</h:head>
<div id="header">
<div class="logo"></div>
<div class="medio">MANAGER DX2</div>
<div class="fin"> </div>
</div>
<h:body>
<div class="body">
<div class="upbody">
<div></div>
<div>
Salir
</div>
</div>
<div class="container">
</div>
</div>
</h:body>
</html>
I also add some images with error and be able to provide more information
Thank you very much for your help

Related

How to make dialog close work with generated views?

I have a Primefaces project where all the views are generated via Netbeans.
Some of the views are edited and made into common used one, to make it more transparant. My problem is, that the VIEW part of the CRUD is one of the common ones, so it's referenced like this:
myView/myListView.xhtml:
<p:dialog id="InvoiceViewDlg" widgetVar="InvoiceViewDialog" modal="true" resizable="false" appendTo="#(body)" header="#{bundle.ViewInvoiceTitle}">
<ui:include src="View.xhtml"/>
</p:dialog>
referencing myView/View.xhtml:
<?xml version="1.0" encoding="UTF-8" ?>
<!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"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:components="http://xmlns.jcp.org/jsf/composite/Components"
xmlns:my="http://mywork.com/jsf/facelets">
<ui:composition>
<ui:include src="/view/form/formView.xhtml">
<ui:param name="item" value="#{invoiceController.selected}" />
<ui:param name="formType" value="invoice"/>
<ui:param name="controller" value="#{invoiceController}"/>
</ui:include>
</ui:composition>
</html>
referening /view/form/formView.xhtml and this is the problem:
<p:commandButton value="#{bundle.Close}" onclick="PF('FormViewDialog').hide()" styleClass="cancelButton"/>
formView is referenced on every View form and sadly the Close button (not the X, that is working) isn't working, because of the bad reference in the onclick event. I have no idea how make this work for every form... Has anyone any idea?
EDIT:
I edited my myView/View.xhtml to this:
<?xml version="1.0" encoding="UTF-8" ?>
<!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"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:components="http://xmlns.jcp.org/jsf/composite/Components"
xmlns:my="http://mywork.com/jsf/facelets">
<ui:composition>
<ui:include src="/view/form/formView.xhtml">
<ui:param name='dialogname' value='InvoiceViewDialog'/>
<ui:param name="item" value="#{invoiceController.selected}" />
<ui:param name="formType" value="invoice"/>
<ui:param name="controller" value="#{invoiceController}"/>
</ui:include>
</ui:composition>
</html>
And my /view/form/formView.xhtml:
<p:commandButton value="#{bundle.Close}" onclick="PF('#{dialogname}')).hide()" styleClass="cancelButton"/>
Sadly, this is the error I'm still getting:

learning javascript, why code will not work for javascript

I use IE 11 with the scripting option enabled. Even on other browsers it does not work. Using notepad++ to code and run... I'm currently learning javascript. I have a .js and .html file - the html has 3 sets of headings/paragraphs where the paragraphs should only show if i click the headings. This does not work. I downloaded a copy of the java library as well... I assume it has something to do with the Doctype statement ?
Any thoughts:
mcode.js
$(document).ready(function() {
$("p").hide();
$("h1").click(function() {
$(this).next().slideToggle(300);
});
});
myhtml.html:
<!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" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Heading one</h1>
<p>This is just some text for heading 1</p>
<h1>Heading two</h1>
<p>This is just some text for heading 2</p>
<h1>Heading three</h1>
<p>This is just some text for heading 3</p>
<!-- FIRST BELOW POINTS TO WHERE THE JAVA SCRIPT LIBRARY IS -->
<!-- SECOND IS MY JAVASCRIPT CODE THAT WILL BE USED -->
<!--<script type="text/javascript" src="jquery-1.8.0.min.js"></script>-->
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>
</html>
You have listed your javascript as mcode.js in the question, but referenced src="my_code.js". Change your src in the html to the correct file and it should work fine.
<script type="text/javascript" src="mcode.js"></script>
That should be what you are after :)
You have to add mcode.js in your html file. Add a script in your head linked to mcode.js.

How to include jqplot dateAxisRenderer.min.js file in your xhtml page

I would like to include jqplot.dateAxisRenderer.min.js file in your xhtml page.
How do i do ?
PF Version : 6.0.0
Added Dependency using POM:
<dependency>
<groupId>org.wicketstuff</groupId>
<artifactId>jqplot</artifactId>
<version>7.6.0</version>
</dependency>
How to add in xhtml file?
Following is my xhtml file code:
<?xml version="1.0" encoding="UTF-8"?>
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<ui:composition template="/pages/layout.xhtml">
<ui:define name="pageTitle">
<h:outputText value="Page 3" />
</ui:define>
<ui:define name="centerContent">
<div class="contentdetailheadline parbase">
<h1>Page 1</h1>
</div>
<div class="bodycopy parbase">
<div style="clear: both"></div>
<div class="content-body">
<p>
Welcome to My Page !!!
</p>
</div>
<div style="clear: both"></div>
</div>
</ui:define>
</ui:composition>
</html>

Javascript frameset navigation

It is a long time since I programmed web. How do I perform javascript frameset navigation (or replace the frameset with an exact equivalent):
<frameset rows="*,32">
<frame src="about:blank" id="viewer">
<frame src="cgi/browse.exe?images">
</frameset>
The webpage generated by browse.exe conains an javascript array with a list of files, and two buttons: previuos and next. When the user clicks next, next file should be displayed in the "viewer".
I have tried
parent.frames["viewer"].location.assign("...");
without success in FF. It works in IE. Note that the navigation works fine as long as I stay inside the same frame.
Try to replace the id with the name attribute, then it should work well in all browsers. Tested it on these pages:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index.html</title>
</head>
<frameset cols="240,*">
<frame name="fmenu" src="leftmenu.html" scrolling="yes"/>
<frame name="viewer" src="page1.html" scrolling="yes"/>
<noframes><p>noframes</p></noframes>
</frameset>
</html>
<!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>
<title>leftmenu.html</title>
</head>
<body>
<a onclick="window.parent.frames['viewer'].location.assign('page2.html')">test</a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page1,2.html</title>
</head>
<body>
<p>START PAGE</p>
</body>
</html>

Can't access javascript file in jsf component

I have a jsf component that must access to a javascript file, i added this whith outputScript as in the code bellow, I get an error in the generated html, and the javascript can't be reached.
The javascript file is located in document_root/js directory
How can i resolve this problem, thank you for your help.
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head><title>(For validation only)</title>
<link href="./css/styles.css"
rel="stylesheet" type="text/css"/>
</h:head>
<h:body>
<composite:interface/>
<composite:implementation>
<h:outputScript library="js" name="messages.js" />
<h:outputScript library="js" name="DateValidation.js" />
<h:form id="f">
<h:outputText value="Date" />
<h:inputText id="dateA"
onblur="return validateDateField('f:dateA');">
</h:inputText>
</h:form>
</composite:implementation>
</h:body>
</html>
Those files have to be placed in the /resources subfolder. So, you should have the following in the public webcontent:
/resources/js/DateValidation.js
/resources/js/messages.js
Unrelated to the concrete problem, your composite component approach is pretty awkward. I'd suggest to check out composite-component tag wiki: https://stackoverflow.com/tags/composite-component/info

Categories