How to use jQuery in JSF? - javascript

Hi I'm new to JSF and jQuery .
Do I need to download any jQuery jar and pack to war in order to use?
Because in my code I can't call the jquery function.
<!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">
<h:head>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/06.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#form\\:name").click(function() {
alert("hii");
});
});
</script>
</h:head>
<h:body>
<h:form id="form">
<h:outputText id="hi" value="hi guys"></h:outputText>
<input id="name" />
</h:form>
</h:body>
</html>
This alert doesn't popup when I click on the output box.
In my pom I use this dependency.
<dependency>
<groupId>com.efsavage.jquery</groupId>
<artifactId>jquery-maven</artifactId>
<version>1.7.2</version>
</dependency>

You can use it as in another web applications, jsf tags support onclick attribute also.
please download my jsf-frontend fully configured web applications(JSF2.2+Primefaces+JQuery) and test on it.
Here is a link, JSF2.2 front end
One note: Primefaces also used Jquery and you can use it, or you can skip and include your jquery.
In my project you can find header files whit configuration.
Also good example here How to get JSF id via jQuery
Good luck!

Related

Can't show a primefaces panel with onclick

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

Javascript does not work under JSF template again

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.

jQuery load() encoding for Korean (and Japanese) lang

I've recently ran into a problem and I would really use a bit of help from the community. I'm trying to load a HTML file using jQuery load().
The index file:
<!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">
<head>
<title>Question</title>
<meta http-equiv="Content-Type" Content="text/html; charset=euc-kr" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function restart(){
$("#wrap").load('new-content.html').hide().fadeIn('slow');
}
</script>
</head>
<body>
<div id="wrap">
<div id="content">Text before restart: 남성</div>
</div>
<br />
Restart
</body>
</html>
The new HTML file includes some simple HTML content and a call to a .js file (used for some animations). The new content file:
<!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">
<head>
<title>Question</title>
<meta http-equiv="Content-Type" Content="text/html; charset=euc-kr" />
<script src="main.js" language="javascript" type="text/javascript" />
</head>
<body>
<div id="contentInner">Text after restart: 여성</div>
</body>
</html>
As you can see I've included the correct encoding charsets (for both files) and I've double checked and I can confirm that every file used for this part of the code it's encoded as "KOREAN" (checked in different apps like Dreamweaver, Notepad++, Sublime Text 2).
Yet still once I load the content the characters are not encoded properly; question marks appearing instead of characters.
Of course I made some searching before posting and I found a few helpful topics about this called the PHP header solution, but this isn't an options since it need to use HTML/JS/CSS only.
The same behavior occurs when I'm using the Japanese language too. In other latin based languages everything is working perfectly fine of course.
Any sort of input/advice/help would be much much appreciated.
Thank you!

How to stop the user from submitting form when javascript is disabled on the user's browser?

I am having a form in which i have applied the javascript validations, but if the user has javascript disabled then those validations does not work, please help me that how can i stop the user from submitting form until & unless he enables the javascript.
Thanks
Use JavaScript to put the submit button there.
<script type="text/javascript">
document.write("<input type=\"submit\" value=\"Submit Form\" />");
</script>
<noscript>
<p style="color: red;"><b><i>Please enable JavaScript to continue</i></b><p>
</noscript>
You could add the disabled="disabled" attribute on your submit button. Then using javascript when the DOM is loaded remove this attribute.
you cannt, on the client side. But you can still do validation on the server side. Essentially, server-side validation is what really matters.
You can use javascript validation, but note that javascript is just for adding more usability (i.e use it to make form submission easier for the client). Without javascript a form should still be submittable, partially for the small user-base which doesn't have javascript enabled by default.
partially because of a very small user base who otherwise will pwn you in the face for only using client side javascript validation and can (and probably will try at some point) to bypass this. So this is why server validation is a must, not only for the small user base without javascript.
Then ofcourse to answer your question, for the small user-base who wont try to manipulate your database or server you could remove your <form> and use:
<noscript>
You can FORM_BEHAVIOUR me with javascript enabled.
</noscript>
<script>
create a form here with javascript
</script>
How exactly you want to render your form is then ofcourse up to you, but note that no javascript can stop the very-small user base from abusing it.
javascriptdemo.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JAVASCRIPTDEMO</title>
<script language="javascript" type="text/javascript">
function onset()
{
document.forms["jdemoform"].elements["uname"].focus();
}
function jdemo()
{
if(document.forms["jdemoform"].elements["uname"].value=="")
{
alert("fill your name");
document.forms["jdemoform"].elements["uname"].focus();
return false;
}
document.forms["jdemoform"].submit();
}
</script>
</head>
<body onload="onset();">
if javascript disabled then form will not be submitted
<form name="jdemoform" method="post" action="getname.php">
Name:<input type="text" name="uname" />
<input type="button" value="Submit" onClick="return jdemo();"/>
</body>
</html>
getname.php
<!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>JAVASCRIPTDEMO</title>
</head>
<?php
echo $_POST["uname"];
?>
<body>
</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