[Solved] Trigger qtip on validation failure

[franko75]

Hi, I'm trying to combine qTip with the jQuery validationEngine - when a form submitted via ajax comes back as failed with errors, I want to generate a qTip popup. It's unusual to want to overlay the validation errors with a pop up, but on this occasion there is a good reason for it!

In this code, the failure function should trigger the qTip pop up, but the url for the content is never requested. I have tried replacing $(this) with the $('input#eligibility') selector, but this makes no difference. I have also tested that the failure callback gets called, the console.log('test') line works as expected.

Any help greatly appreciated!

JS Code

$('input#eligibility').live("click", function(){
			$(".form_container form").validationEngine({
				ajaxSubmit: true,
				ajaxSubmitFile: $(this).attr('action'),
				success :  function() {
					var url = $('input.next').attr('rel');
					ajaxFormStage(url);
				},
				failure : function() {
					//console.log('test');
					$(this).qtip(
      				{
        				content: {
            				// Set the text to an image HTML string with the correct src URL to the loading image you want to use
            				text: '<img src="/media/images/wait.gif" alt="Loading..." />',
            				url: '<?php echo url::base(); ?>help/ineligible'
         				},
         				hide: 'unfocus',
         				style: {
            				tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            				border: {
               					width: 10,
               					radius: 10
            				},
							width: {
								min: 200, 
								max: 400
							},
            				name: 'light', // Use the default light style
         				},
      				});
				}
			});
		});

[Craig]

franko, add into your code show.ready as true, since you're binding it on an event and want it to show immediately:

JS Code

$('input#eligibility').live("click", function(){
         $(".form_container form").validationEngine({
            ajaxSubmit: true,
            ajaxSubmitFile: $(this).attr('action'),
            success :  function() {
               var url = $('input.next').attr('rel');
               ajaxFormStage(url);
            },
            failure : function() {
               //console.log('test');
               $(this).qtip(
                  {
                    content: {
                        // Set the text to an image HTML string with the correct src URL to the loading image you want to use
                        text: '<img src="/media/images/wait.gif" alt="Loading..." />',
                        url: '<?php echo url::base(); ?>help/ineligible'
                     },
                     show: {
                        when: false,
                        ready: true
                     },
                     hide: 'unfocus',
                     style: {
                        tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
                        border: {
                              width: 10,
                              radius: 10
                        },
                     width: {
                        min: 200, 
                        max: 400
                     },
                        name: 'light', // Use the default light style
                     },
                  });
            }
         });
      });

[franko75]

Thanks for the reply Craig. I tried your suggestion but this results in neither the validation errors or the qtip content being shown. If I comment out the qtip code, the validation errors appear as they should, but there seems to be some sort of conflict with the code i have at the moment. Any other ideas?

[franko75]

Got it sorted - problem was using $(this) from my callback - once I changed it to the element ID everything worked correctly. Thanks again Craig