Canvas Support

small bug with the inline alert

5 replies · opened Jun 8, 2016

MMikeJun 8, 2016

when on the form you fill all of it but not the captcha, it gives you the red alert inline captcha invalid, so the customers will not refresh the page, just fill the form agaon (because the content of it automatically disapears unluckily i dont know if that can be solved), but after you fill it again and tick the captcha, the inline alert says message sent succesfully but it is not in green it is red because the "message successfully sent" appears on the alert red that said before invalid captcha, can we fix ? thanks !

Two years ago you told me by email you appreciate that I ask a lot of questions because you said "i am one of the customers that make the template goes more and more perfect", I just hope you guys still think this way and are not bothered by the amount of my questions :D

SSemicolon WebSTAFFJun 9, 2016

Hello,

We are Really not sure why that happens on your Website but this Definitely seems to be an Issue with an Incorrect/Incomplete Update as it works fne on Our Live Previews: http://themes.semicolonweb.com/html/canvas/contact-recaptcha.php .

Additionally, we have already fixed the issue with the Message Content disappearing on Incorrect reCaptcha. Please update the entire contactForm: function() with the following code: 

contactForm: function(){

	if( !$().validate ) {
		console.log('contactForm: Form Validate not Defined.');
		return true;
	}

	if( !$().ajaxSubmit ) {
		console.log('contactForm: jQuery Form not Defined.');
		return true;
	}

	var $contactForm = $('.contact-widget:not(.customjs)');
	if( $contactForm.length ');
				} else {
					$(form).find('.form-process').fadeIn();
				}

				$(form).ajaxSubmit({
					target: elementResult,
					dataType: 'json',
					success: function( data ) {
						if( elementLoader == 'button' ) {
							defButton.html( defButtonText );
						} else {
							$(form).find('.form-process').fadeOut();
						}
						if( data.alert != 'error' && elementRedirect ){
							window.location.replace( elementRedirect );
							return true;
						}
						if( elementAlert == 'inline' ) {
							if( data.alert == 'error' ) {
								var alertType = 'alert-danger';
							} else {
								var alertType = 'alert-success';
							}

							elementResult.addClass( 'alert ' + alertType ).html( data.message ).slideDown( 400 );
						} else {
							elementResult.attr( 'data-notify-type', data.alert ).attr( 'data-notify-msg', data.message ).html('');
							SEMICOLON.widget.notifications( elementResult );
						}
						if( $(form).find('.g-recaptcha').children('div').length > 0 ) { grecaptcha.reset(); }
						if( data.alert != 'error' ) { $(form).clearForm(); }
					}
				});
			}
		});

	});
}

This will definitely work fine.

Yes we absolutely feel the Same and will always do! And we are MORE THAN HAPPY to help you fix your issues for your Website as it in turn Helps us fix the Bugs in Canvas making it more Robust, Stable and Bug-Free! So we THANK YOU! :)

MMikeJun 9, 2016

the url you gave me doesnt show at the same time a page with the captcha and the inline alert, and because when the alert is not an inline one it dissapears after three seconds its normal that the problem wont happen, but the inline alert remains on the page so if you fill again the form and send it succesfully after ticking the captcha, the alert text appears in the same red alert that didnt disapear so its in red, i did not make an update from your template this time, i started all over the website from zero from your very last update :)

MMikeJun 9, 2016

and about the second part of the answer, first where did you put that update ? because I was already using the last version of the template, and second of all it doesnt work the page wont charge it remains blank after i changed your code, i put your code instead of :

	contactForm: function(){

		if( !$().validate ) {
			console.log('contactForm: Form Validate not Defined.');
			return true;
		}

		if( !$().ajaxSubmit ) {
			console.log('contactForm: jQuery Form not Defined.');
			return true;
		}

		var $contactForm = $('.contact-widget:not(.customjs)');
		if( $contactForm.length < 1 ){ return true; }

		$contactForm.each( function(){
			var element = $(this),
				elementAlert = element.attr('data-alert-type'),
				elementLoader = element.attr('data-loader'),
				elementResult = element.find('.contact-form-result');

			element.find('form').validate({
				submitHandler: function(form) {

					elementResult.hide();

					if( elementLoader == 'button' ) {
						var defButton = $(form).find('button'),
							defButtonText = defButton.html();

						defButton.html('<i class="icon-line-loader icon-spin nomargin"></i>');
					} else {
						$(form).find('.form-process').fadeIn();
					}

					$(form).ajaxSubmit({
						target: elementResult,
						dataType: 'json',
						resetForm: true,
						success: function( data ) {
							if( elementLoader == 'button' ) {
								defButton.html( defButtonText );
							} else {
								$(form).find('.form-process').fadeOut();
							}
							if( elementAlert == 'inline' ) {
								if( data.alert == 'error' ) {
									var alertType = 'alert-danger';
								} else {
									var alertType = 'alert-success';
								}

								elementResult.addClass( 'alert ' + alertType ).html( data.message ).slideDown( 400 );
							} else {
								elementResult.attr( 'data-notify-type', data.alert ).attr( 'data-notify-msg', data.message ).html('');
								SEMICOLON.widget.notifications( elementResult );
							}
							if( $(form).find('.g-recaptcha').children('div').length > 0 ) { grecaptcha.reset(); }
						}
					});
				}
			});

		});
	},
SSemicolon WebSTAFFJun 13, 2016

Hello,

Thank You so much for reporting this to us. This is Bug with the Code and we have fixed this in our Scheduled Next Update. Please update the contactForm: function() Function Block with the following code: 

contactForm: function(){

	if( !$().validate ) {
		console.log('contactForm: Form Validate not Defined.');
		return true;
	}

	if( !$().ajaxSubmit ) {
		console.log('contactForm: jQuery Form not Defined.');
		return true;
	}

	var $contactForm = $('.contact-widget:not(.customjs)');
	if( $contactForm.length ');
				} else {
					$(form).find('.form-process').fadeIn();
				}

				$(form).ajaxSubmit({
					target: elementResult,
					dataType: 'json',
					success: function( data ) {
						if( elementLoader == 'button' ) {
							defButton.html( defButtonText );
						} else {
							$(form).find('.form-process').fadeOut();
						}
						if( data.alert != 'error' && elementRedirect ){
							window.location.replace( elementRedirect );
							return true;
						}
						if( elementAlert == 'inline' ) {
							if( data.alert == 'error' ) {
								var alertType = 'alert-danger';
							} else {
								var alertType = 'alert-success';
							}

							elementResult.removeClass( 'alert-danger alert-success' ).addClass( 'alert ' + alertType ).html( data.message ).slideDown( 400 );
						} else {
							elementResult.attr( 'data-notify-type', data.alert ).attr( 'data-notify-msg', data.message ).html('');
							SEMICOLON.widget.notifications( elementResult );
						}
						if( $(form).find('.g-recaptcha').children('div').length > 0 ) { grecaptcha.reset(); }
						if( data.alert != 'error' ) { $(form).clearForm(); }
					}
				});
			}
		});

	});
},

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

MMikeJun 13, 2016

works fiiiiiiiine thanks !!!

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard