The declaration and the invoke is here:
<?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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>#{msgs.windowTitle}</title>
<h:outputScript library="javascript" name="Resources/js/checkPassword.js" />
</head>
<body>
<h3>#{msgs.Entrance}</h3><br/><br/><br/>
<h:form>
<h:panelGrid columns="2" columnsClasses="evenColumns, oddColumns">
#{msgs.namePrompt}
<h:inputText/>
#{msgs.PasswordPrompt}
<h:inputSecret id="password" />
#{msgs.ConfirmPasswordPrompt}
<h:inputSecret id="passwordConfirm"/>
</h:panelGrid>
<h:commandButton type="button" value="Submit" onclick="checkPassword()" />
</h:form>
</body>
</html>
The checkpassdword.js
function checkPassword(){
alert("here it is");
var password = form[form.id+":passwordConfirm"].value;
var passwordConfirm = form[form.id+":password"].value;
if(password==passwordConfirm){
form.submit();
}
else{
alert("Wrong");
}
}
It is inside WebContent/Resources/js
when i write in put and, click button, nothing happens.
In explorer the error is in console
<script src="RES_NOT_FOUND" type="text/javascript"></script>
How can i solve this problem? I tried to put in src, webinf, meta inf and tried to declare as src not name but nothing happened.
The error unidentified checkPassword.
Replace
<h:outputScript library="javascript" name="Resources/js/checkPassword.js" />
with
<h:outputScript name="js/checkPassword.js"/>
and rename your Resources folder in your WebContent into resources
And go over the following thread What is the JSF resource library for and how should it be used?
Related
I'm trying to show a p:panel with a widgetVar and onclick but it only shows up for like a split second. Then it hides again.
When it hides again I get the following error-message in the browser development console:
Uncaught TypeError: Cannot read property 'val' of undefined
The error also shows up only for a split second.
This is my .xhtml page:
<?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">
<h:head>
<h:outputStylesheet library="css" name="style.css" />
<h:outputScript name="jquery/jquery.js" library="primefaces"/>
</h:head>
<h:body>
<h:form>
<p:commandButton value="testbutton" ajax="false" onclick="PF('panelwv').show();" />
<p:panel widgetVar="panelwv" visible="false" toggleable="true">
<h:outputText value="Test" />
</p:panel>
</h:form>
</h:body>
</html>
I'm using Primefaces 5.2.
Having ajax="false" on a p:commandButton while not having specified an action or actionListener attribute referencing a bean, causes this. It looks like you do not need to or do not want to call any action on the server and just do some javascript. In that case add a type="button" to the p:commandButton.
See also:
Primefaces - commandButton does not work
Page 112 of the PF 5.2 docs
I have found the thread answered by BalusC
It describes the exact problem I have. When I found it I thought I have found my answer as well, but for me the solution is not working. I had problems with the < h:outputScript> tag already, maybe it is the same problem (the < script> tag is working).
I have the same project description as the user Plaha, that put the question. I am trying to call a JavaScript function defined in the template page with the parameters attributes of the backing JSF bean. But for now the alert function is enough.
I`ve tried to make the page gridTest.xhtml to look like content.xhtml from the example, but it doesn't work.
The gridsTemplate.xhtml looks exactly like the template in the thread + I have the < head> tag in which I have some JavaScript functions. My gridTest.xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" 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:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<link rel="stylesheet" type="text/css"
href="/juritest/resources/css/style.css" />
<script type="text/javascript"
src="/juritest/resources/js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="/juritest/resources/js/menu.js"></script>
</h:head>
<body>
<ui:composition template="../../templates/gridsTemplate.xhtml">
<ui:define name="content">
<h:form rendered="#{gridPopUpBean.testNotStarted}">
...
</h:form>
<h:form rendered="#{not gridPopUpBean.testNotStarted}">
<h:outputScript target="body">
alert("working?");
</h:outputScript>
...
I have tried for curiosity to put the < h:outputScript directly under the ui:define like in the example, but it doesn't work either.
I'm trying to get TinyMCE to work and I'm struggling. Here is my complete page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>TinyMCE Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode: "textareas"
});
</script>
</head>
<body>
<form method="post" action="show.php">
<p>
<textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
<br />
<input type="submit" value="Save" />
</p>
</form>
</body>
</html>
The JS file is found, the php file doesn't exist yet (although I don't believe that will be an issue?)
However when I load my page in Chrome or IE8 the textbox just looks like it always does?
I don't know if it's related but I get a script error in chrome: object has not method 'extend'
Why am I not getting the updated textbox as seen on the site?
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
This is my current code. When I click on the button approve....the html heya changes to fred flinstone, but goes back again to heya in 2 seconds. Why so?
<!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>Untitled Document</title>
</head>
<script language="javascript" type="text/javascript">
function button()
{
var a = document.getElementById('approve');
document.getElementById('p').innerHTML= 'Fred Flinstone';
}
</script>
<body>
<form>
<p id="p">heya</p>
<input type="submit" id='approve' value="approve" onclick="button()"/>
<input type="submit" id="reject" value="reject"/>
</form>
</body>
</html>
Thanks.
That's because the submit button causes the page to reload, effectively undoing your changes to the DOM.
If you change the type of the input element to "button" instead of "submit" it will work fine.
<input type='button' id='approve' value='approve' onclick='button()'/>
Please note that in doing this, the button will not be posting the form anymore. If that's what you want then you will need to have code on the server side to modify the rendered page to reflect your changes.
This also works:
<input type="submit" id='approve' value="approve" onclick="button(); return false;"/>