How can I apply jquery datatable on JSF datatables ?
The following not working , because id on jsf datatable (i.e <h:datatable id="example"...) becomes j_idt6:example on html.
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
any solution ?
Note: I am using because of client pagination and search.
Change
<h:datatable id="example"...
to
<h:datatable styleClass="example"...
Then just use $('.example').dataTable();
you may wrap the table into the form, and then the id fill be formID:tableID
Since you are working with JSF, you should consider using the PrimeFaces Library , they got a really great table component
If you still want to go with the really great datatables plugin here are several solutions:
1) Add prependId="false" to your h:form , that way you wont get that id with form prefix
2) Set an id to your h:form and use the following jquery code $('#myForm\\:example').dataTable();
3) Call the dataTable constructor on styleClass="example" attribute of the table instead of the id
Also, you can try out my Yet Another DataTables Column Filter (Yadcf)
Related
i use java struts framework. in list page, record is listed on table
<display:table class="table980" id="table1" name="sessionScope.ruhsatListe"
sort="list" pagesize="100" requestURI="/IletimAction.do?target=rListele"
export="true">
<display:column class="tableItem" property="sicilNo" title="Sicil No" sortable="true" headerClass="tableColHeadingSort" />
i want to change pagesize attr. listing 10 record or 50 record or 100
i used jquery but not working and code is:
function(deger){
location.reload();
$("#table1").removeAttr("pagesize");
$("#table1").attr('pagesize', deger);
}
what can i change pagesize as dynamic? i use jquery
When your jsp tag gets evaluated at the server, it gets converted to simple html tags and your attributes would probably disappear by the time it reaches the browser for rendering. So simply changing pageSize attribute at browser will not help.
What you need to do is a server hit, something like,
$.get('/IletimAction.do?target=rListeleTable', function (tableData) {
// Replace your entire table content with tableData
})
Needless to say /IletimAction.do?target=rListeleTable (Note the difference in URL with yours) should return your updated <display:table/> jsp content.
This is only one way of doing this, there might be better ways, if you can check Struts Ajax documentation.
I am using sitemesh for a spring based site. The problem is that I have some javascript that I want it to run on the onload event of only one specific page using jquery $(function() { ... }) and not on every page.
I have included the jquery.js in the bottom of my decorator, after the body. So, if I try to include a <script> tag in the body of my decorated page the script won't be executed because jquery will be loaded after that! I know that I could include the jquery.js in the header of my decorator so it will be before the custom script in the decorated page however I don't really like that solution since it will contain javascritp in the head of my page.
So I would like to have something like a placeholder in my sitemesh decorator in where the custom from my decorated page will be placed (as you can understand I come from the django world :p). Is this possible ? Do you propose anything else or should I just put my jquery.js in the header and be done with it ?
To answer my question, after some search I found the following solution:
I Added the following to the end of my decorator page (after including jquery.js)
<decorator:getProperty property="page.local_script"></decorator:getProperty>
I also added the following
<content tag="local_script">
<script>
$(function() {
alert("Starting");
});
</script>
</content>
The decorated result page contained the contents of the local_script tag exactly where I wanted them and everything worked fine :)
I don't know why this feature of sitemesh is not properly documented - using this you can have a great templating behaviour (like django).
I'm new to JSF and developing web applications with Java.
I'm basically developing a pretty complex interface, with lots of AJAX content loaded (Pagination, posts, comments, ...).
I'll start with a basic example, a user writes a comment. The form is sent through JSF f:ajax to the server and then I can do a render="sectionId", but the problem is, that I want to make the post not just appear, but slide down and even toggle background color.
How can I obtain this sort of effect using JSF and Javascript?
The designer (who knows only HTML/CSS/Javscript/Jquery) says that usually, he just does a Jquery AJAX call to a page with a string of data and then the page generates a JSON encode that he can then use to do all the magic.
I'm not asking how you do the toggle/color in jquery, it's the communication between the JSF and Javascript. So how can I send to his javascript the newly generated HTML code, so that he can what he wants with it.
Thanks for any help.
JSF is a server-side technology and you'd typically conditionally display content within
a construct such as a panelGroup, so why not include your jquery magic inside a ready
handler inside the conditionally rendered panelGroup like this:
<h:panelGroup id="ajaxRenderTarget">
<ui:repeat value="#{bean.listOfComments}" var="var">
... display required information ...
</ui:repeat>
<h:panelGroup rendered="#{bean.showJqueryEffects}">
<script type="text/javascript">
jQuery(function($) {
... funky effects here ...
});
</script>
</h:panelGroup>
</h:panelGroup>
Where I've used ui:repeat in the above example you could be and probably would be using any data iteration component from jsf or a component library such as a datatable.
Another thing to consider is OmniFaces which has <o:onloadScript> and a host of other tags which are worth knowing about.
One mistake to avoid is trying to load JSF pages using jQuery ajax functions, the server will have no state of the component tree and it won't work.
I'm not a Java developer, but work with a team that is using JSF 1.2
We'd like to start using HTML 5 tags and attributes. It does not appear that JSF 1.2 supports those by default.
Is there anyway to have a JSF text tag:
<x:inputText>
spit out an html 5 search tag:
<input type="search" placeholder="blahblah" />
Right now, I'm having to let it output a regular text field and then I place inline JS after it to trigger a function that converts it client side:
<input type="text">
<script> funciton here that changes type to 'search' and adds placeholder attribute</script>
It works, but is a bit hacky. Is there a legitimate way to get server-side JSF to output proper HTML 5 tags?
Create a custom component. This allows you fine grained control over rendered HTML.
Or upgrade to JSF 2.0, then you can create a composite component which is a lot easier.
I have dropdown with some optional value.if change the those value based on that will display another dropdown with value from database.I am doing this process in jsp page.First dropdown values are static(coded in jsp).but second dropdown values are come from database when changeevent of first dropdown.
Here i need to implement ajax or javascript ? Could you give me examples of this drop down.
You can do it with JQuery and Ajax pretty easily. Check out
http://www.chazzuka.com/experiments/jquery-dropdown/
for an example
Here i need to implement ajax or
javascript ?
Ajax.
Could you give me examples of this drop down.
JQuery works fine. I found DWR framework to be easier to understand for newcomers to Ajax. You can look at tutorials on that here.
You have two drop down
<select id="first" onchange="get_result();" >
somevale
</select>
<select name="second" >
</select>
now you need to give body to our get_result function
function get_result()
{
var value = $("#id).val();
JQuery.ajax("some_url",{ id : value }, function(){} )
}
This way you can do this. You specific check JQuery tutorial.