Is it possible to use JQuery effects in itmill toolkit components?

Phesto · February 25, 2009, 12:05pm

Hi, Sorry for asking before trying!

I have been checking arround some nice effect provided by JQuery scripts, and plugins.

I was thinking of using draggable effect on itmill panels, And if so, is it in all the layouts? havent even tried, so am asking the possibility or if someone has done it. B4 I invest sometime to start the trials.

Thanks.

joonaslehtinen · February 25, 2009, 12:36pm

Have not tried it, but it might be possible to do this using a CustomLayout with script-tag. If you try it out, please let us know how it went.

Phesto · February 25, 2009, 1:30pm

I tried with the following code, which should display an alert box with message “Hello world”

&lt;script type="text/javascript" src="/SocialNetwork2/ITMILL/themes/example/jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt; 
$(document).ready(function() {
   $("a").click(function() {
     alert("Hello world!");
   });
 });
&lt;/script&gt;
&lt;table width="100%" &gt;	
	&lt;tr&gt;
		&lt;td width="100%" align="center" valign="top" colspan="2"&gt;
		//Place a live href link here
		&lt;div location="errorMessage"&gt;&lt;/div&gt;
		&lt;/td&gt;
	&lt;/tr&gt; ........

but there was neither error nor effect.

Marc · February 25, 2009, 2:13pm

Hi,

It’s been some time since I last used jQuery, so I might be wrong, but:

I’m not sure you can use $(document).ready() - I think the content of the CustomLayout might be loaded long after $(document).ready() is triggered.

This is quite interesting, though - I’ll have to try this…

Best Regards,
Marc

joonaslehtinen · February 25, 2009, 3:17pm

Here is a working example (for a custom layout template file):


&lt?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?&gt
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;button id="_UID_left"&gt;«&lt;/button&gt; &lt;button id="_UID_right"&gt;»&lt;/button&gt;
&lt;div style="border: 5px solid red; width:50%; position: relative" id="_UID_A"&gt;&lt;div style="height:100px;" location="A"&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div style="border: 5px solid blue;" id="_UID_B" &gt;&lt;div location="B" style="height: 400px;"&gt;&lt;/div&gt;&lt;/div&gt;

&lt;script type="text/javascript"&gt;
	  window.$("#_UID_right").click(function(){
	  window.$("#_UID_A").animate({"left": "+=50px"}, "slow");
  });

  window.$("#_UID_left").click(function(){
	  window.$("#_UID_A").animate({"left": "-=50px"}, "slow");
  });
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

The trick is to load jquery.js outside the CustomLayout as it does not currently support loading of external js-files. In order to do that I included jquery.js in a manualle edited index.html -file.

joonaslehtinen · February 25, 2009, 3:20pm

For a live demo, try JQuery Test

In the example, the left and right buttons are implemented on client-side using JQuery for event handling. JQuery animates the div that contains A-button. Both A and B buttons are Toolkit buttons.

joonaslehtinen · February 25, 2009, 3:28pm

Also created a feature request for supporting loading of JQuery directly from a CustomLayout template: http://dev.itmill.com/ticket/2686

If you want to try out my “hack”, download WAR (including SRC) from Trac: http://dev.itmill.com/raw-attachment/ticket/2686/JQTest.war

steffen · October 31, 2009, 10:15pm

If you want to avoid a lot of JS related conflicts use

jQuery(‘#mydiv’).css(‘foo’, ‘foo’);

instead of

$(‘#mydiv’).css(‘foo’, ‘foo’);

joonaslehtinen · November 1, 2009, 9:19pm

Good point for anyone trying this out. (this one was just a proof-of-concept)

Jay3 · September 4, 2010, 6:17am

Hi Joonas,

so can we now actually put <script type=“text/javascript” src="…/jquery-**.js> in the customerlayout html file or we still need to put it in the index.html. If so, do i need to manually create index.html? because i dont see the file (and i assume it should be an automatically generated html file)

Many Thanks,

Jay

Henri2 · September 6, 2010, 5:35am

You can override e.g. the method (Abstract)ApplicationServlet.writeAjaxPageHtmlVaadinScripts(), calling the superclass method and then writing out your own script line. This way, it is loaded for every page. The writeAjaxPageHtml* methods of any recent Vaadin version allow customization that makes it unnecessary to use a custom index.html file in 99% of cases.

To use your own application servlet class, you also need to change the reference in your web.xml to point to it.

Magnus1 · November 12, 2010, 6:50pm

Hi,
This was exactly the post I was looking for (even though it was written over a year ago ).
With the help of the information in here I managed to get jQuery to work within my Vaadin application.
Thank you guys!

There are however some things I don’t understand.

Question 1:

I looked at the application with the help of firebug and noticed that the scripts that I add in my CustomLayout are prepended with var document = $doc; var window = $wnd;
Can this be the reason why I can’t get $(document).ready() to work, or is it because what Marc Englund writes in his post above?
In firebug it looks like “document” still is a reference to the DOM document, so I guess this shouldn’t be a problem.

Question 2:

Why do I need to put “window.” before my jQuery statement?
E.g.

window.$("#test").hide(); // works
$("#test").hide(); // doesn't work

Question 3:

I really can’t get jQuery.draggable() to work.
Has anyone tried this?

Thanks for an excellent tool!

Best Regards,
Magnus

Jouni1 · November 14, 2010, 6:10pm

I’m quite sure you won’t get (document).ready() to work. GWT runs the application javascript inside an IFRAME element, hence the original document object referencing the document of the IFRAME, not the real applicatin DOM. That’s why GWT exposes those $doc and $wnd variables which reference the real DOM. And since that code is run after the initial page load, there probably are several reasons why the listener is never called (i.e. triggered long after the page load, referencing the wrong document element possibly).

Same reason as above: without the window reference, the “anonymous” window reference would point to the IFRAME window object.

What are you trying to drag? Does it work at all, even partially?

Anna6 · August 31, 2011, 8:48am

I’m having a lot of problems with using jQuery. Alerts are working (at times), but that’s pretty much it.
Debugging is a total PITA, any tips on that? I’m using firefox & firebug & JQuery lint, and my scripts (which mostly consist of alerts at the moment, since nothing else is working) are in a custom html-template. The oddest thing I find is that what works on first page load, won’t work after refresh. I’m having a hard time trying to track what works and what doesn’t as it seems quite random, depending on time of day and position of the stars :cold:

Anna6 · August 31, 2011, 8:54am

(I can’t edit my post?)

Wanted to add mthat the regular browser tools such as javascript console do not alert that anything is wrong or in error. So the “not working” is exactly that, not working = nothing happening that should be happening.

Kamil19 · November 27, 2012, 9:23am

Hey,

I am novice in Vaadin and I found myself struggling with similar problem. I want to use this jQuery plugin (http://www.woothemes.com/flexslider/) (too bad there is not similar in Vaadin ). I extended application servlet, override writeAjaxPageHtmlHeader method and add jQuery and flexslider js file, but I can’t execute code which allow me to create this content slider. I found your respone and this is what I need, unfortunately I can’t make it work Could you help me guys?

How did you manage to execute this javascript code which is at the end of the body tag (How did you put it there)?

Thanks for your help !

Kamil19 · November 27, 2012, 11:27am

Never mind, I solved my problem