Dear All,<div><br></div><div>Thank you for giving your ideas/thoughts and explaining the things.</div><div><br></div><div>Thanks Mahmoud, this example helped me completing the task.</div><div><br></div><div>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..</div>
<div><br>======================================================</div><div>======================================================</div><div><br><span class="Apple-style-span" style="font-family: arial, sans-serif; font-size: 13px; border-collapse: collapse; "><div class="im">
lets say that you have the following controller /test/ajax<br><br></div>sub ajax : Local {<div class="im"> <br> my ($self,$c) = @_;<br> <br> my $params = $c->req->parameters;<br> my $id = $params->{id};<br>
</div> #do what ever you want with id<br><br> ##response type<div class="im"><br> $c->response->content_type("application/json");<br></div><div dir="ltr"> <br> ##send request in json format, this is just an example :)<div class="im">
<br> $c->res->body(qq~{<br> "books": {<br> "book1": "firstbook",<br> "book2": "secondbook"<br> }<br> }~);<br><br><br> ## another way to put data in JSON format is using "JSON" module<br>
## use JSON;<br><br></div><div class="im"> my %data =("id"=>123,"name"=>'rohan')<br> my $json_text = to_json(\%data);<div class="im"> $c->res->body($json_text);</div> <br>
}<br><br>================== In template [html] files =================</div>your jquery<div class="im"><br> $(document).ready(function() {<br> var test = 1;<br><br> $.ajax({<br> url: '/test/ajax',<br>
data: 'id='+test,<br> dataType: 'json',<br> type: 'get',<br> success: function (j) {<br> var elem = document.getElementById('elementDiv');<div class="im">
<span class="Apple-tab-span" style="white-space:pre"> </span>Jemplate.process('display.tt2',j,elem);</div> },<br> error: function(xhr, ajaxOptions, thrownError){<br> alert(xhr.statusText);<br>
}<br> });<br>});</div></div></span><br>=====================================</div><div>Install Jemplate module and configure Jemplate in Root.pm of the application.<br><br>The directory which point to MyApp->path_to( 'root', 'jemplate'), is the directory to put the Jemplate files. <br>
Basically Jemplate files are (like) Template Toolkit files. Put display.tt2 in the Jemplate directory. <br>Display the variables in desired format. </div><div> e.g display.tt2</div><div><br><div><table></div><div><span class="Apple-tab-span" style="white-space:pre"> </span><tr class="Header" ></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span><td>id</td><td>name</td></div><div><span class="Apple-tab-span" style="white-space:pre"> </span></tr></div><div><span class="Apple-tab-span" style="white-space:pre"> </span><tr ></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span><td>[% id | html %]</td><td>[% name | html %]</td></div><div><span class="Apple-tab-span" style="white-space:pre"> </span></tr></div>
<div></table></div><div><br></div>The Jemplate html will get rendered in the element "elementDiv"<br>=============================================================<br><br>Thanks Mehmoud for the code...</div>
<div><br></div><div>Regards,</div><div><br></div><div>Rohan <br>Bioinformatician</div><div><br><div class="gmail_quote">On Thu, Jan 6, 2011 at 7:37 PM, Mahmoud Mehyar <span dir="ltr"><<a href="mailto:mamod.mehyar@gmail.com">mamod.mehyar@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;"><div dir="ltr">sorry first one sent by mistake<div class="im"><br>use success method instead of complete as complete will return if the response is ok or false and try to catch errors<br>
with error method<br><br>put your jqury inside document ready function "recommended"<br><br>lets say that you have the following controller /test/ajax<br><br></div>sub ajax : Local {<div class="im"><br> <br>
my ($self,$c) = @_;<br>
<br> my $params = $c->req->parameters;<br> my $id = $params->{id};<br></div> #do what ever you want with id<br><br> ##response type<div class="im"><br> $c->response->content_type("application/json");<br>
</div><div dir="ltr"> <br> ##send request in json format, this is just an example :)<div class="im"><br>$c->res->body(qq~{<br> "books": {<br>
"book1": "firstbook",<br> "book2": "secondbook"<br> }<br>}~);<br> <br>}<br><br><br></div>your jquery<div class="im"><br><br> $(document).ready(function() {<br> <br>
var test = 1;<br>
<br> $.ajax({<br>
url: '/test/ajax',<br> data: 'id='+test,<br> dataType: 'json',<br> type: 'get',<br> success: function (j) {<br> alert(j.books.book1);<br>
},<br> error: function(xhr, ajaxOptions, thrownError){<br> alert(xhr.statusText);<br> }<br> });<br>});</div></div><br>hope this help, always catch errors either with jquery or catalys to find where the problem is to fix<div>
<div></div><div class="h5"><br>
<br><div class="gmail_quote">On Thu, Jan 6, 2011 at 5:02 PM, Mahmoud Mehyar <span dir="ltr"><<a href="mailto:mamod.mehyar@gmail.com" target="_blank">mamod.mehyar@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0pt 0pt 0pt 0.8ex;border-left:1px solid rgb(204, 204, 204);padding-left:1ex">
<div dir="ltr">ok I'm not familiar with jemplate but I'll post a simple example with jquery and catalyst that might help you<br><br>first for the jquery<br><br>use success method instead of complete as complete will return if the response is ok or false and try to catch errors<br>
with error method<br><br>put your jqury inside document ready function "recommended"<br><br>lets say that you have the following controller /test/ajax<br><br>sub index : Private {<br> <br> my ($self,$c) = @_;<br>
<br> my $params = $c->req->parameters;<br> my $id = $params->{id};<br><br><br><br> $c->response->content_type("application/json");<br> <br> <br>$c->res->body(qq~{<br> "books": {<br>
"book1": "firstbook",<br> "book2": "secondbook"<br> }<br>}~);<br>#}<br> <br>}<br><br> $(document).ready(function() {<br> <br> var test = 1;<br> $.ajax({<br>
url: '/test/ajax',<br> data: 'id='+test,<br> dataType: 'json',<br> type: 'get',<br> success: function (j) {<br> alert(j.books.book1);<br>
},<br> error: function(xhr, ajaxOptions, thrownError){<br> alert(xhr.statusText);<br> }<br> });<br>});<div><div></div><div><br><br><br><br><br><div class="gmail_quote">
On Thu, Jan 6, 2011 at 4:05 PM, Rohan M <span dir="ltr"><<a href="mailto:rohan7799@gmail.com" target="_blank">rohan7799@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0pt 0pt 0pt 0.8ex;border-left:1px solid rgb(204, 204, 204);padding-left:1ex">Dear All,<div><br></div><div>After hearing from you all , I'm tried Jquery and Jemplate but I'm not able to create JSON object of my data. </div>
<div><br></div><div>The thing I want to do is --</div><div><br></div>
<div>1) Onblur event of input box - take id and search database</div><div>2) Render data returned from Ajax call in table format.</div><div><br></div><div>For this, I've used following code <br><br><div> $.ajax({</div>
<div><span style="white-space:pre-wrap"> </span>url: '/controller/action/',</div><div><span style="white-space:pre-wrap"> </span>data: 'id='+var,</div><div><span style="white-space:pre-wrap"> </span>dataType: 'json',</div>
<div><span style="white-space:pre-wrap"> </span>type: 'get',</div><div><span style="white-space:pre-wrap"> </span>complete: function (j) {</div><div><span style="white-space:pre-wrap"> </span>var elem = document.getElementById("elementToRender");</div>
<div><span style="white-space:pre-wrap"> </span>Jemplate.process('show.tt2',j, elem);</div><div><span style="white-space:pre-wrap"> </span>}</div><div><span style="white-space:pre-wrap"> </span>});</div>
</div><div><br></div><div>**My action is not returning anything instead, I've action.tt2 which is getting returned with required database output.**</div><div><br></div><div><br></div><div>I searched on net and found "'Catalyst::View::JSON" but even after adding JSON.pm I'm unable to convert data into JSON object.</div>
<div><br></div><div>Please correct me, as I must be doing something wrong.</div><div><br></div><div>Thanks and regards,</div><div>Rohan</div><div><div></div><div><div><br><div class="gmail_quote">On Thu, Jan 6, 2011 at 10:37 AM, Rohan M <span dir="ltr"><<a href="mailto:rohan7799@gmail.com" target="_blank">rohan7799@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0pt 0pt 0pt 0.8ex;border-left:1px solid rgb(204, 204, 204);padding-left:1ex"><div>Thanks all for looking into this..</div><div><br></div>I've created a template (i.e <a href="http://action.tt" target="_blank">action.tt</a>) file and the variables in stash are rendered in this page. The HTML's element is getting rendered with the output from Ajax call. <div>
<br><div>The problem now is, I see my main page and the action page (rendered from ajax) together. Just because the "<a href="http://action.tt" target="_blank">action.tt</a>" takes the default style I see entire page duplication(with menus, status, links) in the rendered element of main page.</div>
<div><br></div><div>Can we make a template without taking default style available for site?</div><div><br>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.</div>
<div><br>Do somebody have such demo or link for the same?</div><div><br></div><div>Thanks,</div><div>ROhan<font color="#888888"><br></font><div class="gmail_quote"><div><div></div><div>On Wed, Jan 5, 2011 at 11:14 PM, Mesdaq, Ali <span dir="ltr"><<a href="mailto:amesdaq@websense.com" target="_blank">amesdaq@websense.com</a>></span> wrote:<br>
</div></div><blockquote class="gmail_quote" style="margin:0pt 0pt 0pt 0.8ex;border-left:1px solid rgb(204, 204, 204);padding-left:1ex"><div><div></div><div><div link="blue" vlink="purple" lang="EN-US"><div><p class="MsoNormal">
<span style="font-size:11pt;color:rgb(31, 73, 125)">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</span></p>
<p class="MsoNormal"><span style="font-size:11pt;color:rgb(31, 73, 125)"> </span></p><p class="MsoNormal"><span style="font-size:11pt;color:rgb(31, 73, 125)">console.log(<span>xmlhttp.responseText</span>);</span></p>
<div><p class="MsoNormal">
<span><span style="font-size:11pt;color:rgb(31, 73, 125)">document.getElementById</span></span><span style="font-size:11pt;color:rgb(31, 73, 125)">("data").<span>innerHTML</span>=<span>xmlhttp.responseText</span>;</span></p>
<p class="MsoNormal">
<span style="font-size:11pt;color:rgb(31, 73, 125)"> </span></p></div><p class="MsoNormal"><span style="font-size:10pt;color:rgb(31, 73, 125)">Thanks,</span></p><p class="MsoNormal"><span style="font-size:10pt;color:rgb(31, 73, 125)">------------------------------------------</span></p>
<p class="MsoNormal"><span style="font-size:10pt;color:rgb(31, 73, 125)">Ali Mesdaq (CISSP, GIAC-GREM)</span></p><p class="MsoNormal"><span style="font-size:10pt;color:rgb(31, 73, 125)">Sr. Security Researcher</span></p>
<p class="MsoNormal">
<span style="font-size:10pt;color:rgb(31, 73, 125)">Websense Security Labs</span></p><p class="MsoNormal"><span style="font-size:10pt;color:rgb(31, 73, 125)"><a href="http://www.websensesecuritylabs.com/" target="_blank"><span>http://www.WebsenseSecurityLabs.com</span></a></span></p>
<p class="MsoNormal"><span style="font-size:10pt;color:rgb(31, 73, 125)">------------------------------------------</span><span style="font-size:11pt;color:rgb(31, 73, 125)"></span></p><p class="MsoNormal"><span style="font-size:11pt;color:rgb(31, 73, 125)"> </span></p>
<div style="border-width:1pt medium medium;border-style:solid none none;border-color:rgb(181, 196, 223) -moz-use-text-color -moz-use-text-color;padding:3pt 0in 0in"><p class="MsoNormal"><b><span style="font-size:10pt">From:</span></b><span style="font-size:10pt"> Rohan M [mailto:<a href="mailto:rohan7799@gmail.com" target="_blank">rohan7799@gmail.com</a>] <br>
<b>Sent:</b> Wednesday, January 05, 2011 3:07 AM<br><b>To:</b> <a href="mailto:catalyst@lists.scsys.co.uk" target="_blank">catalyst@lists.scsys.co.uk</a><br><b>Subject:</b> [Catalyst] Ajax Problem.</span></p></div><div><div>
</div><div><p class="MsoNormal"> </p><p class="MsoNormal">Dear All,</p><div><p class="MsoNormal"> </p></div><div><p class="MsoNormal">I want to use Ajax in my Catalyst application.</p></div><div><p class="MsoNormal">
</p></div><div><p class="MsoNormal">Thing's that I've done till now :</p></div><div><p class="MsoNormal"> </p></div><div><p class="MsoNormal">1) Created a Javascript function on an event (onblur event) in my view (tt page).</p>
</div><div><p class="MsoNormal">2) Created xmlhttp object in that Javascript function.</p></div><div><p class="MsoNormal">3) Called the '/controller/action' path with parameters.</p></div><div><p class="MsoNormal">
4) The Action subroutine searches database and puts results in the <b>stash</b></p></div><div><p class="MsoNormal"> </p></div><div><p class="MsoNormal"><span>I could see, the things are working till the fourth step correctly.</span></p>
</div><div><p class="MsoNormal"> </p></div><div><p class="MsoNormal">Now, how can I render the stash variables in the current tt page?</p></div><div><p class="MsoNormal"> </p></div><div><p class="MsoNormal">Or Will I need to parse the entire content?</p>
</div><div><p class="MsoNormal"> </p></div><div><p class="MsoNormal">Is there a better solution for this problem?</p></div><div><p class="MsoNormal"> </p></div><div><p class="MsoNormal">Any help or similar (simple) example will be appreciable.</p>
</div><div><p class="MsoNormal"> </p></div><div><p class="MsoNormal">CODE SNIPPET</p></div><div><p class="MsoNormal">=======================================================================</p></div><div><p class="MsoNormal">
</p></div><div><div><p class="MsoNormal">function getDetails(id)</p></div><div><p class="MsoNormal"><span><span> </span></span>{</p></div><div><p class="MsoNormal"><span><span> </span></span>var param = "id="+id;</p>
</div><div><p class="MsoNormal"><span><span> </span></span>if (window.XMLHttpRequest)</p></div><div><p class="MsoNormal"><span><span> </span></span>{</p></div><div><p class="MsoNormal">
<span><span> </span></span>xmlhttp=new XMLHttpRequest();</p></div><div><p class="MsoNormal"><span><span> </span></span>}</p></div><div><p class="MsoNormal"><span><span> </span></span>else</p>
</div><div><p class="MsoNormal"><span><span> </span></span>{</p></div><div><p class="MsoNormal"><span><span> </span></span>xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");</p>
</div><div><p class="MsoNormal"><span><span> </span></span>}</p></div><div><p class="MsoNormal"> </p></div><div><p class="MsoNormal"><span><span> </span></span>xmlhttp.open("GET","/indexer/getid/"+"?"+param,true);</p>
</div><div><p class="MsoNormal"> // /controller/action url </p></div><div><p class="MsoNormal"><span><span> </span></span>xmlhttp.send();</p></div><div><p class="MsoNormal"><span><span> </span></span>xmlhttp.onreadystatechange=function()</p>
</div><div><p class="MsoNormal"><span><span> </span></span>{</p></div><div><p class="MsoNormal"><span><span> </span></span>if (xmlhttp.readyState==4 && xmlhttp.status==200)</p>
</div><div><p class="MsoNormal"><span><span> </span></span>{</p></div><div><p class="MsoNormal"><span><span> </span></span>document.getElementById("data").innerHTML=xmlhttp.responseText;</p>
</div><div><p class="MsoNormal"> // the element to render output </p></div><div><p class="MsoNormal"><span><span> </span></span>}</p></div><div><p class="MsoNormal">
<span><span> </span></span>}</p></div><div><p class="MsoNormal"><span><span> </span></span>show();</p></div><div><p class="MsoNormal"> </p></div><div><p class="MsoNormal"><span><span> </span></span>}</p>
</div></div><div><p class="MsoNormal"> </p></div><div><p class="MsoNormal">=======================================================================</p></div><div><p class="MsoNormal"> </p></div><div><p class="MsoNormal"> </p>
</div><div><p class="MsoNormal">Thanks and regards,</p></div><div><p class="MsoNormal">Rohan</p></div><div><p class="MsoNormal"> </p></div><p class="MsoNormal" style="margin-bottom:12pt"><span style="background:none repeat scroll 0% 0% white"> </span></p>
</div></div><p style="text-align:center" align="center"><span style="background:none repeat scroll 0% 0% white">Click <a href="https://www.mailcontrol.com/sr/wQw0zmjPoHdJTZGyOCrrhg==" target="_blank">here</a> to report this email as spam.</span></p>
</div><br><br>
<p align="center">Protected by Websense Hosted Email Security — <a href="http://www.websense.com" target="_blank">www.websense.com</a></p>
</div><br></div></div><div>_______________________________________________<br>
List: <a href="mailto:Catalyst@lists.scsys.co.uk" target="_blank">Catalyst@lists.scsys.co.uk</a><br>
Listinfo: <a href="http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst" target="_blank">http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst</a><br>
Searchable archive: <a href="http://www.mail-archive.com/catalyst@lists.scsys.co.uk/" target="_blank">http://www.mail-archive.com/catalyst@lists.scsys.co.uk/</a><br>
Dev site: <a href="http://dev.catalyst.perl.org/" target="_blank">http://dev.catalyst.perl.org/</a><br>
<br></div></blockquote></div><br></div></div>
</blockquote></div><br></div>
</div></div><br>_______________________________________________<br>
List: <a href="mailto:Catalyst@lists.scsys.co.uk" target="_blank">Catalyst@lists.scsys.co.uk</a><br>
Listinfo: <a href="http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst" target="_blank">http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst</a><br>
Searchable archive: <a href="http://www.mail-archive.com/catalyst@lists.scsys.co.uk/" target="_blank">http://www.mail-archive.com/catalyst@lists.scsys.co.uk/</a><br>
Dev site: <a href="http://dev.catalyst.perl.org/" target="_blank">http://dev.catalyst.perl.org/</a><br>
<br></blockquote></div><br></div></div></div>
</blockquote></div><br></div></div></div>
<br>_______________________________________________<br>
List: <a href="mailto:Catalyst@lists.scsys.co.uk">Catalyst@lists.scsys.co.uk</a><br>
Listinfo: <a href="http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst" target="_blank">http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst</a><br>
Searchable archive: <a href="http://www.mail-archive.com/catalyst@lists.scsys.co.uk/" target="_blank">http://www.mail-archive.com/catalyst@lists.scsys.co.uk/</a><br>
Dev site: <a href="http://dev.catalyst.perl.org/" target="_blank">http://dev.catalyst.perl.org/</a><br>
<br></blockquote></div><br></div>