AJAX validation with success message in J!s system message

Status
Not open for further replies.
O

otinanaipali

New Member
Hello,

I'd like to utilize AJAX validation in a form (in module position), but I need the "success" message to show in Joomla's system messages (<jdoc:include type="message" />) instead of a js alert box. How can I achieve this?

Thank you
 
I understand that J!s messages need to reload the page so that they can be displayed so I will go for a different approach:

I'd like the success message to display like the form validation message appears or just inside the form module. In any case, I'd like to avoid displaying the js alert because generally this is not a good UX.
 
I tried searching all possible files that may display the AJAX success message as an alert but no luck. Any help would be very much appreciated.

Thank you
 
Hi
I think you could achieve your first requirement by using a redirect plugin in the form (wiki page here) with these settings:

Jump page:
Code: 
{$_SERVER->REQUEST_URI}

Submission message - the success message text

Then under the "Module/Content redirect options" section, set:
Content redirect: same page
 
Since I'm utilizing AJAX validation I think I should stick to my second approach because that's what AJAX is for: Avoid reloading the page.

So, can you please help me disabling the js alert with the success message and instead display it inside the form module?
 
Ajax validation though is not the same as ajax submission - are you using both? If so then the alert is hardwired into the code - there's no other configuration option available I'm afraid.
 
I'm using AJAX submission as well, thus I'd like you to point me to the part of the code that fires this alert and suggest me a way to disable it and include the success message in my form module, just like the form validation message displays.
 
I agree that using an alert for the success message is kind of fugly / obtrusive, and I think we should provide an option not to do that. And the obvious place to put it instead is in the main error container, if one considers that more as a "main feedback container" rather than strictly for errors.

I'm playing around with the best way of achieving this with the minimal amount of code change. I've got it going to the point where I have a new form processing option ("Use Alerts on AJAX: Yes / No") so it's not putting up the alert, and using the main error container instead. The only issue I have is there seems to be some other async code running which is hiding that container, after I put the success msg in it. No doubt that because there are no actual errors, something else in our code "knows" to hide it.

I'll keep looking.

-- hugh
 
It might be safer to inject after the global error message, as you have seen its display is dependant on whether the form has errors in it.
 
Thank you for looking at it guys. I think that Rob has a good point here. Injecting the success message inside the form error container will depend its display on whether there's an error in the form or not. So, I guess an additional container outside the error message would be more manageable and elegant in terms of later manipulation.
 
Yeah, I was just trying to get away without making template modifications, and seeing if we could treat that container more as a "submissions results / status" rather than "errors".

Which is why I went with the fugly alert in the first place, LOL! I was in a hurry working on some module AJAX issues for a client a while back, and just needed a quick and dirty way of showing the success message, which originally wasn't shown at all on AJAX submission from a module.

-- hugh
 
I'm sure there must be a way to display the success message other than in the js alert. Even if it is in a less elegant way and I mean by inject the text directly from the code and not necessarily loaded dynamically. Any suggestions at this point?
 
OK I've added this in this commit https://github.com/Fabrik/fabrik/commit/6c9a1cbdf77eafccd3c067f798093f311bb3a3db
Once updated your form module will have a new 'Ajax Save alert' option, set it to 'no' and the success message will be injected into the top of the module.

I'm sure there must be a way to display the success message other than in the js alert.
Click to expand...
Please be aware that when it comes to creating new features, we can't provide a guaranteed resolution of the issue. In my first reply I said we didn't have an option to do what you were after, and provided an alternative solution which whilst not exactly what you wanted would have resolved the issue.

Coding is a slow process, whilst it may appear 'simple', to 'just do x' it rarely is.
For example in this instance we needed to:

* Consider what the most appropriate solution is (no point starting to code something which is inherently wrong)
* Create a new module option
* Provide translation strings for the module option label and description.
* Alter the module code to pick up on the option and inject it into the application data
* Alter the form view to get this new option and inject it into the form's js object.
* Create a new method in the form's js object that takes the option and either shows the alert or injects the message.
* Test before saving the module to ensure existing modules work the same
* Test with the module having both yes/no options selected.
* Fix all the little issues that resolves from those test.
* Test again etc.....

I'm just trying to set expectations about how quickly issues like this can realistically be resolved

Cheers Rob
 
This feature works great, however I located a small bug.

When submitting the form and validation is successful, the success message appears as it should in the form module. So far so good.

However, if you submit the form again (with new values and without reloading the page) and the form fails AJAX validation, both messages are showing in the form module (success and error message). The success message is visible since the page didn't reload, and the error message displays since it failed AJAX validation. I think there should be some sort of a switch between these two messages.

You can give it a try here:
http://www.entec.biz/consultants/en/#contact
 
I added an "onSuccess" setting at AJAX request to fadeIn/fadeOut the success message but still the bug remains because "onSuccess" returns true even if the form doesn't pass AJAX validation. Once again, when you submit the form successfully and then resubmit it (without reloading the page) and validation fails, you still have both messages displayed.

I'm sure you will come up with an appropriate fix.

Thank you
 
Just FYI, onSuccess has nothing to do with validation, it's part of AJAX itself, specifically the method that gets called when the AJAX call completes successfully, i.e. a valid AJAX response was received back from the server. Determining what that response was and what to do with the response is down to the logic inside the on

Can you enable Fabrik debug mode, in our global options (button top right of any Fabrik backend main page)? I need to load the uncompressed JS to see what's going on.

-- hugh
 
I've committed a change which should fix this, although I haven't really been able to test it, as I have some other (unrelated) issues with the form module I'm working on, which are causing some issues ...

-- hugh
 
Hi Hugh,

I used "onSuccess" because I needed an event to run a function that checks the height of the textarea after submitting the form, taking advantage of your function that clears or keeps the values in the fields after validating. I know this event is not related to AJAX validation but it did help me run a custom function to expand or contract the textarea based on the content.

After thorough testing on your edits regarding showing/hiding the success message without reloading the page, I must say that it works like a charm.

You may test it yourself on:
http://www.entec.biz/consultants/en/#contact

Thank you very much for your help.
 
  • Like
Reactions: rob
No problem, glad you are happy.

Just be aware of the "take away" from this ... what may seem to be a really trivial change can often involve a lot more work than you might think, and even at the Pro support level, we can't always guarantee that we'll make changes to the product to meet your requirements. In this case we did, but it took half a day of our combined time, when all was said and done.

-- hugh
 
Status
Not open for further replies.

Useful links

  • Create a Fabrik Account (Downloads)
  • Create a Forum Account
  • Fabrik Wiki
  • Fabrik 4 Changelog /Install /Upgrade
    • We are in need of some funding.
    More details.

    Thank you.

    Members online

    No members online now.
    Total: 133 (members: 0, guests: 133)
    Back
    Top