[play-framework] [2.0] How implement AJAX by using Jquery in Play 2.0?

4,817 views
Skip to first unread message

eson

unread,
May 25, 2012, 8:54:56 AM5/25/12
to play-fr...@googlegroups.com

Hi,

     Am new to play 2.0, how I will develop Ajax call in play 20 framework by using Jquery.

     Example, Display given Name value in any <div>?

Thanks,

Eson.

biesior

unread,
May 25, 2012, 9:01:41 AM5/25/12
to play-fr...@googlegroups.com
eson'

AJAX calls are part of jQuery, you should start from there http://api.jquery.com/jQuery.ajax/

techpost it

unread,
May 25, 2012, 9:21:20 AM5/25/12
to play-fr...@googlegroups.com
Hi,
    would you give me any sample code by using Play 2.0?..
Thanks,
Eson.

--
You received this message because you are subscribed to the Google Groups "play-framework" group.
To view this discussion on the web visit https://groups.google.com/d/msg/play-framework/-/sE1srOY5lfQJ.

To post to this group, send email to play-fr...@googlegroups.com.
To unsubscribe from this group, send email to play-framewor...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/play-framework?hl=en.



--
Thanks,
  Eson.

Message has been deleted

biesior

unread,
May 25, 2012, 10:51:24 AM5/25/12
to play-fr...@googlegroups.com
hm

somewhere in your view paste:

Answer from server:
<div class="result" style="border: 1px solid black; padding: 5px;">not sent yet...</div>

<div id="items">
    <a href="@routes.Application.user(1)" >Select user 1</a>
    <a href="@routes.Application.user(2)" >Select user 2</a>
    <a href="@routes.Application.user(3)" >Select user 3</a>
</div>

<script type="text/javascript">
    jQuery("#items a").click(
            function () {
                $.get(jQuery(this).attr("href"), function (data) {
                    $('.result').html(data);
                });
                return false;
            }
    )
</script>

in controllers/Application.java add:

    public static Result user(Long id){
        return ok("Play's controller told that you're about to get data for user no. "+id);
    }

in conf/routes add:

GET   /user-name-ajax/:id     controllers.Application.user(id:Long)


That's basic sample, there are thousands of possibilities to make it more useful

BTW please don't publish my email address anymore





W dniu piątek, 25 maja 2012 15:21:20 UTC+2 użytkownik eson napisał:
Hi,

techpost it

unread,
May 28, 2012, 1:25:19 AM5/28/12
to play-fr...@googlegroups.com
Hi Biesior,
  Thanks, its working, but the output will be displayed in next page, not in that same div ( result) tag page.
Thanks,
Eson.

--
You received this message because you are subscribed to the Google Groups "play-framework" group.
To view this discussion on the web visit https://groups.google.com/d/msg/play-framework/-/FZeOU_QyOPEJ.

To post to this group, send email to play-fr...@googlegroups.com.
To unsubscribe from this group, send email to play-framewor...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/play-framework?hl=en.



--
Thanks,
  Eson.

biesior

unread,
May 28, 2012, 1:42:01 AM5/28/12
to play-fr...@googlegroups.com
ellou' Eson

The sample I sent is typical, what's more I tested it before sending the answer to avoid the typos in it and it works.

Make sure you have return false; included in your script, you can also include it directly in A tag:

<a href="@routes.Application.user(1)" onclick="return false;" >Select user 1</a>

greetings biesior

biesior

unread,
May 28, 2012, 1:59:33 AM5/28/12
to play-fr...@googlegroups.com
BTW, of course I assumed that you included jquery in you main template <head> section, without it the sample won't work indeed... make sure it's there, if not, add this to your main template (there where you have full HTML document declaration):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>


W dniu poniedziałek, 28 maja 2012 07:25:19 UTC+2 użytkownik eson napisał:

techpost it

