FAQ
hi everybody :)

Referring to http://www.catalystframework.org/calendar/2008/24, I have
made a small change to my app and tried developing it with AJAX.

What's successful:
=================

*) managed to make a call to my controller - i put in a $c->log->debug(
... ) statement and saw that come up fine


What I have done to check:
=================

*) Used Firebug on firefox to check the returned object.



Looks good in that it has
=================
1) 'status'='Successful'
2) 'data' hash ref which even has 'price' => 'the value i expected'.


How do I actually get the value (which is the 'price' attribute to display)?
Point of problem: addCallBack method in my javascript file.

Where an I stuck:
=================
*) can't seem to display values returned from JSON be it via span or a
html table.
All I wanted to do was to get my controller to pass out a 'price' value.



here are my files:


the only template, 'form.tt2'
------------------------------------------


<span class="error" id="error">
<ul>
[% FOREACH error IN errors %]
<li>[% error %]</li>
[% END %]
</ul>
</span>
<hr/>
[% END %]
<form method="post" action="[% target_action
%]" id="agent_subscription_form" name="agent_subscription_form">
<table border="0" cellspacing="3">
<tr>
<td valign="top">
insurance duration:
</td>
<td valign="top">
<input type="text"
id="duration" name = "duration"/>
</td>
</tr>


<tr>
<td valign="top">
Price
</td>
<td valign="top">
<span class="price"
id="price"></span>
<input type="button"
id="check_price" name="check_price" value="check price"/>
<script
type="text/javascript" src="[%
Catalyst.uri_for('/js/subscriptions_quote.js') %]"></script>
</td>
</tr>
</table>
</form>


the javascript, subscriptions_quote.js
------------------------------------------

//Creates MochiKit logging pane. Remove "true" if you want it popped out
in its own window
createLoggingPane(true);

var message = getElement('message');
var error = getElement('error');
var duration = getElement('duration');
var check_price = getElement('check_price');

connect
(
'check_price',
'onclick',
function ()
{
log("I have been clicked and here are my values:");
log("Duration: ", duration.value);

//Creating our params object to hold our arguments that we will
be posting
var params =
{
export_to: export_to.value,
duration: duration.value,
agent_code: agent_code.value
};

//Calling MochiKit's doXHR which makes XMLHttpRequests painless
//'/usersubscriptions/get_price',
var d = doXHR
(
'/users/subscriptions/check_price',
{
'method': 'POST',
'sendContent': queryString(params),
'headers':
{'Content-Type':'application/x-www-form-urlencoded'}
}
);


//Creating a callback on success to process our json response
d.addCallback
(
function (req)
{
//eval'ing and assigning our returned json data to resp
variable
var resp = evalJSONRequest(req);

//logging to firebug as an example comment out if not
installed
//console.log(resp);

//Checking to see we have a successful response in our
returned data
if (resp.status == 'Successful')
{
log('the Response has status of successful...');
//creating dom elements. first arg pass is named
args for attributes
//second arg passed is data inside element. can be
string or array of more
//elements consult mochikit docs for full details
var td_price = TD(null, resp.data.price.value);



log(resp.data.price);

//calling our partial function
u_message(resp.status);

//Calling MochiKit's appendChildNodes() to only the
fly update the DOM
// appendChildNodes( agent_subscriptions, [tr_price]);

// Im stuck here!!! Don't know why the freakin' value won't show :(

p_txt = P({'style':'display:none'}, resp.data.price);
replaceChildNodes(price, [p_txt]);

appear(p_txt,{'speed':0.1});

}
else
{
log('Response has status of NON successful');

//calling our partial function
u_message(resp.status);

//getting error reason and txt and updating user
for (i in resp.error)
{
log('Error is:',i);
log('Reason is:',resp.error[i]);
u_error(i+': '+resp.error.i);
}
}
}
)


}
);

