You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by joch40 <ja...@urios-beratung.de> on 2011/10/16 13:55:08 UTC
Practical jQuery Integration
Hello,
I am quiet new to Tapestry and a bit lost in the moment. I try to integrate
jquery in my project. I learn about the $ sign Problem I managed to
integrate the Alert-Sample from
http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
into a tml page:
this looks like the following and works
<ul>
</ul>
<li> http://jquery.com/ jQuery </li>
Now I would like to get the same thing done in an extra MyJQueryAlert.java
Class.
So I changed the tml page to
<ul>
<li> http://jquery.com/ jQuery </li>
<div t:type="MyJQueryAlert" value="alert"/>
</ul>
And created an MyJQueryAlert.java in changing an working Example for
Scriptaculous
public class MyJQueryAlert {
@Inject
@Path("jquery-1.6.4.js")
private Asset myAlert;
@Environmental
private JavaScriptSupport javaScriptSupport;
public static final String EVENT_NAME = "alert";
private static final String PARAM_NAME = "t:MyJQueryAlert";
@Parameter(required = true)
private String value;
@Inject
private ComponentResources resources;
@Log
void setupRender() {
javaScriptSupport.importJavaScriptLibrary(myAlert);
}
@Log
void afterRender(MarkupWriter writer) {
String elementName = resources.getElementName();
if (elementName == null)
elementName = "span";
String clientId = javaScriptSupport.allocateClientId(resources.getId());
writer.element(elementName, "id", clientId);
resources.renderInformalParameters(writer);
if (value != null)
writer.write(value);
writer.end();
JSONObject config = new JSONObject();
config.put("paramName", PARAM_NAME);
String scriptstring = "jQuery.noConflict();
jQuery(document).ready(function(){ jQuery(%s).click(function(event){
alert(%s); event.preventDefault(); }); });";
Link link = resources.createEventLink(EVENT_NAME);
javaScriptSupport.addScript(scriptstring, "a",
"Test Alarm");
}
}
To be honest I don´t understand all things that are going on here and for
sure this doesn´t work.
The Log shows that afterRender gets called and that jquery-1.6.4.js has been
found.
I searched quiet a while but there seems to be not help for this Problem. So
can anybody give me an advice.
Thanks
Janko
--
View this message in context: http://tapestry.1045711.n5.nabble.com/Practical-jQuery-Integration-tp4906814p4906814.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: Practical jQuery Integration
Posted by Emmanuel DEMEY <de...@gmail.com>.
Hi
About Tapestry5-jQuery, you will find a lot of informations on our demo
website : http://tapestry5-jquery.com/.
If you want to use both Prototype and jQuery libraries, you should set the
JQuerySymbolConstants.SUPPRESS_PROTOTYPE to false in your AppModule. Our
library will automatically include the noConflict mecanism and the jQuery
files.
I prefer to put all the JavaScript in an external file. You can have a look
to the Superfish component sample :
-
https://github.com/got5/tapestry5-jquery/blob/master/src/main/java/org/got5/tapestry5/jquery/components/Superfish.java
-
https://github.com/got5/tapestry5-jquery/blob/master/src/main/resources/org/got5/tapestry5/jquery/assets/components/superfish/js/mySuperfish.js
This source code are based on Tapestry 5.3 !!
Manu
2011/10/17 joch40 <ja...@urios-beratung.de>
> Hello Sigbjørn,
>
> I have seen https://github.com/got5/tapestry5-jquery , but this seems to
> work only in tml / <script> like way and there is even less documentation.
> So I didn´t followed this track.
>
> And yes I have read
> http://wiki.apache.org/tapestry/Tapestry5HowToIntegrateJQuery, but its
> outdated and mainly concerned with the noConflict problem. (I seems that I
> at least I have solved that).
>
> Thanks for the reaction and direction anyhow
>
> Cheers
>
> Janko
>
>
>
>
> On 16 October 2011 23:42, joch40 <janko.jochimsen@> wrote:
>
> > Hi,
> >
> > Sorry for being unclear and thanks for your question.
> >
> > It simply dosen´t work.
> >
> > In the tml version - as in the original version - the alert pop´s up
> after
> > you try to click an Link and you don´t go to the target side.
> >
> > In my version the systems simply goes to the target site without any
> > alert.
> >
> >
> > Cheers
> >
> > Janko
> >
> > --
> > View this message in context:
> >
> http://tapestry.1045711.n5.nabble.com/Practical-jQuery-Integration-tp4906814p4907863.html
> > Sent from the Tapestry - User mailing list archive at Nabble.com.
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@.apache
> > For additional commands, e-mail: users-help@.apache
> >
> >
>
>
> Hi.
> There seems to be a replacement module at
> https://github.com/got5/tapestry5-jquery which will inject the jQuery
> library for you.
> If that does not work, have you tried to follow the guide at
> http://wiki.apache.org/tapestry/Tapestry5HowToIntegrateJQuery ?
>
>
>
>
> (ps: I have not used jQuery in my t5 pages)
>
> regards
>
> Sigbjørn Tvedt
>
>
> On 16 October 2011 23:42, joch40 <janko.jochimsen@> wrote:
>
> > Hi,
> >
> > Sorry for being unclear and thanks for your question.
> >
> > It simply dosen´t work.
> >
> > In the tml version - as in the original version - the alert pop´s up
> after
> > you try to click an Link and you don´t go to the target side.
> >
> > In my version the systems simply goes to the target site without any
> > alert.
> >
> >
> > Cheers
> >
> > Janko
> >
> > --
> > View this message in context:
> >
> http://tapestry.1045711.n5.nabble.com/Practical-jQuery-Integration-tp4906814p4907863.html
> > Sent from the Tapestry - User mailing list archive at Nabble.com.
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@.apache
> > For additional commands, e-mail: users-help@.apache
> >
> >
>
>
>
> --
> View this message in context:
> http://tapestry.1045711.n5.nabble.com/Practical-jQuery-Integration-tp4906814p4907978.html
> Sent from the Tapestry - User mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
--
Emmanuel DEMEY
Ingénieur Etude et Développement
ATOS Worldline
+33 (0)6 47 47 42 02
demey.emmanuel@gmail.com
http://emmanueldemey.fr
Re: Practical jQuery Integration
Posted by Barry Books <tr...@gmail.com>.
You don't need the jQuery(document).ready part in your script. The
javaScriptSupport.addScript does this for you.
FYI: I also use http://tapestry5-jquery.com/. If you already know
jQuery it's pretty easy to use and the samples should get you going.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
RE: Practical jQuery Integration
Posted by "Wechsung, Wulf" <wu...@sap.com>.
Hi Janko,
1) there should be a line where jquery assigns to $ (not _$) or window.$. This one needs uncommenting.
2) it should be possible to set break points in the JS via firebugs. If it's still not working, try setting breakpoints to see if the
right stuff is called and everything has the value it should.
Best Regards,
Wulf
-----Original Message-----
From: joch40 [mailto:janko.jochimsen@urios-beratung.de]
Sent: Montag, 17. Oktober 2011 23:00
To: users@tapestry.apache.org
Subject: RE: Practical jQuery Integration
Hi ,
thank you all for your support. Great community.
but....
I installed Firebug and you are right I think I will need it.
First I fund an error in my method
javaScriptSupport.addScript(scriptstring, "a",
"Test Alarm");
with
String scriptstring = "jQuery.noConflict();
jQuery(document).ready(function(){ jQuery(%s).click(function(event){
alert(%s); event.preventDefault(); }); });";
so the jQuery(%s).click part became jQuery(a).click what was wrong
so I changed it to
javaScriptSupport.addScript(scriptstring, "\"a\"",
"Test Alarm");
Now the funny thing is that FireBug dosen´t shows an script error
the HTML View shows
<body>
<div id="header">
<div id="page">
<div id="footer">
</body>
so this looks like it should.
As a next step I commended out the following part of the jQuery file.
// Map over the $ in case of overwrite
// _$ = window.$,
after some deleting an inserting this Version showed up in the FireBug
"script" Tab. But still no result, no error but just not working
Cheers
Janko
the funny thing is
--
View this message in context: http://tapestry.1045711.n5.nabble.com/Practical-jQuery-Integration-tp4906814p4911548.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
RE: Practical jQuery Integration
Posted by joch40 <ja...@urios-beratung.de>.
Hi ,
thank you all for your support. Great community.
but....
I installed Firebug and you are right I think I will need it.
First I fund an error in my method
javaScriptSupport.addScript(scriptstring, "a",
"Test Alarm");
with
String scriptstring = "jQuery.noConflict();
jQuery(document).ready(function(){ jQuery(%s).click(function(event){
alert(%s); event.preventDefault(); }); });";
so the jQuery(%s).click part became jQuery(a).click what was wrong
so I changed it to
javaScriptSupport.addScript(scriptstring, "\"a\"",
"Test Alarm");
Now the funny thing is that FireBug dosen´t shows an script error
the HTML View shows
<body>
<div id="header">
<div id="page">
<div id="footer">
</body>
so this looks like it should.
As a next step I commended out the following part of the jQuery file.
// Map over the $ in case of overwrite
// _$ = window.$,
after some deleting an inserting this Version showed up in the FireBug
"script" Tab. But still no result, no error but just not working
Cheers
Janko
the funny thing is
--
View this message in context: http://tapestry.1045711.n5.nabble.com/Practical-jQuery-Integration-tp4906814p4911548.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
RE: Practical jQuery Integration
Posted by "Wechsung, Wulf" <wu...@sap.com>.
Hello Janko,
I think it's possible that noConflict doesn’t work. To make sure, simply delete the lines in jQuery.js that assign to $ or window.$.
Regarding the rest of your example, it's really hard to diagnose but I would just bet that if you open your example with firebugs or
the Chrome javascript console it will say that there are script errors. I would generally recommend to get familiar with either
of those because otherwise javascript development won't be a lot of fun ;)
Best Regards, Wulf
-----Original Message-----
From: joch40 [mailto:janko.jochimsen@urios-beratung.de]
Sent: Montag, 17. Oktober 2011 00:36
To: users@tapestry.apache.org
Subject: Re: Practical jQuery Integration
Hello Sigbjørn,
I have seen https://github.com/got5/tapestry5-jquery , but this seems to
work only in tml / <script> like way and there is even less documentation.
So I didn´t followed this track.
And yes I have read
http://wiki.apache.org/tapestry/Tapestry5HowToIntegrateJQuery, but its
outdated and mainly concerned with the noConflict problem. (I seems that I
at least I have solved that).
Thanks for the reaction and direction anyhow
Cheers
Janko
On 16 October 2011 23:42, joch40 <janko.jochimsen@> wrote:
> Hi,
>
> Sorry for being unclear and thanks for your question.
>
> It simply dosen´t work.
>
> In the tml version - as in the original version - the alert pop´s up after
> you try to click an Link and you don´t go to the target side.
>
> In my version the systems simply goes to the target site without any
> alert.
>
>
> Cheers
>
> Janko
>
> --
> View this message in context:
> http://tapestry.1045711.n5.nabble.com/Practical-jQuery-Integration-tp4906814p4907863.html
> Sent from the Tapestry - User mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@.apache
> For additional commands, e-mail: users-help@.apache
>
>
Hi.
There seems to be a replacement module at
https://github.com/got5/tapestry5-jquery which will inject the jQuery
library for you.
If that does not work, have you tried to follow the guide at
http://wiki.apache.org/tapestry/Tapestry5HowToIntegrateJQuery ?
(ps: I have not used jQuery in my t5 pages)
regards
Sigbjørn Tvedt
On 16 October 2011 23:42, joch40 <janko.jochimsen@> wrote:
> Hi,
>
> Sorry for being unclear and thanks for your question.
>
> It simply dosen´t work.
>
> In the tml version - as in the original version - the alert pop´s up after
> you try to click an Link and you don´t go to the target side.
>
> In my version the systems simply goes to the target site without any
> alert.
>
>
> Cheers
>
> Janko
>
> --
> View this message in context:
> http://tapestry.1045711.n5.nabble.com/Practical-jQuery-Integration-tp4906814p4907863.html
> Sent from the Tapestry - User mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@.apache
> For additional commands, e-mail: users-help@.apache
>
>
--
View this message in context: http://tapestry.1045711.n5.nabble.com/Practical-jQuery-Integration-tp4906814p4907978.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: Practical jQuery Integration
Posted by joch40 <ja...@urios-beratung.de>.
Hello Sigbjørn,
I have seen https://github.com/got5/tapestry5-jquery , but this seems to
work only in tml / <script> like way and there is even less documentation.
So I didn´t followed this track.
And yes I have read
http://wiki.apache.org/tapestry/Tapestry5HowToIntegrateJQuery, but its
outdated and mainly concerned with the noConflict problem. (I seems that I
at least I have solved that).
Thanks for the reaction and direction anyhow
Cheers
Janko
On 16 October 2011 23:42, joch40 <janko.jochimsen@> wrote:
> Hi,
>
> Sorry for being unclear and thanks for your question.
>
> It simply dosen´t work.
>
> In the tml version - as in the original version - the alert pop´s up after
> you try to click an Link and you don´t go to the target side.
>
> In my version the systems simply goes to the target site without any
> alert.
>
>
> Cheers
>
> Janko
>
> --
> View this message in context:
> http://tapestry.1045711.n5.nabble.com/Practical-jQuery-Integration-tp4906814p4907863.html
> Sent from the Tapestry - User mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@.apache
> For additional commands, e-mail: users-help@.apache
>
>
Hi.
There seems to be a replacement module at
https://github.com/got5/tapestry5-jquery which will inject the jQuery
library for you.
If that does not work, have you tried to follow the guide at
http://wiki.apache.org/tapestry/Tapestry5HowToIntegrateJQuery ?
(ps: I have not used jQuery in my t5 pages)
regards
Sigbjørn Tvedt
On 16 October 2011 23:42, joch40 <janko.jochimsen@> wrote:
> Hi,
>
> Sorry for being unclear and thanks for your question.
>
> It simply dosen´t work.
>
> In the tml version - as in the original version - the alert pop´s up after
> you try to click an Link and you don´t go to the target side.
>
> In my version the systems simply goes to the target site without any
> alert.
>
>
> Cheers
>
> Janko
>
> --
> View this message in context:
> http://tapestry.1045711.n5.nabble.com/Practical-jQuery-Integration-tp4906814p4907863.html
> Sent from the Tapestry - User mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@.apache
> For additional commands, e-mail: users-help@.apache
>
>
--
View this message in context: http://tapestry.1045711.n5.nabble.com/Practical-jQuery-Integration-tp4906814p4907978.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: Practical jQuery Integration
Posted by Sigbjørn Tvedt <si...@gmail.com>.
Hi.
There seems to be a replacement module at
https://github.com/got5/tapestry5-jquery which will inject the jQuery
library for you.
If that does not work, have you tried to follow the guide at
http://wiki.apache.org/tapestry/Tapestry5HowToIntegrateJQuery ?
(ps: I have not used jQuery in my t5 pages)
regards
Sigbjørn Tvedt
On 16 October 2011 23:42, joch40 <ja...@urios-beratung.de> wrote:
> Hi,
>
> Sorry for being unclear and thanks for your question.
>
> It simply dosen´t work.
>
> In the tml version - as in the original version - the alert pop´s up after
> you try to click an Link and you don´t go to the target side.
>
> In my version the systems simply goes to the target site without any alert.
>
>
> Cheers
>
> Janko
>
> --
> View this message in context:
> http://tapestry.1045711.n5.nabble.com/Practical-jQuery-Integration-tp4906814p4907863.html
> Sent from the Tapestry - User mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
Re: Practical jQuery Integration
Posted by joch40 <ja...@urios-beratung.de>.
Hi,
Sorry for being unclear and thanks for your question.
It simply dosen´t work.
In the tml version - as in the original version - the alert pop´s up after
you try to click an Link and you don´t go to the target side.
In my version the systems simply goes to the target site without any alert.
Cheers
Janko
--
View this message in context: http://tapestry.1045711.n5.nabble.com/Practical-jQuery-Integration-tp4906814p4907863.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: Practical jQuery Integration
Posted by Muhammad Gelbana <m....@gmail.com>.
I don't think you mentioned your problem. What goes wrong ?!
On Sun, Oct 16, 2011 at 1:55 PM, joch40
<ja...@urios-beratung.de>wrote:
> Hello,
>
> I am quiet new to Tapestry and a bit lost in the moment. I try to integrate
> jquery in my project. I learn about the $ sign Problem I managed to
> integrate the Alert-Sample from
>
> http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
> http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
>
> into a tml page:
>
> this looks like the following and works
> <ul>
> </ul>
> <li> http://jquery.com/ jQuery </li>
>
>
>
>
>
>
> Now I would like to get the same thing done in an extra MyJQueryAlert.java
> Class.
>
> So I changed the tml page to
>
> <ul>
> <li> http://jquery.com/ jQuery </li>
> <div t:type="MyJQueryAlert" value="alert"/>
> </ul>
>
>
> And created an MyJQueryAlert.java in changing an working Example for
> Scriptaculous
>
>
> public class MyJQueryAlert {
>
> @Inject
> @Path("jquery-1.6.4.js")
> private Asset myAlert;
>
> @Environmental
> private JavaScriptSupport javaScriptSupport;
>
> public static final String EVENT_NAME = "alert";
> private static final String PARAM_NAME = "t:MyJQueryAlert";
>
> @Parameter(required = true)
> private String value;
>
> @Inject
> private ComponentResources resources;
>
> @Log
> void setupRender() {
> javaScriptSupport.importJavaScriptLibrary(myAlert);
> }
>
> @Log
> void afterRender(MarkupWriter writer) {
> String elementName = resources.getElementName();
> if (elementName == null)
> elementName = "span";
>
> String clientId =
> javaScriptSupport.allocateClientId(resources.getId());
> writer.element(elementName, "id", clientId);
> resources.renderInformalParameters(writer);
> if (value != null)
> writer.write(value);
> writer.end();
> JSONObject config = new JSONObject();
> config.put("paramName", PARAM_NAME);
> String scriptstring = "jQuery.noConflict();
> jQuery(document).ready(function(){ jQuery(%s).click(function(event){
> alert(%s); event.preventDefault(); }); });";
>
> Link link = resources.createEventLink(EVENT_NAME);
> javaScriptSupport.addScript(scriptstring, "a",
> "Test Alarm");
> }
>
> }
>
> To be honest I don´t understand all things that are going on here and for
> sure this doesn´t work.
>
> The Log shows that afterRender gets called and that jquery-1.6.4.js has
> been
> found.
>
> I searched quiet a while but there seems to be not help for this Problem.
> So
> can anybody give me an advice.
>
>
> Thanks
>
> Janko
>
>
>
>
> --
> View this message in context:
> http://tapestry.1045711.n5.nabble.com/Practical-jQuery-Integration-tp4906814p4906814.html
> Sent from the Tapestry - User mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
--
*Regards,*
*Muhammad Gelbana
Java Developer*