unread,
May 28, 2012, 2:08:06 AM5/28/12
to play-fr...@googlegroups.com
Hi,
  i gave the onclick="return false;" in <a href .../> and in java script also. but the value begin displayed in next page.

--
You received this message because you are subscribed to the Google Groups "play-framework" group.
To view this discussion on the web visit https://groups.google.com/d/msg/play-framework/-/B36a7w16q8AJ.

To post to this group, send email to play-fr...@googlegroups.com.
To unsubscribe from this group, send email to play-framewor...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/play-framework?hl=en.



--
Thanks,
  Eson.

biesior

unread,
May 28, 2012, 2:21:37 AM5/28/12
to play-fr...@googlegroups.com
And it should not, use for an example `FireBug` in `FireFox` or some other developer tool in your browser, what's wrong with the JS (return false; should avoid default browser action)

If you're using IE check this: http://stackoverflow.com/questions/5890895/ie-follows-link-even-after-onclick-return-false (or try to find similar topics according to your test browser)

techpost it

unread,
May 28, 2012, 3:05:29 AM5/28/12
to play-fr...@googlegroups.com
hi,
    i ran simple example for returning false vale for java script, its working fine in IE. but my Play 2.0 implemented code, which is with your guidance is not working even in IE 8.

index.scala.html:

@(helloForm: Form[Application.Hello])
@import helper._
@main(title = "Login application") {

 <head>
            <title>Demo Vanillaconnect</title>
            <link rel="stylesheet" type="text/css" media="screen"
                  href="@routes.Assets.at("stylesheets/bootstrap.min.css")">
            <link rel="stylesheet" type="text/css" media="screen"
                  href="@routes.Assets.at("stylesheets/main.css")">
            <script type="text/javascript" src="@routes.Application.javascriptRoutes">
              </script>
           
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
             type="text/javascript"></script>
        <script type="text/javascript">
            jQuery("#items a").click(
                    function () {
                        $.get(jQuery(this).attr("href"), function (data) {
                            $("#result").html(data);

                        });
                        return false;
                    }
            )
       
         </script>
    </head>
    <script>
    $(function() {
        $( "#tabs" ).tabs();
    });
  
}
user_name_ajax.scala.html:

    <div id="items">

        <a href="@routes.Application.user(1)" onclick="return false;">Select user 1</a>
        <a href="@routes.Application.user(2)" onclick="return false;">Select user 2</a>
        <a href="@routes.Application.user(3)" onclick="return false;">Select user 3</a>
    </div>

but its not rendering in same page. why?.

--
You received this message because you are subscribed to the Google Groups "play-framework" group.
To view this discussion on the web visit https://groups.google.com/d/msg/play-framework/-/wpMoqu3oFQIJ.

To post to this group, send email to play-fr...@googlegroups.com.
To unsubscribe from this group, send email to play-framewor...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/play-framework?hl=en.



--
Thanks,
  Eson.

techpost it

unread,
May 28, 2012, 3:06:48 AM5/28/12
to play-fr...@googlegroups.com
not next page also....
--
Thanks,
  Eson.

Steve Chaloner

unread,
May 29, 2012, 7:59:08 AM5/29/12
to play-fr...@googlegroups.com
I wrote a guide on this at http://www.objectify.be/wordpress/?p=428 - hope it helps

techpost it

unread,
May 29, 2012, 8:49:38 AM5/29/12
to play-fr...@googlegroups.com
HI,
   Thanks, would you add any full code sample project..?

--
You received this message because you are subscribed to the Google Groups "play-framework" group.
To view this discussion on the web visit https://groups.google.com/d/msg/play-framework/-/gGDISLp2V9EJ.

To post to this group, send email to play-fr...@googlegroups.com.
To unsubscribe from this group, send email to play-framewor...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/play-framework?hl=en.



--
Thanks,
  Eson.

biesior

