Link to home
Create AccountLog in
Avatar of maddisoncr
maddisoncr

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
Avatar of Gary
Gary
Flag of Ireland image

Have you got a live link?
Do these tooltips already exists and then you are trying to change the content?
Avatar of maddisoncr
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
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.
just had a quick tidy up !

i agree about the scrolling. i'll take that out later
Still getting all the duplicate js.
sorry about that, i just opened it up and it hadn't saved after i took it out. should be gone now
all the js should be cleared up if you get chance to have a look for me

thanks
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
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 ?
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
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer
Great help, thank you