ajax submit, forward if successful, show errors on fail

[slimchrisp]

sorry that this post is somewhat of a duplicate, but i feel like what i am doing is fairly simple, but it's turning into a battle for me. anyway, here's a fairly detailed description of what i'm trying to do.

in my header, there is a login link. when a user clicks the login link, i cover the entire app with a mostly transparent div and fade in a login form. it looks just like the example login on the prototype window login page: http://prototype-window.xilinus.com/samples.html.
It's example 7. I'm not using prototype-window though. Just scriptaculous and css.

If you check out this example, I want to do exactly what it does, but add in the ajax call to the server for the login. If it passes, then the entire app should forward to a new url. If it fails, I should get an error message and stay on the same page, just like in this example.

So far, this is what I'm doing to implement this. The login link kicks off an ajax call that populates a div with my login form. I do this so that I can use spring binding and my back end validation logic with a SimpleFormController. Works like a charm. This is where things start to get fuzzy.

I'm using an ajax interceptor that runs after my LoginController (on submit). Here are my 2 big problems:

1) Why does my validation not work? I get validation errors even when I submit valid data.
2) Is it possible to use my spring binding for validation, and refresh the div with the controller's results when validation fails? That way I don't have to mess with populating a div with error messages and all that.

Maybe I don't have my head completely wrapped around Handlers (specifically org.springmodules.xt.ajax.validation.DefaultValida tionHandler), but it just seems really bad to write out html code on the back end. I'm seeing that in a lot of the ajax code. If nothing else I could create my objects to hold error messages, put them in session, then use dwr javascripts to get those objects out of session and display them however I want.

Sorry for the uber long post, but this is killing me.

Thanks for any and all help!!!

[sbtourist]

Here are my 2 big problems:

1) Why does my validation not work? I get validation errors even when I submit valid data.

Have you verified that your validation works without that Ajax stuff?
It could be a problem in your validation code ... please post more of your code.

2) Is it possible to use my spring binding for validation, and refresh the div with the controller's results when validation fails? That way I don't have to mess with populating a div with error messages and all that.

Maybe I don't have my head completely wrapped around Handlers (specifically org.springmodules.xt.ajax.validation.DefaultValida tionHandler), but it just seems really bad to write out html code on the back end. I'm seeing that in a lot of the ajax code.

You haven't to write any HTML code in the back end: just write an handler which renders all the components you like.
As you noted, you can also use the org.springmodules.xt.ajax.validation.DefaultValida tionHandler, which makes all the dirty job for you.
If you want to use it, just map it to the login URL and insert in your HTML client code the elements where you want to display validation error messages, assigning them the error message codes to display. I.E., if your validator creates an error message with "wrong.user" as error code, just put in your HTML an element like the following:

<div id='wrong.user'/>

