[Catalyst] Catalyst-Ajax-Mochikit - followed tute but am
stuck. Cannot show values in view(webpage)
kakimoto at tpg.com.au
kakimoto at tpg.com.au
Mon Apr 13 10:52:26 GMT 2009
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 at gmail.com>:
> 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
>
More information about the Catalyst
mailing list