You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Angelo Chen <an...@yahoo.com.hk> on 2007/10/06 16:14:07 UTC
T5: A simple Ajax need(JQuery)
Hi,
I have a very simple Ajax need, here is the situation:
My page will display a blog, when user click 'more comments', I'd like to
load a T5 page into a DIV provided, so basically, the page is like this:
<p>my blog's text goes here</p>
<div id="comments"></div>
the js will be like this:
$('#more_comments').click(function() {
$('#comments').load('/getcomment');
got some questions: 1. simply passing the url '/getcomment' to load is
enough? how to pass blog ID as parameters? 2. if above steps not correct,
any other way to achive this? Thanks,
A.C.
--
View this message in context: http://www.nabble.com/T5%3A-A-simple-Ajax-need%28JQuery%29-tf4580040.html#a13074090
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: T5: A simple Ajax need(JQuery)
Posted by Angelo Chen <an...@yahoo.com.hk>.
Hi Borut,
This works, now T5 and JQuery is getting interesting, still can't figure out
something as of now, example: this url, 'myPage', if the context is 'myapp',
then have to hardcode it like '/myapp/myPage', also if I want to pass a
parameter. anyway your tip makes my day productive:) Thanks,
A.C.
Borut Bolčina-2 wrote:
>
> Hello Angelo,
>
> in case you stil need a hint - here it is (off the top of my head)
>
> ****** TEMPLATE *****
> <script>
> function asyncCall () {
> $.ajax({
> url: "myPage", // i think case doesn't matter
> success: function(msg){
> alert(msg); // <-- try with small page that will
> fit
> the alert dialog
> }
> });
> }
> </script>
>
>
--
View this message in context: http://www.nabble.com/T5%3A-A-simple-Ajax-need%28JQuery%29-tf4580040.html#a13112756
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: T5: A simple Ajax need(JQuery)
Posted by Borut Bolčina <bo...@gmail.com>.
Hello Angelo,
in case you stil need a hint - here it is (off the top of my head)
****** TEMPLATE *****
<script>
function asyncCall () {
$.ajax({
url: "myPage", // i think case doesn't matter
success: function(msg){
alert(msg); // <-- try with small page that will fit
the alert dialog
}
});
}
</script>
****** TEMPLATE MyPage.htm*****
<html>
<body>
<p>Hello from MyPage</p>
</body>
</html>
Cheers,
Borut
2007/10/8, Angelo Chen <an...@yahoo.com.hk>:
>
>
> Hi Borut,
>
> Your tip works well, thanks. now this jQuery really make Ajax an easy task
> in T5. in another case, say, i would like to do this:
>
> $('#stats').load('Stats1.html');
>
> this is easy if Stats1.html is just a plain html, if It's a T5 page,
> exampe,
> I'd like T5 to render a page and the result will be 'loaded', any idea how
> to do this? thanks.
> A.C.
>
>
>
> Borut Bolčina-2 wrote:
> >
> > Hello Angelo,
> >
> > look how variable url is constructed.
> >
> >
> >
>
> --
> View this message in context:
> http://www.nabble.com/T5%3A-A-simple-Ajax-need%28JQuery%29-tf4580040.html#a13089752
> 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: T5: A simple Ajax need(JQuery)
Posted by Angelo Chen <an...@yahoo.com.hk>.
Hi Borut,
Your tip works well, thanks. now this jQuery really make Ajax an easy task
in T5. in another case, say, i would like to do this:
$('#stats').load('Stats1.html');
this is easy if Stats1.html is just a plain html, if It's a T5 page, exampe,
I'd like T5 to render a page and the result will be 'loaded', any idea how
to do this? thanks.
A.C.
Borut Bolčina-2 wrote:
>
> Hello Angelo,
>
> look how variable url is constructed.
>
>
>
--
View this message in context: http://www.nabble.com/T5%3A-A-simple-Ajax-need%28JQuery%29-tf4580040.html#a13089752
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: T5: A simple Ajax need(JQuery)
Posted by Borut Bolčina <bo...@gmail.com>.
Hello Angelo,
look how variable url is constructed.
******** TEMPLATE (tml) ********
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
<head>
<title>AjaxJQueryTask2</title>
<script type="text/javascript" src="${jquery}"></script>
</head>
<body>
<h1>AjaxJQueryTask2</h1>
<input type="text" id="userid" name="id"
onkeyup="validate();"/>
<div id="userIdMessage">status</div>
<script>
function validate() {
var idField = document.getElementById("userid");
var url = "${theLink}/" + encodeURIComponent(
idField.value);
$.ajax({
url: url,
success: function(response){
parseMessage(response);
},
error: function(){ alert('Something went wrong...') }
});
}
function parseMessage(response) {
var message = response.getElementsByTagName("message")[0];
setMessage(message.childNodes[0].nodeValue);
}
function setMessage(message) {
var userMessageElement = document.getElementById
("userIdMessage");
var messageText;
if (message == "invalid") {
userMessageElement.style.color = "red";
messageText = "Invalid User Id";
} else {
userMessageElement.style.color = "green";
messageText = "Valid User Id";
}
var messageBody = document.createTextNode(messageText);
// if the messageBody element has been created simple
replace it otherwise
// append the new element
if (userMessageElement.childNodes[0]) {
userMessageElement.replaceChild(messageBody,
userMessageElement.childNodes[0]);
} else {
userMessageElement.appendChild(messageBody);
}
}
</script>
</body>
</html>
And now pay attention to a method onMyAction
******** CLASS ********
package org.example.tapestry.pages.ajax;
import java.util.HashMap;
import org.apache.tapestry.Asset;
import org.apache.tapestry.ComponentResources;
import org.apache.tapestry.Link;
import org.apache.tapestry.StreamResponse;
import org.apache.tapestry.annotations.Inject;
import org.apache.tapestry.annotations.Path;
import org.apache.tapestry.util.TextStreamResponse;
public class AjaxJQueryTask2 {
@Inject
@Path("context:assets/jquery-1.2.1.js")
private Asset _jquery;
private HashMap<String, String> users = new HashMap<String, String>();
void pageLoaded() {
System.out.println("AjaxTests PageLoaded");
users.put("greg", "account 1");
users.put("duke", "account 2");
}
@Inject
private ComponentResources _resources;
/**
* Generates a URI to the server-side function for the XHR to use.
*
* @return the link
*/
public String getTheLink() {
Link l = _resources.createActionLink("myAction", false);
return l.toURI();
}
/**
* This is a server-side method called via XHR that returns some text.
*
* @return some text
*/
StreamResponse onMyAction(String id) {
String message;
if ((id != null) && users.containsKey(id.trim())) {
message = "<message>valid</message>";
} else {
message = "<message>invalid</message>";
}
return new TextStreamResponse("type/xml", message);
}
/**
* @return the prototype
*/
public Asset getJQuery() {
return _jquery;
}
/**
* @param jquery
* the prototype to set
*/
public void setJQuery(Asset jquery) {
_jquery = jquery;
}
}
I hope it helps.
Cheers,
Borut
2007/10/6, Angelo Chen <an...@yahoo.com.hk>:
>
>
> Hi,
>
> I have a very simple Ajax need, here is the situation:
>
> My page will display a blog, when user click 'more comments', I'd like to
> load a T5 page into a DIV provided, so basically, the page is like this:
>
> <p>my blog's text goes here</p>
> <div id="comments"></div>
>
> the js will be like this:
>
> $('#more_comments').click(function() {
> $('#comments').load('/getcomment');
>
> got some questions: 1. simply passing the url '/getcomment' to load is
> enough? how to pass blog ID as parameters? 2. if above steps not correct,
> any other way to achive this? Thanks,
> A.C.
>
>
>
> --
> View this message in context:
> http://www.nabble.com/T5%3A-A-simple-Ajax-need%28JQuery%29-tf4580040.html#a13074090
> 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: T5: A simple Ajax need(JQuery)
Posted by Donyee <xy...@gmail.com>.
Try this!
<a t:type="pageLink" page="getcomment" context="blogId"
onclick="loadMoreComment(this.href); return false;"> <span>
LoadMore</span> </a>
2007/10/6, Angelo Chen <an...@yahoo.com.hk>:
>
> Hi,
>
> I have a very simple Ajax need, here is the situation:
>
> My page will display a blog, when user click 'more comments', I'd like to
> load a T5 page into a DIV provided, so basically, the page is like this:
>
> <p>my blog's text goes here</p>
> <div id="comments"></div>
>
> the js will be like this:
>
> $('#more_comments').click(function() {
> $('#comments').load('/getcomment');
>
> got some questions: 1. simply passing the url '/getcomment' to load is
> enough? how to pass blog ID as parameters? 2. if above steps not correct,
> any other way to achive this? Thanks,
> A.C.
>
>
>
> --
> View this message in context: http://www.nabble.com/T5%3A-A-simple-Ajax-need%28JQuery%29-tf4580040.html#a13074090
> 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
>
>
--
----徐 依伟