I have a JSF 1.1 with IceFaces 1.6.2 project, where in the form I use <ice:selectInputDate />, but that component uses server resources for rendering Date, I want to change it with JS implementation. How I can do it? I saw that tutorial, but I am a newbie, and I don't exactly know, what files to configure. My implemenation of form is:
<ice:selectInputDate id="genDate"
binding="#{frm_4_20Bean.genDateInput}"
renderAsPopup="true"
highlightUnit="DAY_OF_WEEK"
highlightValue="1,7"
highlightClass="weekend"
required="false"
value="#{frm_4_20Bean.genDate}">
</ice:selectInputDate>
How I can replace it with jQuery UI Datepicker which is described in tutorial above?
Related
What it says in the title. I have a simple app that needs the functionality, but can be otherwise written in plain clojurescript so it seems pretty wasteful to load jQuery and jQueryUI just for that.
The closest thing to jQueryUI's Sortable in the google closure library is goog.fx.DragListGroup. As far as I know there is no ClojureScript wrapper for that, but it should be fairly simple to code against it directly and since it's in the closure library it should optimize well too. The basic idea is that you instantiate a DragListGroup for each independent list that you want to be sortable, and then add the list element to that group using addDragList. You can also add multiple list elements to the same group if you want to be able to drag elements between lists.
Here is one way to get this working. You'll need to use an extern file so Google Closure can read the jQuery libraries. There is one for the main jQuery already published and I posted one that works well for jQuery-ui's sortable. The project.clj should have a reference to the extern, so include something like this:
:dependencies [[org.clojure/clojure "1.5.1"]
[org.clojure/clojurescript "0.0-1806"]
[jayq "2.3.0"]]
:plugins [[lein-cljsbuild "0.3.1"]]
:cljsbuild {
:builds [
{:source-paths ["src"]
:compiler
{:output-to "resources/public/js/out.js"
:optimizations :advanced
:pretty-print false
:externs ["resources/public/externs"]}}]})
Then write some cljs for the sortable function (jayq makes this easy):
(ns sortable.core
(:use [jayq.core :only [$]]))
(defn sortable [$elem]
(.sortable $elem))
(defn disable-selection [$elem]
(.disableSelection $elem))
(let [$sortable ($ :#sortable)]
(sortable $sortable)
(disable-selection $sortable))
And include an index.html file for the project like this.
There might be some way to compile the jQuery libraries directly with :foreign-libs in the project.clj but I'm not sure how to do that.
EDIT: Sorry this still uses the entire jQuery library so it doesn't really answer the question.
Because I have no clue about clojurescript I can't give you a proper solution in clojurescript but jQuery and jQuery UI shouldn't be that wasteful.
You could include the jQuery library by making use of the Google CDN. Lots of websites use this source and therefore the file gets cached and won't be downloaded again and again.
See this link.
//you can of course easily change the version you want to use, like 1.9.1
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script
The same could be done for jQuery UI
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
But if you just want to use the sortable widget of jQuery UI you could simply use their Download Builder.
Just uncheck the "Toggle all" checkbox below "Components" and then check the sortable checkbox in "Interactions".
Download your customized jQuery UI version and all you need to include is the jquery-ui-1.10.3.custom.min.js file. The Download Builder downloads a CSS theme also but for the sortable widget I see no need to include it.
But in fact including jQuery UI from Google CDN is also a good choice. If you host the libraries locally your users must download it at least once. If you use Google most of the user won't need to download the files. (unless the version is different)
Just a suggestion if there's nothing in clojurescript which could help you out.
I'm using a PrimeFaces commandButton to issue an Ajax request.
I should set the update attribute so that the whole parent form be updated EXCEPT for some specific components (Let's say I've tagged them with styleClass="noupdate").
I'm using PrimeFaces 3.5, so I think PrimeFaces JQuery Selectors may help.
I tried something like this:
<!-- ...some inputs/labels to be updated here... -->
<p:overlayPanel styleClass="noupdate">
<!-- ...some inputs/labels to be updated here... -->
<p:commandButton id="btnDoIt" value="Do it"
update="#(this.closest('form') :not(.noupdate))"/>
</p:overlayPanel>
but it doesn't work (I get a JavaScript Syntax Error).
Is there a way to get what I need?
Notice that:
1) The form id is not known because the button is part of a composite component that can be hosted by any form in different views
2) In my example the <p:overlayPanel> itself must not be updated, but any descendant component do.
3) There are more than one form in the view, and I should work on the "current" one only.
Thank you in advance to anyone can help me.
There's no such thing as this in PrimeFaces selectors. There are definitely no jQuery functions like $.closest() available in PrimeFaces selectors. It has just to be a pure jQuery-compatible CSS selector, not some JavaScript code.
<p:commandButton ... update="#(form :not(.noupdate))"/>
See also:
How to exclude child component in ajax update of a parent component?
I want to increase the size of the Calendar view because the default size is too small for my web application. I've tried to add a cssClass to the datetimepicker tag but it doesn't work, even if I change the width or height the only thing it changes is the field, not the calendar itself.
I'll put an image so you can understand better the problem that I have:
The thing is that the text from the field is correctly viewed, but when I click the calendar button, it shows that tiny view and it's extremelly difficult to pick one date.
The code for the datetimepicker is this:
<sx:datetimepicker name="start_date" displayFormat="dd-MMM-yyyy" value="%{'today'}" />
Any guess?
Ok, It's finally solved:
First I tried to find the file named datefilepicker.ftl inside the struts2-core.jar but I didn't find anything similar.
So after a few hours trying to find which was the correct template of datetimepicker without any luck, I tried to solve my problem using JQuery because when I was searching for the answer I found out a datepicker tutorial using this library.
There's a plugin called Struts2-JQuery that provides you with ajax functionality and therefore with multiple customizations in different widgets.
It's quite easy to install, I just had to download the correct .jar which for me it was Version 3.5.1 ( jQuery 1.8.3, jQuery UI 1.9.2 ). Once I'd downloaded the file, I just had to paste it in the lib folder inside my project. After doing that, I added this line at the beginning of the .jsp file:
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>
With these steps I had jquery functionality inside my .jsp file, so the only thing left to do is to add the datepicker widget:
First I chose the jquerytheme I wanted for my widget, just like this:
<head>
<sj:head jquerytheme="flick"/>
...
</head>
And then, I added my datepicker widget:
<sj:datepicker name="start_date" displayFormat="dd-MM-yy" value="today"/>
And that's it.
If you want to resize the datepicker calendar see the answer of this post:
How to resize the jQuery DatePicker control
<sx:datetimepicker name="start_date" displayFormat="dd-MMM-yyyy" value="%{'today'}" />
It is a dojo tag, so you should be changing the template file corresponding to this tag
Freemarker changes
check for something like datetimepicker.ftl in your workspace. That would be the file rendering your calendar. Any presentation related changes will be done in that file only.
debug using firebug
Another approach can be using firebug in Mozilla firefox and manually try to change the html rendered by the tag. There might lie some CSS solution to your problem
I am working with a form in symfony in which I need to use both the autocomplete and the datepicker functionalities. For autocomplete I am using sfExtraWidgetFormInputAutocomplete and for datepicker I am using sfWidgetFormDateJQueryUI in my form configure() method. In my form first widget using autocomplete is rendered and then the datepicker widget. I have read that there is some compatibility issue with these two.
Please tell me how to make them both work in single form.
use this line on the top of the page:
jq_add_plugins_by_name(array('autocomplete'));
Are there helpers for jquery ui?
#Html.DatePicker(m=>m.Date)
or
#JQueryUI.DatePicker('DateFieldId');
I think it can be more conveniently...
No, are not any builtin Jquery UI helpers in framework. But there're many blog posts about implementation of datepicker (on of the most needed widgets, indeed). Take a look at Stuart Leek's blog post for example
You can add custom attributes/classes to your standard Html controls and then write Jquery selectors to wire them up:
Build this HTML (you could write a helper method extension to do this):
<input class="ui-datepicker" data-min="1/1/2000" type="text" />
Then in your javascript:
(function($) {
$(".ui-datepicker").datepicker({
minDate: Date.parse($(this).attr("data-min"))
});
})(jQuery);
I know this is an old post, but for anyone looking for the answer to this question:
Try this:
http://jqueryuihelpers.apphb.com/Docmo/GettingStarted
I've been using it for quite some time now.. very, very nice