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..
======================================================
======================================================
lets say that you have the following controller /test/ajax
sub ajax : Local {
my ($self,$c) = @_;
my $params = $c->req->parameters;
my $id = $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 =("id"=>123,"name"=>'rohan')
my $json_text = to_json(\%data);
$c->res->body($json_text);
}
================== In template [html] files =================
your jquery
$(document).ready(function() {
var test = 1;
$.ajax({
url: '/test/ajax',
data: 'id='+test,
dataType: 'json',
type: 'get',
success: function (j) {
var elem = document.getElementById('elementDiv');
Jemplate.process('display.tt2',j,elem);
},
error: function(xhr, ajaxOptions, thrownError){
alert(xhr.statusText);
}
});
});
=====================================
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="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"
=============================================================
Thanks Mehmoud for the code...
Regards,
Rohan
Bioinformatician
On Thu, Jan 6, 2011 at 7:37 PM, Mahmoud Mehyar <[email protected]>wrote:
> 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) = @_;
>
> my $params = $c->req->parameters;
> my $id = $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 = 1;
>
> $.ajax({
> url: '/test/ajax',
> data: 'id='+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 <[email protected]>wrote:
>
>> 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) = @_;
>>
>> my $params = $c->req->parameters;
>> my $id = $params->{id};
>>
>>
>>
>> $c->response->content_type("application/json");
>>
>>
>> $c->res->body(qq~{
>> "books": {
>> "book1": "firstbook",
>> "book2": "secondbook"
>> }
>> }~);
>> #}
>>
>> }
>>
>> $(document).ready(function() {
>>
>> var test = 1;
>> $.ajax({
>> url: '/test/ajax',
>> data: 'id='+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 <[email protected]> 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='+var,
>>> dataType: 'json',
>>> type: 'get',
>>> complete: function (j) {
>>> var elem = 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 adding
>>> 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 <[email protected]> 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
>>>> integrated
>>>> 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 <[email protected]>wrote:
>>>>
>>>>> 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 what
>>>>> your response looks like to make sure it’s what you’re expecting
>>>>>
>>>>>
>>>>>
>>>>> console.log(xmlhttp.responseText);
>>>>>
>>>>> document.getElementById("data").innerHTML=xmlhttp.responseText;
>>>>>
>>>>>
>>>>>
>>>>> Thanks,
>>>>>
>>>>> ------------------------------------------
>>>>>
>>>>> Ali Mesdaq (CISSP, GIAC-GREM)
>>>>>
>>>>> Sr. Security Researcher
>>>>>
>>>>> Websense Security Labs
>>>>>
>>>>> http://www.WebsenseSecurityLabs.com<http://www.websensesecuritylabs.com/>
>>>>>
>>>>> ------------------------------------------
>>>>>
>>>>>
>>>>>
>>>>> *From:* Rohan M [mailto:[email protected]]
>>>>> *Sent:* Wednesday, January 05, 2011 3:07 AM
>>>>> *To:* [email protected]
>>>>> *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
>>>>>
>>>>> =======================================================================
>>>>>
>>>>>
>>>>>
>>>>> function getDetails(id)
>>>>>
>>>>> {
>>>>>
>>>>> var param = "id="+id;
>>>>>
>>>>> if (window.XMLHttpRequest)
>>>>>
>>>>> {
>>>>>
>>>>> xmlhttp=new XMLHttpRequest();
>>>>>
>>>>> }
>>>>>
>>>>> else
>>>>>
>>>>> {
>>>>>
>>>>> xmlhttp=new
>>>>> ActiveXObject("Microsoft.XMLHTTP");
>>>>>
>>>>> }
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> xmlhttp.open("GET","/indexer/getid/"+"?"+param,true);
>>>>>
>>>>> // /controller/action url
>>>>>
>>>>> xmlhttp.send();
>>>>>
>>>>> xmlhttp.onreadystatechange=function()
>>>>>
>>>>> {
>>>>>
>>>>> if (xmlhttp.readyState==4 &&
>>>>> xmlhttp.status==200)
>>>>>
>>>>> {
>>>>>
>>>>>
>>>>> document.getElementById("data").innerHTML=xmlhttp.responseText;
>>>>>
>>>>> // the element to render output
>>>>>
>>>>> }
>>>>>
>>>>> }
>>>>>
>>>>> show();
>>>>>
>>>>>
>>>>>
>>>>> }
>>>>>
>>>>>
>>>>>
>>>>> =======================================================================
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> Thanks and regards,
>>>>>
>>>>> Rohan
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> Click here <https://www.mailcontrol.com/sr/wQw0zmjPoHdJTZGyOCrrhg==>to
>>>>> report this email as spam.
>>>>>
>>>>>
>>>>> Protected by Websense Hosted Email Security — www.websense.com
>>>>>
>>>>> _______________________________________________
>>>>> List: [email protected]
>>>>> Listinfo: http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst
>>>>> Searchable archive:
>>>>> http://www.mail-archive.com/[email protected]/
>>>>> Dev site: http://dev.catalyst.perl.org/
>>>>>
>>>>>
>>>>
>>>
>>> _______________________________________________
>>> List: [email protected]
>>> Listinfo: http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst
>>> Searchable archive:
>>> http://www.mail-archive.com/[email protected]/
>>> Dev site: http://dev.catalyst.perl.org/
>>>
>>>
>>
>
> _______________________________________________
> List: [email protected]
> Listinfo: http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst
> Searchable archive:
> http://www.mail-archive.com/[email protected]/
> Dev site: http://dev.catalyst.perl.org/
>
>
_______________________________________________
List: [email protected]
Listinfo: http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst
Searchable archive: http://www.mail-archive.com/[email protected]/
Dev site: http://dev.catalyst.perl.org/
