FAQ
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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.scsys.co.uk/pipermail/catalyst/attachments/20110105/b411f7ba/attachment.htm

Search Discussions

  • Mahmoud Mehyar at Jan 5, 2011 at 11:51 am
    Well, I don't see why you put results in stash, can you send your controller
    code snippet, it has to send a response but let's look at that first

    I also recommend you to use a javascript framework maybe jQuery, like
    catalyst, it will make your life easier


    On Wed, Jan 5, 2011 at 2:07 PM, Rohan M wrote:

    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= 0)
    {
    document.getElementById("data").innerHTML=xmlhttp.responseText;
    // the element to render output
    }
    }
    show();

    }

    ======================================================================>

    Thanks and regards,
    Rohan


    _______________________________________________
    List: Catalyst@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/20110105/bd7a79bc/attachment.htm
  • Kieren Diment at Jan 5, 2011 at 12:04 pm

    On 05/01/2011, at 10:51 PM, Mahmoud Mehyar wrote:

    Well, I don't see why you put results in stash, can you send your controller
    code snippet, it has to send a response but let's look at that first

    I also recommend you to use a javascript framework maybe jQuery, like
    catalyst, it will make your life easier
    Unless you have a very well defined reason not to use a javascript framework (e.g. very exotic client side platform) there's no reason not to use your javascript framework of choice. If you have to roll your own ajax stuff then you ought to be being paid properly for doing so. Once you work out the basics of jquery (my recommendation, but there are similar alternatives), then all this stuff becomes trivial, as does the catalyst back end.
    On Wed, Jan 5, 2011 at 2:07 PM, Rohan M wrote:

    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= 0)
    {
    document.getElementById("data").innerHTML=xmlhttp.responseText;
    // the element to render output
    }
    }
    show();

    }

    ======================================================================>>

    Thanks and regards,
    Rohan


    _______________________________________________
    List: Catalyst@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@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/
  • Michele Beltrame at Jan 5, 2011 at 1:55 pm
    Hello!
    4) The Action subroutine searches database and puts results in the *stash*
    *
    *
    *I could see, the things are working till the fourth step correctly.*
    Putting results in the stash is not enough, as they must be sent to the
    client JavaScript application somehow.

    If you want to provide HTML, you can use a template for your action,
    i.e indexer/getid.tt. You'll then find the HTML in your:

    document.getElementById("data").innerHTML

    You might also consider other data-exchange ways, such as JSON. A
    framework (like others suggested) would help a lot in this case.

    Cheers,
    Michele.
  • Ali Mesdaq at Jan 5, 2011 at 5:44 pm
    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
    Sent: Wednesday, January 05, 2011 3:07 AM
    To: catalyst@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
    =======================================================================

    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
    -------------- next part --------------
    An HTML attachment was scrubbed...
    URL: http://lists.scsys.co.uk/pipermail/catalyst/attachments/20110105/27f99b24/attachment.htm
  • Rohan M at Jan 6, 2011 at 5:07 am
    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 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
    *Sent:* Wednesday, January 05, 2011 3:07 AM
    *To:* catalyst@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

    =======================================================================



    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: Catalyst@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/20110106/1f295dbe/attachment.htm
  • Rohan M at Jan 6, 2011 at 1:05 pm
    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 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 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
    *Sent:* Wednesday, January 05, 2011 3:07 AM
    *To:* catalyst@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

    =======================================================================



    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: Catalyst@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/20110106/2b04ad9a/attachment.htm
  • Mahmoud Mehyar at Jan 6, 2011 at 2:02 pm
    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 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 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 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
    *Sent:* Wednesday, January 05, 2011 3:07 AM
    *To:* catalyst@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

    ======================================================================>>>


    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= 0)

    {


    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: Catalyst@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@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/20110106/d3f0efe9/attachment.htm
  • Mahmoud Mehyar at Jan 6, 2011 at 2:07 pm
    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 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 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 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 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
    *Sent:* Wednesday, January 05, 2011 3:07 AM
    *To:* catalyst@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

    ======================================================================>>>>


    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= 0)

    {


    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: Catalyst@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@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/20110106/f4c24ad7/attachment.htm
  • Rohan M at Jan 7, 2011 at 9:06 am
    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 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 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 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 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 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
    *Sent:* Wednesday, January 05, 2011 3:07 AM
    *To:* catalyst@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

    =======================================================================



    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: Catalyst@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@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@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/503eb151/attachment.htm
  • Eden Cardim at Jan 6, 2011 at 4:31 pm
    "Rohan" == Rohan M writes:
    Rohan> Dear All,
    Rohan> I want to use Ajax in my Catalyst application.

    Rohan> Thing's that I've done till now :

    Rohan> 1) Created a Javascript function on an event (onblur event) in my view (tt page).
    Rohan> 2) Created xmlhttp object in that Javascript function.
    Rohan> 3) Called the '/controller/action' path with parameters.
    Rohan> 4) The Action subroutine searches database and puts results in the stash

    Rohan> I could see, the things are working till the fourth step correctly.

    Rohan> Now, how can I render the stash variables in the current tt page?

    There's not much difference in how Catalyst handles Ajax, all it sees
    are normal HTTP requests. You just have to take care to serve the
    correct content for each request. Typically, you'll have a controller
    action for loading the HTML/JS structure and a set of supplementary
    actions to render the partials.

    Rohan> Or Will I need to parse the entire content?

    It depends on what response you build inside catalyst, for partials you
    want to not render the <html><body> etc. tags, since you're going to
    update the document via innerHTML.

    For implementation specifics you're going to have to show your catalyst
    code.

    --
    Eden Cardim Need help with your perl Catalyst or DBIx::Class project?
    Software Engineer http://www.shadowcat.co.uk/catalyst/
    Shadowcat Systems Ltd. Want a managed development or deployment platform?
    http://blog.edencardim.com http://www.shadowcat.co.uk/servers/

Related Discussions

Discussion Navigation
viewthread | post
Discussion Overview
groupcatalyst @
categoriescatalyst, perl
postedJan 5, '11 at 11:07a
activeJan 7, '11 at 9:06a
posts11
users6
websitecatalystframework.org
irc#catalyst

People

Translate

site design / logo © 2022 Grokbase