15 Juni 2009

jquery-autocomplete in struts2

have you ever tried to use jquery-autocomplete in struts2

i use this jquery plugin when i have to add a feature on tag textbox. The tag textbox should display existing tag on the textbox, so user could choose any tag displayed by the autocomplete feature. If you wanna try the example of jquery-autocomplete, just follow this link. You'll also find the demo link on that page. Here's my steps to complete this thing:

1. write a method to get existing tags (on a list form) from database.

.....
.....
public String findTag() {
listTag = daoFactory.getTagDAO().findTagList();
return SUCCESS;

}
.....
.....


2. write a JSP that will display the list of existing tag, called tag.jsp
<%@ taglib prefix="s" uri="/struts-tags"%>

<s:iterator value="listTag">
<s:property value="tags"/>
</s:iterator>

3. write the mapping on struts.xml

.....
.....
<action name="autoTag" class="com.xsis.xklog.web.actions.SannyEntry" method="findTag">
<result name="success">/pages/sannyEntry/tag.jsp</result>
</action>
.....


4. my final step is write a JSP that call tag.jsp through struts action. This JSP also called through struts action, just like struts' rule.
.....
.....
<script type="text/javascript" src="<%=request.getContextPath()%>/res/js/jquery/lib/jquery.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/res/js/jquery/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/res/js/jquery/lib/jquery.ajaxQueue.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/res/js/jquery/lib/thickbox-compressed.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/res/js/jquery/autocomplete/jquery.autocomplete.js">
</script>

<link href="<%=request.getContextPath()%>/res/js/jquery/autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
.....
.....
<script type="text/javascript">
$().ready(function() {
$("#tag").autocomplete('<%=request.getContextPath()%>/publisher/autoTag.action', {
multiple: true,
autoFill: true
});
});
</script>
.....
.....
<s:textfield id='tag' name="tagField" label="tag" />
.....



just remember to write the absolute path. I spent 3 days work to find out what's wrong with my program, why the jquery-autocomplete can not run well in struts2. And it's just about the PATH... since struts2 failed to read relative path, so you better use absolute path to make sure everything will run well

have a nice day, everyone :)

9 komentar:

  1. wooo .. akhirnya bisa ...

    ntar nyoba dah?

    hmmm .. emang ga bisa baca relative path ya struts nya?

    BalasHapus
  2. hmm yes yes i understand... it's easy...

    BalasHapus
  3. @noval78
    path struts action nya ga kebaca kalo ditulis relative di javascript jquery. Jadi aku main aman aja, semua path ditulis absolute... hehehe!

    @Ansis
    yeaahhh \m/

    BalasHapus
  4. entah kenapa aq merasa kyk orang bego..
    haha...
    jakarta membuatmu semakin keren nak!

    BalasHapus
  5. after coming list and if i pres the down arrow key it going down but it can't see.there is no highlighted line when goes down.....
    pls give me solution if u can as soon as possible
    thanks in advance

    BalasHapus
  6. @Anonymous
    i don't quite understand about your problem.
    do you mean your list doesn't appear at all?
    maybe there's something wrong with your path.
    would you please be more spesific, so we can figure it out.

    BalasHapus
  7. Thanks for the tutorial, it was nice.

    I have a requirement where the drop down should have key, value pair so when user selects the item from the dropdown, I want to validate couple of other fields on the form.

    Do you know how to set the JSON data to the autocompleter and retrieve the data.

    Thanks,
    Suresh

    BalasHapus
  8. @suresh: thanks for reading. well, i don't know much about JSON.. i'm sorry, i can't help you on this. good luck! :)

    BalasHapus
  9. Thanks so much for this post!
    I am new to jQuery, and this gave me the kick in the pants I needed to understand how Struts2 actions can be called using jQuery.
    Great job!

    BalasHapus