<div dir="ltr">sorry first one sent by mistake<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 ajax : Local {<br> <br> my ($self,$c) = @_;<br>
<br> my $params = $c->req->parameters;<br> my $id = $params->{id};<br> #do what ever you want with id<br><br> ##response type<br> $c->response->content_type("application/json");<br>
<div dir="ltr"> <br> ##send request in json format, this is just an example :)<br>$c->res->body(qq~{<br> "books": {<br>
"book1": "firstbook",<br> "book2": "secondbook"<br> }<br>}~);<br> <br>}<br><br><br>your jquery<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><br>hope this help, always catch errors either with jquery or catalys to find where the problem is to fix<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">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 class="h5"><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>