asked on

jQueryUI Tooltip with Validate Plug In Issues

Hi

I have a form and I am using the validate plug in to handle all of the validation.

When the user clicks on submit, i want a tool tip to appear for any items that fail the validation.

I have tried to use qTip 2, Tooltipster and the JqueryUI tooltip and have encountered issues with each one.

I won't use qTip2 as its not supported for jquery 1.9.

I managed to get tooltipster working but whenever i resized the screen. It didn't correctly reposition the tooltips with respect to the form items. After playing around, it didn't seem to like using percentages for widths in the parent containers.

I would really like to get this working in JQueryUI. However I am having several problems.

$('#reg_contentwrapper input[type="text"]').tooltip();


$("#register_form").validate({

                        showErrors: function(errorMap, errorList) {
                              $("div.errorbox").html("The Form contains "
                              + this.numberOfInvalids()
                              + " errors, see details below.");
                              this.defaultShowErrors();
                  },

                        errorPlacement : function (error, element) {
                              //error.appendTo(element.parent());//

                              $(element).tooltip( "option", "content", $(error).text() );

                              },

etc...

this causes the website to crash. if i add $(element).tooltip(); before $(element).tooltip( "option", "content", $(error).text() ); it will work, but this is duplicating the tooltip

i imagine it's because the tooltip that was created initially, isn't the same as the tooltip attached to the element. how do i get around this ?

Thanks

Gary

Have you got a live link?
Do these tooltips already exists and then you are trying to change the content?

maddisoncr

ASKER

hi

sure

use cloud-contractor.co.uk, then click on login and then click register now, then register

i've set up a tool tip for every 'text' input item and then i am trying to change the content for any item that has an error. the idea is that a user will hover over the textbox to see the corresponding error

Gary

Can you sort out the duplicate libraries (and css).
When you ajax the page you only need the html - everything else should be controlled by your central js and css
Not much point trying to debug when there are multiples of the same scripts.

So basically you just need to load this block of code
<div id="reg_contentwrapper">
...
</div>

If there are any other css/js files that are not included in the main page then move them to the main page.

p.s. Scrolling framed elements are one of the most annoying designs in website - people look to the browser scroll bar to scroll, not somewhere on the page.

maddisoncr

ASKER

just had a quick tidy up !

i agree about the scrolling. i'll take that out later

Gary

Still getting all the duplicate js.

maddisoncr

ASKER

sorry about that, i just opened it up and it hadn't saved after i took it out. should be gone now

maddisoncr

ASKER

all the js should be cleared up if you get chance to have a look for me

thanks

Gary

Once the DOM has loaded it won't trigger again, that means your document.ready in the sign up form is useless as it is loaded later and hence anything in there is not bound to any elements.
So I suggest you change the document.ready function in register.php to a normal js function.
Amend the .load function on the parent page to the full ajax code, then you can add a success call and execute the function in register.php to bind those functions.

Example ajax

$.ajax({type:'POST',url:'/register.php.php',success:function() {register_functions()}});

register_functions() is the name you choose for the replacement of document.ready in register.php

maddisoncr

ASKER

Thanks Gary

I'm quite new to using jQuery but i understand what you are suggesting. Just for my understanding, if the document.ready function is useless why does the validation work ?

The validations works as i'd expect it to and it's contained within that document. ready within register ?

maddisoncr

ASKER

i've changed the .load to

$.ajax({type:'POST',url:'register.php',success:function(result) {

register_functions();
$(".rowwrapper").html(result);

}});

and i've removed the $document.ready and used a function instead.

The page loads but what do i do with the function ?

I have removed the document ready and replaced it with register_function but nothing will run ?

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

maddisoncr

ASKER

Great help, thank you