unread,
May 29, 2012, 10:04:24 AM5/29/12
to play-fr...@googlegroups.com
Not just pure ajax sample, but you can check my sample calendar application (Java version) it uses jQuery for rendering calendar + AJAX for saving and fetching data from DB:

https://github.com/biesior/Play-20-Sample-FullCalendar-Java




W dniu wtorek, 29 maja 2012 14:49:38 UTC+2 użytkownik eson napisał:
HI,
   Thanks, would you add any full code sample project..?

On Tue, May 29, 2012 at 5:29 PM, Steve Chaloner :

I wrote a guide on this at http://www.objectify.be/wordpress/?p=428 - hope it helps


On Friday, 25 May 2012 14:54:56 UTC+2, eson wrote:

Hi,

     Am new to play 2.0, how I will develop Ajax call in play 20 framework by using Jquery.

     Example, Display given Name value in any <div>?

Thanks,

Eson.




--
Thanks,
  Eson.

techpost it

unread,
May 29, 2012, 11:56:17 PM5/29/12
to play-fr...@googlegroups.com
Hi,
   very thanks for your great work.

--
You received this message because you are subscribed to the Google Groups "play-framework" group.
To view this discussion on the web visit https://groups.google.com/d/msg/play-framework/-/AEjEiwiTrrIJ.

To post to this group, send email to play-fr...@googlegroups.com.
To unsubscribe from this group, send email to play-framewor...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/play-framework?hl=en.



--
Thanks,
  Eson.

Steve Chaloner

unread,
May 30, 2012, 8:31:04 AM5/30/12
to play-fr...@googlegroups.com
The examples in my blog post covers what you need to interact with Play - most importantly, the routes and method signatures.  Is there anything specific you want to know?


On Friday, 25 May 2012 14:54:56 UTC+2, eson wrote:

techpost it

unread,
May 30, 2012, 8:50:12 AM5/30/12
to play-fr...@googlegroups.com
HI,
    your post is so nice. Thanks.



--
You received this message because you are subscribed to the Google Groups "play-framework" group.
To view this discussion on the web visit https://groups.google.com/d/msg/play-framework/-/oegCey-uJcgJ.

To post to this group, send email to play-fr...@googlegroups.com.
To unsubscribe from this group, send email to play-framewor...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/play-framework?hl=en.



--
Thanks,
  Eson.

Stephane C

unread,
Oct 21, 2012, 12:38:48 PM10/21/12
to play-fr...@googlegroups.com
You have to construct an url such as :

myserver.com/ajaxfindsuggestions?query=<textboxcontent>, then in the targeted controller, you write the logic for finding matching entries and you return those in the response (typically under the form a json string). On request success you populate your suggestions list and make it appear by dynamically manipulating CSS... 

But as far as I know, jquery UI has an implementation of an ajax autocompleter which may do exactly what you want.

On Saturday, October 20, 2012 4:46:55 PM UTC+2, saggy wrote:
Hi 
sending with href works fine
but how about sending a javascript variable.
cause for me its just sending variables name not value.
i want to send a textbox value on keyup event to make an autocomplete feature on textbox

Indies tester

unread,
Jan 7, 2013, 6:31:44 AM1/7/13
to play-fr...@googlegroups.com
Hey biesior you are great you just solved my problem. Thanks a lot you saved a lot of time.

Indies tester

unread,
Jan 7, 2013, 6:42:42 AM1/7/13
to play-fr...@googlegroups.com
Hey biesior,
                  Can you please suggest how can i use this ajax-jquery call using button click??
Message has been deleted

Indies tester

unread,
Jan 7, 2013, 7:54:59 AM1/7/13
to play-fr...@googlegroups.com
Hey biesior,
Thanks for the ajax solution, you saved a lot of time of mine. Can you please suggest how to call with a dynamic data like this:

<input type="button" value="Add Product" name="@routes.Application.
user(@product.product_id)" id="but"/>

I am not allowed to use this way. Any help will be appreciated.

Reply all
Reply to author
Forward
0 new messages