[Catalyst] Catalyst-Ajax-Mochikit - followed tute but am stuck. Cannot show values in view(webpage)

[kakimoto at tpg.com.au]

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);
                    }
                }
            }
        )


    }
);