The DefaultValidationHandler will put there your error message, or redirect to your configured success view (don't forget the 'ajax-redirect' prefix in your configuration) if everything is ok.

XT Ajax samples show you how to do this.

Let us know.
Cheers,

Sergio B.

[slimchrisp]

Have you verified that your validation works without that Ajax stuff?
It could be a problem in your validation code ... please post more of your code.

Yeah, it definitely works without it. It worked until I tried to do this via ajax. I'm using valang.

  <bean id="loginValidator" class="org.springmodules.validation.valang.ValangValidator">
    <property name="valang">
      <value>
        <![CDATA[
          { password : ? is not blank : 'Password must be specified'}
          { emailAddress : ? is not blank : 'Email Address must be specified'}
        ]]>
      </value>
    </property>
  </bean>

and i've added the validator to my controller.

<property name="validator" ref="loginValidator" />

I'm using a redirect view in my controller, but even when i comment out my interceptor, the redirect does not work via ajax. It does call the controller that I'm redirecting to, but the page does not refresh. it did work from a non ajax call.

The DefaultValidationHandler will put there your error message, or redirect to your configured success view (don't forget the 'ajax-redirect' prefix in your configuration) if everything is ok.

Will this fix that problem? It will make the page refresh? I'm not sure where 'ajax-redirect' goes. The issue I'm trying to solve right now though, is how to get a handle on the returned response. My interceptor gives this debug statement:

2006-11-02 13:47:53,056 DEBUG xt.ajax.AjaxInterceptor::sendResponse(338)  - Sending ajax response: <?xml version="1.0"?> <taconite-root xml:space="preserve"> <taconite-replace-children contextNodeID="password" parseInBrowser="true"></taconite-replace-children><taconite-replace-children contextNodeID="emailAddress" parseInBrowser="true"></taconite-replace-children><taconite-replace-children contextNodeID="password" parseInBrowser="true">Password must be specified</taconite-replace-children><taconite-execute-javascript  parseInBrowser="true"><script type="text/javascript">new Effect.Highlight("password",{"startcolor":"#FF0A0A"});</script></taconite-execute-javascript><taconite-replace-children contextNodeID="emailAddress" parseInBrowser="true">Email Address must be specified</taconite-replace-children><taconite-execute-javascript  parseInBrowser="true"><script type="text/javascript">new Effect.Highlight("emailAddress",{"startcolor":"#FF0A0A"});</script></taconite-execute-javascript> </taconite-root>

but when i view the firefox javascript console, i'm getting an error in springxt.js. I get the error contextNode has no properties in this function in springxt.js.

    function getReplaceChildren(domNode,xml,doRemoveChildren) {
        var domChildNode=null;
        if(doRemoveChildren){
            while(contextNode.childNodes.length >0){
                contextNode.removeChild(contextNode.childNodes[0]);
            }      
        }
        for(var i=0;i<xml.childNodes.length;i++){
            domChildNode=handleNode(xml.childNodes[i]);
            if(domChildNode!=null) {
                domNode.appendChild(domChildNode);
            }
        }              
    }

Not sure why I'm not getting a handle to the response. Thanks again for your help.

[slimchrisp]

just a note, i think my validation problem may deal with submitting passwords via ajax. is there something special you need to do for passwords?

[sbtourist]

I'm not sure where 'ajax-redirect' goes. The issue I'm trying to solve right now though, is how to get a handle on the returned response. My interceptor gives this debug statement:

2006-11-02 13:47:53,056 DEBUG xt.ajax.AjaxInterceptor::sendResponse(338)  - Sending ajax response: <?xml version="1.0"?> <taconite-root xml:space="preserve"> <taconite-replace-children contextNodeID="password" parseInBrowser="true"></taconite-replace-children><taconite-replace-children contextNodeID="emailAddress" parseInBrowser="true"></taconite-replace-children><taconite-replace-children contextNodeID="password" parseInBrowser="true">Password must be specified</taconite-replace-children><taconite-execute-javascript  parseInBrowser="true"><script type="text/javascript">new Effect.Highlight("password",{"startcolor":"#FF0A0A"});</script></taconite-execute-javascript><taconite-replace-children contextNodeID="emailAddress" parseInBrowser="true">Email Address must be specified</taconite-replace-children><taconite-execute-javascript  parseInBrowser="true"><script type="text/javascript">new Effect.Highlight("emailAddress",{"startcolor":"#FF0A0A"});</script></taconite-execute-javascript> </taconite-root>

but when i view the firefox javascript console, i'm getting an error in springxt.js. I get the error contextNode has no properties

The "ajax-redirect" prefix goes in your controller success view, that must be configured as follows: "ajax-redirect:/destination.page".

Regarding the "contextNode has no properties" error, this should be because you missed to define HTML elements where to put error messages. In your sample they sould be elements with id equal to "password" and "emailAddress".

Let me know how it proceeds.

Cheers!

Sergio B.

[sbtourist]

just a note, i think my validation problem may deal with submitting passwords via ajax. is there something special you need to do for passwords?

You are right: I see there's a bug in Taconite regarding password submission.

Can you open a Jira issue?

Cheers,

Sergio B.

[slimchrisp]

I have created jira issue http://opensource.atlassian.com/proj...browse/MOD-256

Regarding the "contextNode has no properties" error, this should be because you missed to define HTML elements where to put error messages. In your sample they sould be elements with id equal to "password" and "emailAddress".

Sweet. Works perfectly.

The "ajax-redirect" prefix goes in your controller success view, that must be configured as follows: "ajax-redirect:/destination.page".

I'm sorry, but I'm still not exactly sure how to configure this. Is that an entry in my xxx-servlet.xml where my controller is configured? Something like

<property name="formView" value="ajax-redirect:somePage" />

When I redirect this way, everything is called as it should be. I can tell by my logs. But my browser does not redirect and refresh the page.

      String view = "ajax-redirect:/someView";

      logger.debug("redirecting to [" + view + "]");
      RedirectView next = new RedirectView(view, true);
      
      return new ModelAndView(next);

???

Thanks again Sergio.

[slimchrisp]

interesting. it seems this works with returning a model and view this way:

      
ModelAndView modelAndView = new ModelAndView("ajax-redirect:/viewName");

but not using a redirectview. that seems kind of weird. but hey, i got what i want now.

thanks again sergio!

[sbtourist]

interesting. it seems this works with returning a model and view this way:

      
ModelAndView modelAndView = new ModelAndView("ajax-redirect:/viewName");

but not using a redirectview. that seems kind of weird.

It is all right, it's not weird: the Ajax redirect handling process is different than the normal RedirectView process, so you have to directly pass the view name.
I'm sorry, maybe I didn't explain well ... but all is well what it ends well
I'm happy that now everything is ok.

Cheers!

Sergio B.

[slimchrisp]

thanks again sergio. i couldn't have done it without your help.

as far as the tarconite bug goes, i guess that fix will make it into a future release?