Win a copy of The Java Performance Companion this week in the Performance forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

jQuery auto complete with jsf

 
pradeep gamage
Ranch Hand
Posts: 85
Eclipse IDE Java Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
i have developed jquery autocomplete with jsf and it's working fine. but when i add h:form it's not working

this is my code. /* auto complete */


with above code autocomplete is working fine... but when i put h:inputbox inside h:form it's not working. without putting it in h:form i will not able to submit it's value to jsf backing bean. please give me valuable idea to get this correct. Thanks in advance
 
pradeep gamage
Ranch Hand
Posts: 85
Eclipse IDE Java Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I inserted h:inputHidden and set it to value using java script. then its working as i want.
this is my code


<h:inputText id="tags" required="true" requiredMessage="#{msgs.requireMassage}"/>
<h:form id="watchListForm">
<h:inputHidden id="ttt" value="#{watchListBean.symbolName}"/>
<h:commandButton action="#{watchListBean.addtowatchList}" value="ADD TO WATCH LIST" onclick="document.getElementById('watchListForm:ttt').value = document.getElementById('tags').value">
</h:commandButton>
</h:form>

 
sanju baba
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Pradeep,

I am not able to use the code snippet that you have shared above. Both cases are not working. I am copying my JSP content here:-
<%@ page language="java" contentType="text/html;charset=UTF-8"%>

<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<link type="text/css" rel="stylesheet" media="projection, screen, print" href="js/jquery-ui-1.8.17.custom.css" />

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.autocomplete.js"></script>

<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "tags" ).autocomplete({
source: availableTags
});
$( "#html" ).autocomplete({
source: availableTags
});
});
</script>

<f:view>
<label for="tags">JSF Autocomplete: </label>
<h:inputText id="tags" />

<label for="tags">HTML Autocomplete: </label>
<input type="text" id="html">

</f:view>


Please note that it is working fine with HTML text box with id HTML and not working with JSF input box with id tags. Looking for your further input as it is a bit urgent.

Thanks,
Sanjeev
 
pradeep gamage
Ranch Hand
Posts: 85
Eclipse IDE Java Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
if you put h:inputbox inside the h:form auto complete will not work. so you have to put h:inputbox outside of h:form and get that value by javascript and assign to h:hiddeninput textbox. then your autocomplete will work.
 
Tim Holloway
Saloon Keeper
Pie
Posts: 18212
53
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Helpful hint: Look up above the text input area in our message editor and you'll see a button labelled "Code". You can use this button to generate code tags around preformatted data such as Java source or XML. It makes things a lot easier to read.

Don't use the "$" notation on jQuery on JSF. The "$" means things to the EL processor that you don't want it to mean. Use the long-form alternative ("jQuery.") instead.

In JSF, there is now a lot of support for AJAX. JSF2 includes an ajax tag in the core tagset. Many of the extension tagsets such as RichFaces, IceFaces, PrimeFaces, and so forth provide AJAX support as well. I use the autocomplete function in RichFaces extensively. If you use JSF's AJAX features, you may find that you will have to write little JavaScript, if any. JSF will write the JavaScript for you. In in some cases, it will even write jQuery code for you!
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic