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

Mesdaq, Ali amesdaq at websense.com
Wed Apr 15 19:05:06 GMT 2009


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 at tpg.com.au [mailto:kakimoto at 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 at 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 



More information about the Catalyst mailing list