[Catalyst] Catalyst-Ajax-Mochikit - followed tute but am stuck.
Cannot show values in view(webpage)
Matthew Topper
topperm9 at gmail.com
Mon Apr 13 03:59:53 GMT 2009
On Mon, 13 Apr 2009 13:50:19 +1000
kakimoto at 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 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/
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
More information about the Catalyst
mailing list