[Catalyst] Ajax Problem.

Rohan M rohan7799 at gmail.com
Fri Jan 7 09:06:35 GMT 2011


Dear All,

Thank you for giving your ideas/thoughts and explaining the things.

Thanks Mahmoud, this example helped me completing the task.

I've used Jemplate, jQuery, JSON to complete my task. I'm writing few more
details.. ( adding my stuff in Mahmoud's code) - this might be helpful for
somebody else..

=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D

lets say that you have the following controller /test/ajax

sub ajax : Local {

    my ($self,$c) =3D @_;

    my $params =3D $c->req->parameters;
    my $id =3D $params->{id};
  #do what ever you want with id

  ##response type

    $c->response->content_type("application/json");

    ##send request in json format, this is just an example :)

   $c->res->body(qq~{
     "books": {
        "book1": "firstbook",
        "book2": "secondbook"
    }
   }~);


   ## another way to put data in JSON format is using "JSON" module
   ## use JSON;

   my %data =3D("id"=3D>123,"name"=3D>'rohan')
   my $json_text =3D to_json(\%data);
   $c->res->body($json_text);

}

=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D In template [html]  =
files =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
your jquery

 $(document).ready(function() {
         var test =3D 1;

         $.ajax({
            url: '/test/ajax',
            data: 'id=3D'+test,
            dataType: 'json',
            type: 'get',
            success: function (j) {
                var elem =3D document.getElementById('elementDiv');
Jemplate.process('display.tt2',j,elem);
            },
            error: function(xhr, ajaxOptions, thrownError){
                alert(xhr.statusText);
            }
            });
});

=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
Install Jemplate module and configure Jemplate in Root.pm of the
application.

The directory which point to MyApp->path_to( 'root', 'jemplate'), is the
directory to put the Jemplate files.
Basically Jemplate files are (like) Template Toolkit files. Put display.tt2
in the Jemplate directory.
Display the variables in desired format.
 e.g display.tt2

<table>
<tr class=3D"Header" >
<td>id</td><td>name</td>
</tr>
<tr >
<td>[% id | html %]</td><td>[% name | html %]</td>
</tr>
</table>

The Jemplate html will get rendered in the element "elementDiv"
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D

Thanks Mehmoud for the code...

Regards,

Rohan
Bioinformatician

On Thu, Jan 6, 2011 at 7:37 PM, Mahmoud Mehyar <mamod.mehyar at gmail.com>wrot=
e:

> sorry first one sent by mistake
>
> use success method instead of complete as complete will return if the
> response is ok or false and try to catch errors
> with error method
>
> put your jqury inside document ready function "recommended"
>
> lets say that you have the following controller /test/ajax
>
> sub ajax : Local {
>
>
>     my ($self,$c) =3D @_;
>
>     my $params =3D $c->req->parameters;
>     my $id =3D $params->{id};
>   #do what ever you want with id
>
>   ##response type
>
>     $c->response->content_type("application/json");
>
>     ##send request in json format, this is just an example :)
>
> $c->res->body(qq~{
>   "books": {
>     "book1": "firstbook",
>     "book2": "secondbook"
>   }
> }~);
>
> }
>
>
> your jquery
>
>
>  $(document).ready(function() {
>
>         var test =3D 1;
>
>          $.ajax({
>             url: '/test/ajax',
>             data: 'id=3D'+test,
>             dataType: 'json',
>             type: 'get',
>             success: function (j) {
>                 alert(j.books.book1);
>             },
>             error: function(xhr, ajaxOptions, thrownError){
>                 alert(xhr.statusText);
>             }
>             });
> });
>
> hope this help, always catch errors either with jquery or catalys  to find
> where the problem is to fix
>
>
> On Thu, Jan 6, 2011 at 5:02 PM, Mahmoud Mehyar <mamod.mehyar at gmail.com>wr=
ote:
>
>> ok I'm not familiar with jemplate but I'll post a simple example with
>> jquery and catalyst that might help you
>>
>> first for the jquery
>>
>> use success method instead of complete as complete will return if the
>> response is ok or false and try to catch errors
>> with error method
>>
>> put your jqury inside document ready function "recommended"
>>
>> lets say that you have the following controller /test/ajax
>>
>> sub index : Private {
>>
>>     my ($self,$c) =3D @_;
>>
>>     my $params =3D $c->req->parameters;
>>     my $id =3D $params->{id};
>>
>>
>>
>>     $c->response->content_type("application/json");
>>
>>
>> $c->res->body(qq~{
>>   "books": {
>>     "book1": "firstbook",
>>     "book2": "secondbook"
>>   }
>> }~);
>> #}
>>
>> }
>>
>>  $(document).ready(function() {
>>
>>         var test =3D 1;
>>          $.ajax({
>>             url: '/test/ajax',
>>             data: 'id=3D'+test,
>>             dataType: 'json',
>>             type: 'get',
>>             success: function (j) {
>>                 alert(j.books.book1);
>>             },
>>             error: function(xhr, ajaxOptions, thrownError){
>>                 alert(xhr.statusText);
>>             }
>>             });
>> });
>>
>>
>>
>>
>>
>> On Thu, Jan 6, 2011 at 4:05 PM, Rohan M <rohan7799 at gmail.com> wrote:
>>
>>> Dear All,
>>>
>>> After hearing from you all ,  I'm tried Jquery and Jemplate but I'm not
>>> able to create JSON object of my data.
>>>
>>> The thing I want to do is --
>>>
>>> 1) Onblur event of input box - take id and search database
>>> 2) Render data returned from Ajax call in table format.
>>>
>>> For this, I've used following code
>>>
>>>           $.ajax({
>>>  url: '/controller/action/',
>>> data: 'id=3D'+var,
>>> dataType: 'json',
>>>  type: 'get',
>>> complete: function (j) {
>>> var elem =3D document.getElementById("elementToRender");
>>>  Jemplate.process('show.tt2',j, elem);
>>> }
>>> });
>>>
>>> **My action is not returning anything instead, I've action.tt2 which is
>>> getting returned with required database output.**
>>>
>>>
>>> I searched on net and found "'Catalyst::View::JSON" but even after addi=
ng
>>> JSON.pm I'm unable to convert data into JSON object.
>>>
>>> Please correct me, as I must be doing something wrong.
>>>
>>> Thanks and regards,
>>> Rohan
>>>
>>> On Thu, Jan 6, 2011 at 10:37 AM, Rohan M <rohan7799 at gmail.com> wrote:
>>>
>>>> Thanks all for looking into this..
>>>>
>>>> I've created a template (i.e action.tt) file and the variables in stash
>>>> are rendered in this page. The HTML's element is getting rendered with=
 the