Search Discussions

  • Matthew Topper at Apr 13, 2009 at 3:59 am

    On Mon, 13 Apr 2009 13:50:19 +1000 kakimoto@tpg.com.au wrote:

    hi everybody :)

    Referring to http://www.catalystframework.org/calendar/2008/24, I
    have made a small change to my app and tried developing it with AJAX.

    What's successful:
    =================

    *) managed to make a call to my controller - i put in a
    $c->log->debug( ... ) statement and saw that come up fine


    What I have done to check:
    =================

    *) Used Firebug on firefox to check the returned object.



    Looks good in that it has
    =================
    1) 'status'='Successful'
    2) 'data' hash ref which even has 'price' => 'the value i expected'.


    How do I actually get the value (which is the 'price' attribute to
    display)? Point of problem: addCallBack method in my javascript file.

    Where an I stuck:
    =================
    *) can't seem to display values returned from JSON be it via span or a
    html table.
    All I wanted to do was to get my controller to pass out a 'price'
    value.



    here are my files:


    the only template, 'form.tt2'
    ------------------------------------------


    <span class="error" id="error">
    <ul>
    [% FOREACH error IN errors %]
    <li>[% error %]</li>
    [% END %]
    </ul>
    </span>
    <hr/>
    [% END %]
    <form method="post" action="[%
    target_action %]" id="agent_subscription_form"
    name="agent_subscription_form"> <table border="0" cellspacing="3">
    <tr>
    <td valign="top">
    insurance duration:
    </td>
    <td valign="top">
    <input type="text"
    id="duration" name = "duration"/>
    </td>
    </tr>


    <tr>
    <td valign="top">
    Price
    </td>
    <td valign="top">
    <span class="price"
    id="price"></span>
    <input type="button"
    id="check_price" name="check_price" value="check price"/>
    <script
    type="text/javascript" src="[%
    Catalyst.uri_for('/js/subscriptions_quote.js') %]"></script>
    </td>
    </tr>
    </table>
    </form>


    the javascript, subscriptions_quote.js
    ------------------------------------------

    //Creates MochiKit logging pane. Remove "true" if you want it popped
    out in its own window
    createLoggingPane(true);

    var message = getElement('message');
    var error = getElement('error');
    var duration = getElement('duration');
    var check_price = getElement('check_price');

    connect
    (
    'check_price',
    'onclick',
    function ()
    {
    log("I have been clicked and here are my values:");
    log("Duration: ", duration.value);

    //Creating our params object to hold our arguments that we
    will be posting
    var params =
    {
    export_to: export_to.value,
    duration: duration.value,
    agent_code: agent_code.value
    };

    //Calling MochiKit's doXHR which makes XMLHttpRequests
    painless //'/usersubscriptions/get_price',
    var d = doXHR
    (
    '/users/subscriptions/check_price',
    {
    'method': 'POST',
    'sendContent': queryString(params),
    'headers':
    {'Content-Type':'application/x-www-form-urlencoded'}
    }
    );


    //Creating a callback on success to process our json response
    d.addCallback
    (
    function (req)
    {
    //eval'ing and assigning our returned json data to
    resp variable
    var resp = evalJSONRequest(req);

    //logging to firebug as an example comment out if not
    installed
    //console.log(resp);

    //Checking to see we have a successful response in our
    returned data
    if (resp.status == 'Successful')
    {
    log('the Response has status of successful...');
    //creating dom elements. first arg pass is named
    args for attributes
    //second arg passed is data inside element. can be
    string or array of more
    //elements consult mochikit docs for full details
    var td_price = TD(null, resp.data.price.value);



    log(resp.data.price);

    //calling our partial function
    u_message(resp.status);

    //Calling MochiKit's appendChildNodes() to only
    the fly update the DOM
    // appendChildNodes( agent_subscriptions,
    [tr_price]);

    // Im stuck here!!! Don't know why the freakin' value won't show :(

    p_txt = P({'style':'display:none'},
    resp.data.price); replaceChildNodes(price, [p_txt]);

    appear(p_txt,{'speed':0.1});

    }
    else
    {
    log('Response has status of NON successful');

    //calling our partial function
    u_message(resp.status);

    //getting error reason and txt and updating user
    for (i in resp.error)
    {
    log('Error is:',i);
    log('Reason is:',resp.error[i]);
    u_error(i+': '+resp.error.i);
    }
    }
    }
    )


    }
    );






    _______________________________________________
    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/
    Maybe this was just a typo in pasting the files in, but I see you
    defining

    var td_price = TD(null, resp.data.price.value);

    and then later referring to it as tr_price.

    -Matt
    -------------- next part --------------
    A non-text attachment was scrubbed...
    Name: signature.asc
    Type: application/pgp-signature
    Size: 197 bytes
    Desc: not available
    Url : http://lists.scsys.co.uk/pipermail/catalyst/attachments/20090412/919cc8b7/signature.pgp
  • K. Akimoto at Apr 13, 2009 at 10:52 am
    Hello, Matthew,


    Thank you for your reply. No there was no mistake.
    It was just that I was trying to make it work by trying to put the value
    of price into the <span> element
    and the dynamic html table generation (as per the tute).

    1) span element - uses " p_txt = P({'style':'display:none'},
    resp.data.price);" ( i have even tried using resp.data.price.value to no
    success)
    2) html table element, td within a tr - var td_price = TD(null,
    resp.data.price.value);








    Quoting Matthew Topper <topperm9@gmail.com>:
    On Mon, 13 Apr 2009 13:50:19 +1000
    kakimoto@tpg.com.au wrote:
    hi everybody :)

    Referring to http://www.catalystframework.org/calendar/2008/24, I
    have made a small change to my app and tried developing it with AJAX.
    What's successful:
    =================

    *) managed to make a call to my controller - i put in a
    $c->log->debug( ... ) statement and saw that come up fine


    What I have done to check:
    =================

    *) Used Firebug on firefox to check the returned object.



    Looks good in that it has
    =================
    1) 'status'='Successful'
    2) 'data' hash ref which even has 'price' => 'the value i
    expected'.

    How do I actually get the value (which is the 'price' attribute to
    display)? Point of problem: addCallBack method in my javascript file.
    Where an I stuck:
    =================
    *) can't seem to display values returned from JSON be it via span or a
    html table.
    All I wanted to do was to get my controller to pass out a 'price'
    value.



    here are my files:


    the only template, 'form.tt2'
    ------------------------------------------


    <span class="error" id="error">
    <ul>
    [% FOREACH error IN errors %]
    <li>[% error %]</li>
    [% END %]
    </ul>
    </span>
    <hr/>
    [% END %]
    <form method="post" action="[%
    target_action %]" id="agent_subscription_form"
    name="agent_subscription_form"> <table border="0" cellspacing="3">
    <tr>
    <td valign="top">
    insurance duration:
    </td>
    <td valign="top">
    <input type="text"
    id="duration" name = "duration"/>
    </td>
    </tr>


    <tr>
    <td valign="top">
    Price
    </td>
    <td valign="top">
    <span class="price"
    id="price"></span>
    <input type="button"
    id="check_price" name="check_price" value="check price"/>
    <script
    type="text/javascript" src="[%
    Catalyst.uri_for('/js/subscriptions_quote.js') %]"></script>
    </td>
    </tr>
    </table>
    </form>


    the javascript, subscriptions_quote.js
    ------------------------------------------

    //Creates MochiKit logging pane. Remove "true" if you want it popped
    out in its own window
    createLoggingPane(true);

    var message = getElement('message');
    var error = getElement('error');
    var duration = getElement('duration');
    var check_price = getElement('check_price');

    connect
    (
    'check_price',
    'onclick',
    function ()
    {
    log("I have been clicked and here are my values:");
    log("Duration: ", duration.value);

    //Creating our params object to hold our arguments that we
    will be posting
    var params =
    {
    export_to: export_to.value,
    duration: duration.value,
    agent_code: agent_code.value
    };

    //Calling MochiKit's doXHR which makes XMLHttpRequests
    painless //'/usersubscriptions/get_price',
    var d = doXHR
    (
    '/users/subscriptions/check_price',
    {
    'method': 'POST',
    'sendContent': queryString(params),
    'headers':
    {'Content-Type':'application/x-www-form-urlencoded'}
    }
    );


    //Creating a callback on success to process our json response
    d.addCallback
    (
    function (req)
    {
    //eval'ing and assigning our returned json data to
    resp variable
    var resp = evalJSONRequest(req);

    //logging to firebug as an example comment out if not
    installed
    //console.log(resp);

    //Checking to see we have a successful response in our
    returned data
    if (resp.status == 'Successful')
    {
    log('the Response has status of
    successful...');
    //creating dom elements. first arg pass is named
    args for attributes
    //second arg passed is data inside element. can be
    string or array of more
    //elements consult mochikit docs for full details
    var td_price = TD(null,
    resp.data.price.value);


    log(resp.data.price);

    //calling our partial function
    u_message(resp.status);

    //Calling MochiKit's appendChildNodes() to only
    the fly update the DOM
    // appendChildNodes( agent_subscriptions,
    [tr_price]);

    // Im stuck here!!! Don't know why the freakin' value won't show :(
    p_txt = P({'style':'display:none'},
    resp.data.price); replaceChildNodes(price, [p_txt]);

    appear(p_txt,{'speed':0.1});

    }
    else
    {
    log('Response has status of NON successful');

    //calling our partial function
    u_message(resp.status);

    //getting error reason and txt and updating user
    for (i in resp.error)
    {
    log('Error is:',i);
    log('Reason is:',resp.error[i]);
    u_error(i+': '+resp.error.i);
    }
    }
    }
    )


    }
    );






    _______________________________________________
    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/
    Maybe this was just a typo in pasting the files in, but I see you
    defining

    var td_price = TD(null, resp.data.price.value);

    and then later referring to it as tr_price.

    -Matt
  • Peter Flanigan at Apr 13, 2009 at 4:13 am

    kakimoto@tpg.com.au wrote:

    How do I actually get the value (which is the 'price' attribute to display)?
    Point of problem: addCallBack method in my javascript file.
    //Creating a callback on success to process our json response
    d.addCallback
    (
    function (req)
    {
    //elements consult mochikit docs for full details
    var td_price = TD(null, resp.data.price.value);
    // Im stuck here!!! Don't know why the freakin' value won't show :(

    p_txt = P({'style':'display:none'}, resp.data.price);
    replaceChildNodes(price, [p_txt]);
    Am not familiar with Mochikit, but from context should that be

    p_txt = P({'style':'display:none'}, resp.data.price.value);
    ^^^^^^^

    --

    Regards
  • K. Akimoto at Apr 13, 2009 at 10:57 am
    hello, Peter,

    Good evening. Thank you for the response.

    Yeah, "log(resp.data.price);" prints out the value which I was expecting.
    Hence, I was expecting the line, "p_txt = P({'style':'display:none'},
    resp.data.price); "
    to have worked.
    alas, your recommendation of "p_txt = P({'style':'display:none'},
    resp.data.price.value);" failed too :(


    anyone?? thank you:)



    Quoting Peter Flanigan <pjf@roxsoft.co.uk>:
    kakimoto@tpg.com.au wrote:
    How do I actually get the value (which is the 'price' attribute to display)?
    Point of problem: addCallBack method in my javascript file.
    //Creating a callback on success to process our json response
    d.addCallback
    (
    function (req)
    {
    //elements consult mochikit docs for full details
    var td_price = TD(null,
    resp.data.price.value);
    // Im stuck here!!! Don't know why the freakin' value won't show :(
    p_txt = P({'style':'display:none'},
    resp.data.price);
    replaceChildNodes(price, [p_txt]);
    Am not familiar with Mochikit, but from context should that be

    p_txt = P({'style':'display:none'}, resp.data.price.value);
    ^^^^^^^

    --

    Regards

    _______________________________________________
    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/

  • Gordon Yeong at Apr 13, 2009 at 12:03 pm
    hmmm
    Haven't done much mochikit but if you're wantign to just update a single
    element, consider
    using a DIV tag element in the html file and from the javascript file you
    have made,
    update the element (based on the ID assigned to the DIV tag element earlier)
    ?


    Taking your code into consideration, in your javascript file,
    just add this function,


    ********************* Start ******************

    function updatepage(str)
    {
    document.getElementById("price").innerHTML = str;
    }

    ********************* End ******************

    and where the request is successful, just make a call to it :


    ********************* Start ******************
    //Checking to see we have a successful response in our
    returned data
    if (resp.status == 'Successful')
    {
    log('the Response has status of successful...');
    log('mokkie Response has status of successful...');
    log(resp.data.price);
    * updatepage(resp.data.price); <---- Over here :)*
    }
    else
    {
    log('Response has status of NON successful');

    //calling our partial function
    u_message(resp.status);

    //getting error reason and txt and updating user
    for (i in resp.error)
    {
    log('Error is:',i);
    log('Reason is:',resp.error[i]);
    u_error(i+': '+resp.error.i);
    }
    }

    ********************* End ******************

    Hope it helps:)


    Regards,
    Gordon Yeong


    2009/4/13 <kakimoto@tpg.com.au>
    hello, Peter,

    Good evening. Thank you for the response.

    Yeah, "log(resp.data.price);" prints out the value which I was expecting.
    Hence, I was expecting the line, "p_txt = P({'style':'display:none'},
    resp.data.price); "
    to have worked.
    alas, your recommendation of "p_txt = P({'style':'display:none'},
    resp.data.price.value);" failed too :(


    anyone?? thank you:)



    Quoting Peter Flanigan <pjf@roxsoft.co.uk>:
    kakimoto@tpg.com.au wrote:
    How do I actually get the value (which is the 'price' attribute to display)?
    Point of problem: addCallBack method in my javascript file.
    //Creating a callback on success to process our json response
    d.addCallback
    (
    function (req)
    {
    //elements consult mochikit docs for full details
    var td_price = TD(null,
    resp.data.price.value);
    // Im stuck here!!! Don't know why the freakin' value won't show :(
    p_txt = P({'style':'display:none'},
    resp.data.price);
    replaceChildNodes(price, [p_txt]);
    Am not familiar with Mochikit, but from context should that be

    p_txt = P({'style':'display:none'}, resp.data.price.value);
    ^^^^^^^

    --

    Regards

    _______________________________________________
    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/20090413/a1f61e41/attachment.htm
  • K. Akimoto at Apr 13, 2009 at 3:48 pm
    hello, Gordon :)


    thank you for your response :)
    i have tried what you recommended me and yes, it works just fine.

    thank you, everybody!


    K. akimoto



    Quoting Gordon Yeong <anexiole@gmail.com>:
    hmmm
    Haven't done much mochikit but if you're wantign to just update a
    single
    element, consider
    using a DIV tag element in the html file and from the javascript file
    you
    have made,
    update the element (based on the ID assigned to the DIV tag element
    earlier)
    ?


    Taking your code into consideration, in your javascript file,
    just add this function,


    ********************* Start ******************

    function updatepage(str)
    {
    document.getElementById("price").innerHTML = str;
    }

    ********************* End ******************

    and where the request is successful, just make a call to it :


    ********************* Start ******************
    //Checking to see we have a successful response in
    our
    returned data
    if (resp.status == 'Successful')
    {
    log('the Response has status of successful...');
    log('mokkie Response has status of
    successful...');
    log(resp.data.price);
    * updatepage(resp.data.price); <---- Over here
    :)*
    }
    else
    {
    log('Response has status of NON successful');

    //calling our partial function
    u_message(resp.status);

    //getting error reason and txt and updating user
    for (i in resp.error)
    {
    log('Error is:',i);
    log('Reason is:',resp.error[i]);
    u_error(i+': '+resp.error.i);
    }
    }

    ********************* End ******************

    Hope it helps:)


    Regards,
    Gordon Yeong


    2009/4/13 <kakimoto@tpg.com.au>
    hello, Peter,

    Good evening. Thank you for the response.

    Yeah, "log(resp.data.price);" prints out the value which I was
    expecting.
    Hence, I was expecting the line, "p_txt =
    P({'style':'display:none'},
    resp.data.price); "
    to have worked.
    alas, your recommendation of "p_txt = P({'style':'display:none'},
    resp.data.price.value);" failed too :(


    anyone?? thank you:)



    Quoting Peter Flanigan <pjf@roxsoft.co.uk>:
    kakimoto@tpg.com.au wrote:
    How do I actually get the value (which is the 'price' attribute
    to
    display)?
    Point of problem: addCallBack method in my javascript file.
    //Creating a callback on success to process our json response
    d.addCallback
    (
    function (req)
    {
    //elements consult mochikit docs for full details
    var td_price = TD(null,
    resp.data.price.value);
    // Im stuck here!!! Don't know why the freakin' value won't
    show
    :(
    p_txt = P({'style':'display:none'},
    resp.data.price);
    replaceChildNodes(price, [p_txt]);
    Am not familiar with Mochikit, but from context should that be

    p_txt = P({'style':'display:none'}, resp.data.price.value);
    ^^^^^^^

    --

    Regards

    _______________________________________________
    List: Catalyst@lists.scsys.co.uk
    Listinfo:
    http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst
  • Ali Mesdaq at Apr 15, 2009 at 7:05 pm
    Hello,

    I am the one who wrote that article sorry if it wasn?t clear enough to help you out here. Looking at the code you pasted I see a few places where I think the issue might be.

    In your subscriptions_quote.js file you don?t have the price element defined like in my example. What you need is a reference to the element and you don?t have one. So add something like var price = getElement('price'); right under your var check_price = getElement('check_price');. That will give you a reference to that element that you will need when you call replaceChildNodes later. Also a minor change you could add is change p_txt = P({'style':'display:none'}, resp.data.price); to var p_txt = P({'style':'display:none'}, resp.data.price);.

    One of the debugging steps you can take with firebug is to actually watch the DOM get updated. If you right click somewhere on the page that?s close to where your price data will be displayed you can select "Inspect Element" then navigate to where the element will be created. Its possible that the element gets added to the DOM but you have an issue with the appear() function so it never displays even though its been inserted with the replaceChildNodes() that has happened to me many times before.

    Also after you do var p_txt = P({'style':'display:none'}, resp.data.price); I would do a console.log(p_txt); Just to dump that DOM element and make sure its being created correctly with the correct data as well as the correct attributes. You might even want to not have it be set to display none so that you can take the whole visual affect issues out of the debugging.

    Please let me know if this helps I am very interested in making sure the issue is resolved based on the instructions I gave in the tutorial instead of other work arounds.

    Thanks,
    ------------------------------------------
    Ali Mesdaq (CISSP, GIAC-GREM)
    Sr. Security Researcher
    Websense Security Labs
    http://www.WebsenseSecurityLabs.com
    ------------------------------------------


    -----Original Message-----
    From: kakimoto@tpg.com.au
    Sent: Sunday, April 12, 2009 8:50 PM
    To: The elegant MVC web framework
    Subject: [Catalyst] Catalyst-Ajax-Mochikit - followed tute but am stuck. Cannot show values in view(webpage)

    hi everybody :)

    Referring to http://www.catalystframework.org/calendar/2008/24, I have
    made a small change to my app and tried developing it with AJAX.

    What's successful:
    =================

    *) managed to make a call to my controller - i put in a $c->log->debug(
    ... ) statement and saw that come up fine


    What I have done to check:
    =================

    *) Used Firebug on firefox to check the returned object.



    Looks good in that it has
    =================
    1) 'status'='Successful'
    2) 'data' hash ref which even has 'price' => 'the value i expected'.


    How do I actually get the value (which is the 'price' attribute to display)?
    Point of problem: addCallBack method in my javascript file.

    Where an I stuck:
    =================
    *) can't seem to display values returned from JSON be it via span or a
    html table.
    All I wanted to do was to get my controller to pass out a 'price' value.



    here are my files:


    the only template, 'form.tt2'
    ------------------------------------------


    <span class="error" id="error">
    <ul>
    [% FOREACH error IN errors %]
    <li>[% error %]</li>
    [% END %]
    </ul>
    </span>
    <hr/>
    [% END %]
    <form method="post" action="[% target_action
    %]" id="agent_subscription_form" name="agent_subscription_form">
    <table border="0" cellspacing="3">
    <tr>
    <td valign="top">
    insurance duration:
    </td>
    <td valign="top">
    <input type="text"
    id="duration" name = "duration"/>
    </td>
    </tr>


    <tr>
    <td valign="top">
    Price
    </td>
    <td valign="top">
    <span class="price"
    id="price"></span>
    <input type="button"
    id="check_price" name="check_price" value="check price"/>
    <script
    type="text/javascript" src="[%
    Catalyst.uri_for('/js/subscriptions_quote.js') %]"></script>
    </td>
    </tr>
    </table>
    </form>


    the javascript, subscriptions_quote.js
    ------------------------------------------

    //Creates MochiKit logging pane. Remove "true" if you want it popped out
    in its own window
    createLoggingPane(true);

    var message = getElement('message');
    var error = getElement('error');
    var duration = getElement('duration');
    var check_price = getElement('check_price');

    connect
    (
    'check_price',
    'onclick',
    function ()
    {
    log("I have been clicked and here are my values:");
    log("Duration: ", duration.value);

    //Creating our params object to hold our arguments that we will
    be posting
    var params =
    {
    export_to: export_to.value,
    duration: duration.value,
    agent_code: agent_code.value
    };

    //Calling MochiKit's doXHR which makes XMLHttpRequests painless
    //'/usersubscriptions/get_price',
    var d = doXHR
    (
    '/users/subscriptions/check_price',
    {
    'method': 'POST',
    'sendContent': queryString(params),
    'headers':
    {'Content-Type':'application/x-www-form-urlencoded'}
    }
    );


    //Creating a callback on success to process our json response
    d.addCallback
    (
    function (req)
    {
    //eval'ing and assigning our returned json data to resp
    variable
    var resp = evalJSONRequest(req);

    //logging to firebug as an example comment out if not
    installed
    //console.log(resp);

    //Checking to see we have a successful response in our
    returned data
    if (resp.status == 'Successful')
    {
    log('the Response has status of successful...');
    //creating dom elements. first arg pass is named
    args for attributes
    //second arg passed is data inside element. can be
    string or array of more
    //elements consult mochikit docs for full details
    var td_price = TD(null, resp.data.price.value);



    log(resp.data.price);

    //calling our partial function
    u_message(resp.status);

    //Calling MochiKit's appendChildNodes() to only the
    fly update the DOM
    // appendChildNodes( agent_subscriptions, [tr_price]);

    // Im stuck here!!! Don't know why the freakin' value won't show :(

    p_txt = P({'style':'display:none'}, resp.data.price);
    replaceChildNodes(price, [p_txt]);

    appear(p_txt,{'speed':0.1});

    }
    else
    {
    log('Response has status of NON successful');

    //calling our partial function
    u_message(resp.status);

    //getting error reason and txt and updating user
    for (i in resp.error)
    {
    log('Error is:',i);
    log('Reason is:',resp.error[i]);
    u_error(i+': '+resp.error.i);
    }
    }
    }
    )


    }
    );






    _______________________________________________
    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/


    Protected by Websense Hosted Email Security -- www.websense.com
  • K. Akimoto at Apr 16, 2009 at 4:38 am
    Hello, Ali,

    Thank you very much for coming back to this post.

    At the moment, I have just used a simple <div id="price"/> tag and it
    works great. Once I do more work on AJAX, I will put your suggestions in.

    K . akimoto

    Quoting "Mesdaq, Ali" <amesdaq@websense.com>:
    Hello,

    I am the one who wrote that article sorry if it wasn?t clear enough
    to help you out here. Looking at the code you pasted I see a few
    places where I think the issue might be.

    In your subscriptions_quote.js file you don?t have the price element
    defined like in my example. What you need is a reference to the
    element and you don?t have one. So add something like var price =
    getElement('price'); right under your var check_price =
    getElement('check_price');. That will give you a reference to that
    element that you will need when you call replaceChildNodes later.
    Also a minor change you could add is change p_txt =
    P({'style':'display:none'}, resp.data.price); to var p_txt =
    P({'style':'display:none'}, resp.data.price);.

    One of the debugging steps you can take with firebug is to actually
    watch the DOM get updated. If you right click somewhere on the page
    that?s close to where your price data will be displayed you can
    select "Inspect Element" then navigate to where the element will be
    created. Its possible that the element gets added to the DOM but you
    have an issue with the appear() function so it never displays even
    though its been inserted with the replaceChildNodes() that has
    happened to me many times before.

    Also after you do var p_txt = P({'style':'display:none'},
    resp.data.price); I would do a console.log(p_txt); Just to dump that
    DOM element and make sure its being created correctly with the
    correct data as well as the correct attributes. You might even want
    to not have it be set to display none so that you can take the whole
    visual affect issues out of the debugging.

    Please let me know if this helps I am very interested in making sure
    the issue is resolved based on the instructions I gave in the
    tutorial instead of other work arounds.

    Thanks,
    ------------------------------------------
    Ali Mesdaq (CISSP, GIAC-GREM)
    Sr. Security Researcher
    Websense Security Labs
    http://www.WebsenseSecurityLabs.com
    ------------------------------------------


    -----Original Message-----
    From: kakimoto@tpg.com.au
    Sent: Sunday, April 12, 2009 8:50 PM
    To: The elegant MVC web framework
    Subject: [Catalyst] Catalyst-Ajax-Mochikit - followed tute but am
    stuck. Cannot show values in view(webpage)

    hi everybody :)

    Referring to http://www.catalystframework.org/calendar/2008/24, I
    have
    made a small change to my app and tried developing it with AJAX.

    What's successful:
    =================

    *) managed to make a call to my controller - i put in a
    $c->log->debug(
    ... ) statement and saw that come up fine


    What I have done to check:
    =================

    *) Used Firebug on firefox to check the returned object.



    Looks good in that it has
    =================
    1) 'status'='Successful'
    2) 'data' hash ref which even has 'price' => 'the value i expected'.


    How do I actually get the value (which is the 'price' attribute to
    display)?
    Point of problem: addCallBack method in my javascript file.

    Where an I stuck:
    =================
    *) can't seem to display values returned from JSON be it via span or
    a
    html table.
    All I wanted to do was to get my controller to pass out a 'price'
    value.



    here are my files:


    the only template, 'form.tt2'
    ------------------------------------------


    <span class="error" id="error">
    <ul>
    [% FOREACH error IN errors %]
    <li>[% error %]</li>
    [% END %]
    </ul>
    </span>
    <hr/>
    [% END %]
    <form method="post" action="[%
    target_action
    %]" id="agent_subscription_form" name="agent_subscription_form">
    <table border="0" cellspacing="3">
    <tr>
    <td valign="top">
    insurance duration:
    </td>
    <td valign="top">
    <input type="text"
    id="duration" name = "duration"/>
    </td>
    </tr>


    <tr>
    <td valign="top">
    Price
    </td>
    <td valign="top">
    <span class="price"
    id="price"></span>
    <input type="button"
    id="check_price" name="check_price" value="check price"/>
    <script
    type="text/javascript" src="[%
    Catalyst.uri_for('/js/subscriptions_quote.js') %]"></script>
    </td>
    </tr>
    </table>
    </form>


    the javascript, subscriptions_quote.js
    ------------------------------------------

    //Creates MochiKit logging pane. Remove "true" if you want it popped
    out
    in its own window
    createLoggingPane(true);

    var message = getElement('message');
    var error = getElement('error');
    var duration = getElement('duration');
    var check_price = getElement('check_price');

    connect
    (
    'check_price',
    'onclick',
    function ()
    {
    log("I have been clicked and here are my values:");
    log("Duration: ", duration.value);

    //Creating our params object to hold our arguments that we
    will
    be posting
    var params =
    {
    export_to: export_to.value,
    duration: duration.value,
    agent_code: agent_code.value
    };

    //Calling MochiKit's doXHR which makes XMLHttpRequests
    painless
    //'/usersubscriptions/get_price',
    var d = doXHR
    (
    '/users/subscriptions/check_price',
    {
    'method': 'POST',
    'sendContent': queryString(params),
    'headers':
    {'Content-Type':'application/x-www-form-urlencoded'}
    }
    );


    //Creating a callback on success to process our json response
    d.addCallback
    (
    function (req)
    {
    //eval'ing and assigning our returned json data to
    resp
    variable
    var resp = evalJSONRequest(req);

    //logging to firebug as an example comment out if
    not
    installed
    //console.log(resp);

    //Checking to see we have a successful response in
    our
    returned data
    if (resp.status == 'Successful')
    {
    log('the Response has status of successful...');
    //creating dom elements. first arg pass is named
    args for attributes
    //second arg passed is data inside element. can
    be
    string or array of more
    //elements consult mochikit docs for full
    details
    var td_price = TD(null, resp.data.price.value);



    log(resp.data.price);

    //calling our partial function
    u_message(resp.status);

    //Calling MochiKit's appendChildNodes() to only
    the
    fly update the DOM
    // appendChildNodes( agent_subscriptions,
    [tr_price]);

    // Im stuck here!!! Don't know why the freakin' value won't show :(

    p_txt = P({'style':'display:none'},
    resp.data.price);
    replaceChildNodes(price, [p_txt]);

    appear(p_txt,{'speed':0.1});

    }
    else
    {
    log('Response has status of NON successful');

    //calling our partial function
    u_message(resp.status);

    //getting error reason and txt and updating user
    for (i in resp.error)
    {
    log('Error is:',i);
    log('Reason is:',resp.error[i]);
    u_error(i+': '+resp.error.i);
    }
    }
    }
    )


    }
    );






    _______________________________________________
    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/


    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/

Related Discussions

Discussion Navigation
viewthread | post
Discussion Overview
groupcatalyst @
categoriescatalyst, perl
postedApr 13, '09 at 3:50a
activeApr 16, '09 at 4:38a
posts9
users5
websitecatalystframework.org
irc#catalyst

People

Translate

site design / logo © 2021 Grokbase