How to clear the red error balloons on my page

Hi - I am developing my first real website - wow so much to learn...

I am using Joomla with BreezingForms; BreezingForms has a... er... "feature" whereby field validation failures result in red error balloons (that's nice) -- but those error balloons remain on the screen(?)/window(?) (not sure what the right term is...) when clicking the "back" button.

Can any of you js/css/html gurus tell me how to clear all the red error balloons when I click on the back button?  

Because I'm such a noob at this, it's taken me HOURS just to figure out that the element names for my fields are e.g. ff_elem227 and their associated error balloons are e.g. ff_elem227formError (for my Date of Birth field)

I can clear the balloons by hovering over them one at a time, or by typing anything into each field.  This deletes the node e.g.:

<div class="formError ff_elem227formError" style="top: 481.64772176742554px; left: 213.8068084716797px; margin-top: 0px; opacity: 0.87;"><div class="formErrorContent">Please enter your Date of Birth (MM/DD/YYYY)
</div><div class="formErrorArrow formErrorArrowBottom"><div class="line1"><!-- --></div><div class="line2"><!-- --></div><div class="line3"><!-- --></div><div class="line4"><!-- --></div><div class="line5"><!-- --></div><div class="line6"><!-- --></div><div class="line7"><!-- --></div><div class="line8"><!-- --></div><div class="line9"><!-- --></div><div class="line10"><!-- --></div></div></div>

Open in new window


It seems to me the easiest way to clear all the red error balloons on demand (e.g. when clicking the back button) is to delete the nodes with class="formErrorContent"

Can someone please take a look and validate my thinking (or show me a better way) - and I need the associated code to delete the nodes (I imagine some jquery that deletes the nodes when clicking on the back button)

My site is http://www.leasetobuyhouston.com/index.php/tenant-buyer-application

Fill out the first page and click next (you'll need a valid date e.g. 12/12/2012 and SSN e.g. 111-11-1111; all other fields only need 1 character; select any state)

On the second page, click next without filling anything in.  This will display a bunch of red balloons.

Then click "back" and you'll see what I'm talking about.

Thanks-
Sam
SAbboushiAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
You could attach an event to the back button in your document.ready

jQuery(".bfPrevButton").click(function(){
     jQuery(".formError").hide()
})

Open in new window

0
SAbboushiAuthor Commented:
Thanks Gary -- is that what the code is doing to clear the balloons (e.g. when hover over them)?
0
GaryCommented:
Uh?
It hides the tooltips when you click the back button
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

SAbboushiAuthor Commented:
What I'm asking is whether that is the manner in which the existing BreezingForms code is hiding the tooltips?  In other words, did you look at the code on the webpage, or are you just giving me a solution that you believe should work based upon the snipped I posted above?

I'm trying to work within the BreezingForms framework which has the facility for me to add scripts via the UI, whereas  I believe your solution would require me to make changes to the html or php script someplace (and I don't know where)

At least, this is my noob understanding... my head is kinda spinning as I'm trying to figure this out...
0
GaryCommented:
Ahh ok.
I don't know how the plugin is doing it but it would be something similar.
You just need to add the code above into your js file inside a document.ready (which should already exist)
I don't know BreezingForms so I cannot be more specific - but there should be a js file somewhere.
0
SAbboushiAuthor Commented:
OK - I think I'm getting close...

btw I'm using Chrome debug tools; I noticed that the balloons fadeout, so I did a search on "fade" and see that the following code is how the balloons are being removed (by jquery.validationEngine.js)

            if (!ajaxValidate) {
                var linkTofield = JQuery.bfvalidationEngine.linkTofield(caller);
                var closingPrompt = "." + linkTofield;
                JQuery(closingPrompt).fadeTo("fast", 0, function() {
                    JQuery(closingPrompt).remove();
                });

Open in new window



For the back button, BreezingForms has this script:
function ff_previouspage(element, action)
{
    if (ff_currentpage > 1){
        ff_switchpage(ff_currentpage-1);
        self.scrollTo(0,0);
    }
} // ff_previouspage

Open in new window


To test that I'm on the right track, I added the customized jquery statement to remove a specific balloon:

function ff_previouspage(element, action)
{
    if (ff_currentpage > 1){
        ff_switchpage(ff_currentpage-1);
        self.scrollTo(0,0);

                JQuery(".ff_elem926formError").fadeTo("fast", 0, function() {
                    JQuery(".ff_elem926formError").remove();
                };

    }
} // ff_previouspage

But I'm doing something wrong; this change prevents other scripts from running like the "next page" button.

But I've determined that this seems to be the place to add your code to clear the balloons.  Can you see anything wrong syntax-wise?
0
GaryCommented:
MIssing a closing bracket
                JQuery(".ff_elem926formError").fadeTo("fast", 0, function() {
                    JQuery(".ff_elem926formError").remove();
                };
)

Open in new window

0
SAbboushiAuthor Commented:
Huh?  I think our code is identical...?
0
SAbboushiAuthor Commented:
Ah...

                JQuery(".ff_elem926formError").fadeTo("fast", 0, function() {
                    JQuery(".ff_elem926formError").remove());
                };

Open in new window


Let me try that...
0
GaryCommented:
Typo
                JQuery(".ff_elem926formError").fadeTo("fast", 0, function() {
                    JQuery(".ff_elem926formError").remove();
                });

Open in new window

There is a closing bracket - )
0
SAbboushiAuthor Commented:
Nope... "next page" button doesn't work when I add the jquery to the back button (so I can't even get to the next page to test the back button code...)

function ff_previouspage_clearBalloons(element, action)
{
    if (ff_currentpage > 1){
        ff_switchpage(ff_currentpage-1);
        self.scrollTo(0,0);

                JQuery(".ff_elem926formError").fadeTo("fast", 0, function() {
                    JQuery(".ff_elem926formError").remove());
                };

    }
} // ff_previouspage_clearBalloons

Open in new window


Any other thoughts?
0
GaryCommented:
You're still missing the closing bracket - line 9

function ff_previouspage_clearBalloons(element, action)
{
    if (ff_currentpage > 1){
        ff_switchpage(ff_currentpage-1);
        self.scrollTo(0,0);

                JQuery(".ff_elem926formError").fadeTo("fast", 0, function() {
                    JQuery(".ff_elem926formError").remove());
                });

    }
} // ff_previouspage_clearBalloons 

Open in new window

0
SAbboushiAuthor Commented:
He He!  I added the bracket to line 8, so the corrected code is:

function ff_previouspage_clearBalloons(element, action)
{
    if (ff_currentpage > 1){
        ff_switchpage(ff_currentpage-1);
        self.scrollTo(0,0);

                JQuery(".ff_elem926formError").fadeTo("fast", 0, function() {
                    JQuery(".ff_elem926formError").remove();
                });

    }
} // ff_previouspage_clearBalloons

Open in new window


PERFECT - so now how can I do this for all the elements like I did for ff_elem926formError?
0
GaryCommented:
Use .formError

                JQuery(".formError").fadeTo("fast", 0, function() {
                    JQuery(".formError").remove();
                });

Open in new window

Personally I would just remove them and forget the fade, the aesthetics of them fading out while another screen is showing looks wrong.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SAbboushiAuthor Commented:
OH... just BEAUTIFUL!!!  Thanks Gary -- you are my hero today!

With Best Regards-
Sam
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.