Hi all,
I'm writing some ajax functionality into our project, and have an
unresolved issue. Apologies in advance, this is going to be a long one.
Here's an example scenario: registering a new user on a site.
A guest wants to be part of the community, and is presented with a form
asking for his email address, and password. The form posts
asynchronously to an xquery-main file called register.xqy which, as
expected, collects request fields and attempts the registration.
Several things may occur at this point. I'll highlight two possibilities:
(1) The account doesn't already exist, the email address is well-formed,
password is considered strong enough, therefore register.xqy
successfully registers the guest as a new user, and sends back <div
class="success">Welcome to the community</div>.
(2) The account already exists, and register.xqy sends back <div
class="failure">The account already exists</div>
Whatever happens, register.xqy is going to send back some xhtml to poke
into a waiting <div id="registration-result"></div>. Since the async
request is dataType='html', jquery will process the response as
responseText (rather than dataType='xml', meaning jquery would process
the response as responseXML). This should all be old hat, so far.
The complication arises when one wants to now act upon the current page,
based on the result of the registration attempt. At this point, the
form's fields are still filled in, which makes sense if the registration
attempt failed. If the attempt was successful, however, at least the
form fields should be cleared. How can this meta information be passed?
Some possibilities:
(1) Read the string inside <div class="success|failure">Some response
text for the user</div>, and if it's "Welcome to the community", assume
success and act accordingly. This isn't even really an option, for
obvious reasons, I hope.
(2) POST an extra hash string (ex. hash=abc123), and have register.xqy
embed an invisible element in the response (ex. <span id="abc123"
style="display: none;">true</span>) that can be plucked out by jquery
(ex. $('abc123').html()) and further processed. This actually works
well, but is somewhat convoluted.
(3) Set the request dataType='xml', and have register.xqy return xml
which contains some xhtml nested inside (ex. <result meta="true"><div
class="success|failure">Some response text for the user</div></result>).
JQuery can then poke the child of the result element into the waiting
display div, and continue processing based on the attributes of the
result element.
I've implemented (2), but it's not ideal. I'm currently attempting (3),
which ALMOST works. For example, if the response from register.xqy is
<result meta="true"><div class="success">Thanks for
registering!</div></result>, I can successfully grab the actual result
(assuming the response is contained in a variable called 'data') with
$(data).find('result').attr('meta'), and display the nested div to the
user with $(data).find('result').children().get(0).
The problem I'm having is, although the text "Thanks for registering!"
is successfully displayed on the page, it isn't css-styled. Even if the
nested div was <div style="color:red;">Thanks for registering!</div>,
the text doesn't turn red. It's as if it's not rendered through the css
engine at all.
Is this because it's xml, not xhtml? Is this a namespace issue? If the
contents of the <result> element is a (cdata) string (ex.
<result><![CDATA[ <div style="color:red;">Thanks for registering!</div>
]]></result>, would it then work? This is what I'm trying now, but I'm
not sure how in xquery to 'stringify' the div into a cdata section of
the result element.
The adventure continues. Thanks for reading this far. I'd love ANY
comments/suggestions (be harsh) anyone is willing to offer.
Eric
_______________________________________________
General mailing list
[email protected]
http://xqzone.com/mailman/listinfo/general