>>>> output from Ajax call.
>>>>
>>>> The problem now is, I see my main page and the action page (rendered
>>>> from ajax) together. Just because the "action.tt" takes the default
>>>> style I see entire page duplication(with menus, status, links) in the
>>>> rendered element of main page.
>>>>
>>>> Can we make a template without taking default style available for site?
>>>>
>>>> Also, I'm pretty much open to any of the Javascript framework, I know
>>>> little about JQuery also. But I want to see a small demo which is inte=
grated
>>>> with Catalyst.
>>>>
>>>> Do somebody have such demo or link for the same?
>>>>
>>>> Thanks,
>>>> ROhan
>>>> On Wed, Jan 5, 2011 at 11:14 PM, Mesdaq, Ali <amesdaq at websense.com>wro=
te:
>>>>
>>>>> I recommend testing this using Firefox with Firebug enabled so you can
>>>>> watch the AJAX request and you can also print to the console to see w=
hat
>>>>> your response looks like to make sure it=92s what you=92re expecting
>>>>>
>>>>>
>>>>>
>>>>> console.log(xmlhttp.responseText);
>>>>>
>>>>> document.getElementById("data").innerHTML=3Dxmlhttp.responseText;
>>>>>
>>>>>
>>>>>
>>>>> Thanks,
>>>>>
>>>>> ------------------------------------------
>>>>>
>>>>> Ali Mesdaq (CISSP, GIAC-GREM)
>>>>>
>>>>> Sr. Security Researcher
>>>>>
>>>>> Websense Security Labs
>>>>>
>>>>> http://www.WebsenseSecurityLabs.com<http://www.websensesecuritylabs.c=
om/>
>>>>>
>>>>> ------------------------------------------
>>>>>
>>>>>
>>>>>
>>>>> *From:* Rohan M [mailto:rohan7799 at gmail.com]
>>>>> *Sent:* Wednesday, January 05, 2011 3:07 AM
>>>>> *To:* catalyst at lists.scsys.co.uk
>>>>> *Subject:* [Catalyst] Ajax Problem.
>>>>>
>>>>>
>>>>>
>>>>> Dear All,
>>>>>
>>>>>
>>>>>
>>>>> I want to use Ajax in my Catalyst application.
>>>>>
>>>>>
>>>>>
>>>>> Thing's that I've done till now :
>>>>>
>>>>>
>>>>>
>>>>> 1) Created a Javascript function on an event (onblur event) in my view
>>>>> (tt page).
>>>>>
>>>>> 2) Created xmlhttp object in that Javascript function.
>>>>>
>>>>> 3) Called the '/controller/action' path with parameters.
>>>>>
>>>>> 4) The Action subroutine searches database and puts results in the *
>>>>> stash*
>>>>>
>>>>>
>>>>>
>>>>> I could see, the things are working till the fourth step correctly.
>>>>>
>>>>>
>>>>>
>>>>> Now, how can I render the stash variables in the current tt page?
>>>>>
>>>>>
>>>>>
>>>>> Or Will I need to parse the entire content?
>>>>>
>>>>>
>>>>>
>>>>> Is there a better solution for this problem?
>>>>>
>>>>>
>>>>>
>>>>> Any help or similar (simple) example will be appreciable.
>>>>>
>>>>>
>>>>>
>>>>> CODE SNIPPET
>>>>>
>>>>> =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
>>>>>
>>>>>
>>>>>
>>>>> function getDetails(id)
>>>>>
>>>>>             {
>>>>>
>>>>>                         var param =3D "id=3D"+id;
>>>>>
>>>>>                         if (window.XMLHttpRequest)
>>>>>
>>>>>                         {
>>>>>
>>>>>                                     xmlhttp=3Dnew XMLHttpRequest();
>>>>>
>>>>>                         }
>>>>>
>>>>>                         else
>>>>>
>>>>>                         {
>>>>>
>>>>>                                     xmlhttp=3Dnew
>>>>> ActiveXObject("Microsoft.XMLHTTP");
>>>>>
>>>>>                         }
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> xmlhttp.open("GET","/indexer/getid/"+"?"+param,true);
>>>>>
>>>>>                 // /controller/action url
>>>>>
>>>>>                         xmlhttp.send();
>>>>>
>>>>>                         xmlhttp.onreadystatechange=3Dfunction()
>>>>>
>>>>>                         {
>>>>>
>>>>>                                     if (xmlhttp.readyState=3D=3D4 &&
>>>>> xmlhttp.status=3D=3D200)
>>>>>
>>>>>                                     {
>>>>>
>>>>>
>>>>> document.getElementById("data").innerHTML=3Dxmlhttp.responseText;
>>>>>
>>>>>                                 // the element to render output
>>>>>
>>>>>                                     }
>>>>>
>>>>>                         }
>>>>>
>>>>>                         show();
>>>>>
>>>>>
>>>>>
>>>>>             }
>>>>>
>>>>>
>>>>>
>>>>> =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> Thanks and regards,
>>>>>
>>>>> Rohan
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> Click here <https://www.mailcontrol.com/sr/wQw0zmjPoHdJTZGyOCrrhg=3D=
=3D>to report this email as spam.
>>>>>
>>>>>
>>>>> Protected by Websense Hosted Email Security =97 www.websense.com
>>>>>
>>>>> _______________________________________________
>>>>> List: Catalyst at lists.scsys.co.uk
>>>>> Listinfo: http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst
>>>>> Searchable archive:
>>>>> http://www.mail-archive.com/catalyst@lists.scsys.co.uk/
>>>>> Dev site: http://dev.catalyst.perl.org/
>>>>>
>>>>>
>>>>
>>>
>>> _______________________________________________
>>> List: Catalyst at lists.scsys.co.uk
>>> Listinfo: http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst
>>> Searchable archive:
>>> http://www.mail-archive.com/catalyst@lists.scsys.co.uk/
>>> Dev site: http://dev.catalyst.perl.org/
>>>
>>>
>>
>
> _______________________________________________
> List: Catalyst at lists.scsys.co.uk
> Listinfo: http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst
> Searchable archive:
> http://www.mail-archive.com/catalyst@lists.scsys.co.uk/
> Dev site: http://dev.catalyst.perl.org/
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.scsys.co.uk/pipermail/catalyst/attachments/20110107/503eb=
151/attachment.htm


More information about the Catalyst mailing list