[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
Thu Apr 16 04:38:49 GMT 2009
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 at 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 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
>
> _______________________________________________
> 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/
>
>
>
More information about the Catalyst
mailing list