'AjaxUpload' is undefined

[Quetzal]

Hello

I have a Web page which, when the user clicks on 'Contact', a lightbox containing a form appears. This works fine. However, if the user clicks on 'Contact' from another page on the same site, the lightbox does not appear.

A small yellow error message appears in the botton left-hand site of the browser:

'AjaxUpload' is undefined
Line: 56
Char: 3
Code: 0
URI: http://stevehigham59.7host.com/final.../js/contact.js

contact.js looks like this:

$(document).ready(function () {
	$('#contact-form input.contact, #contact-form a.contact').click(function (e) {
		e.preventDefault();
		// load the contact form using ajax
		$.get("data/contact.php", function(data){
			// create a modal dialog with the data
			$(data).modal({
				closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
				position: ["15%",],
				overlayId: 'contact-overlay',
				containerId: 'contact-container',
				onOpen: contact.open,
				onShow: contact.show,
				onClose: contact.close
			});
		});
	});
	
	
	

	// preload images
	var img = ['cancel.png', 'form_bottom.gif', 'form_top.gif', 'loading.gif', 'send.png'];
	$(img).each(function () {
		var i = new Image();
		i.src = 'img/contact/' + this;
	});
});


var contact = {
	message: null,
	open: function (dialog) {
		// add padding to the buttons in firefox/mozilla
		if ($.browser.mozilla) {
			$('#contact-container .contact-button').css({
				'padding-bottom': '2px'
			});
		}
		// input field font size
		if ($.browser.safari) {
			$('#contact-container .contact-input').css({
				'font-size': '.9em'
			});
		}

		// dynamically determine height
		var h = 280;
		if ($('#contact-subject').length) {
			h += 26;
		}
		if ($('#contact-cc').length) {
			h += 22;
		}
		
		new AjaxUpload('#documents', {
		//action: 'upload.php',
		action: 'upload.php', // I disabled uploads in this example for security reaaons
		name: 'myfile',
		responseType: 'json',
		onSubmit: function(file, extension) {
			$("#loader").css('display','block');
			
			
		},
		onComplete : function(file,json){
			
			if(json.error=='No error')
			{
				$('#documents').css('display','none');
				$('#documentsname').val(json.filename);
				$('#documentnamedisplay').text(json.filename);
				
			}
			else
			{
				alert(json.error);
			}
			$("#loader").css('display','none');
		}	
	   });	

		var title = $('#contact-container .contact-title').html();
		$('#contact-container .contact-title').html('Loading...');
		dialog.overlay.fadeIn(200, function () {
			dialog.container.fadeIn(200, function () {
				dialog.data.fadeIn(200, function () {
					$('#contact-container .contact-content').animate({
						height: h
					}, function () {
						$('#contact-container .contact-title').html(title);
						$('#contact-container form').fadeIn(200, function () {
							$('#contact-container #contact-name').focus();

							$('#contact-container .contact-cc').click(function () {
								var cc = $('#contact-container #contact-cc');
								cc.is(':checked') ? cc.attr('checked', '') : cc.attr('checked', 'checked');
							});

							// fix png's for IE 6
							if ($.browser.msie && $.browser.version < 7) {
								$('#contact-container .contact-button').each(function () {
									if ($(this).css('backgroundImage').match(/^url[("']+(.*\.png)[)"']+$/i)) {
										var src = RegExp.$1;
										$(this).css({
											backgroundImage: 'none',
											filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' +  src + '", sizingMethod="crop")'
										});
									}
								});
							}
						});
					});
				});
			});
		});
	},
	show: function (dialog) {
		$('#contact-container .contact-send').click(function (e) {
			e.preventDefault();
			// validate form
			if (contact.validate()) {
				var msg = $('#contact-container .contact-message');
				msg.fadeOut(function () {
					msg.removeClass('contact-error').empty();
				});
				$('#contact-container .contact-title').html('Sending...');
				$('#contact-container form').fadeOut(200);
				$('#contact-container .contact-content').animate({
					height: '80px'
				}, function () {
					$('#contact-container .contact-loading').fadeIn(200, function () {
						$.ajax({
							url: 'data/contact.php',
							data: $('#contact-container form').serialize() + '&action=send',
							type: 'post',
							cache: false,
							dataType: 'html',
							success: function (data) {
								$('#contact-container .contact-loading').fadeOut(200, function () {
									$('#contact-container .contact-title').html('Thank you!');
									msg.html(data).fadeIn(200);
								});
							},
							error: contact.error
						});
					});
				});
			}
			else {
				if ($('#contact-container .contact-message:visible').length > 0) {
					var msg = $('#contact-container .contact-message div');
					msg.fadeOut(200, function () {
						msg.empty();
						contact.showError();
						msg.fadeIn(200);
					});
				}
				else {
					$('#contact-container .contact-message').animate({
						height: '30px'
					}, contact.showError);
				}
				
			}
		});
	},
	close: function (dialog) {
		$('#contact-container .contact-message').fadeOut();
		$('#contact-container .contact-title').html('Goodbye...');
		$('#contact-container form').fadeOut(200);
		$('#contact-container .contact-content').animate({
			height: 40
		}, function () {
			dialog.data.fadeOut(200, function () {
				dialog.container.fadeOut(200, function () {
					dialog.overlay.fadeOut(200, function () {
						$.modal.close();
					});
				});
			});
		});
	},
	error: function (xhr) {
		alert(xhr.statusText);
	},
	validate: function () {
		contact.message = '';
		if (!$('#contact-container #contact-name').val()) {
			contact.message += 'Name is required. ';
		}

		var email = $('#contact-container #contact-email').val();
		if (!email) {
			contact.message += 'Email is required. ';
		}
		else {
			if (!contact.validateEmail(email)) {
				contact.message += 'Email is invalid. ';
			}
		}

		if (!$('#contact-container #contact-message').val()) {
			contact.message += 'Message is required.';
		}

		if (contact.message.length > 0) {
			return false;
		}
		else {
			return true;
		}
	},
	validateEmail: function (email) {
		var at = email.lastIndexOf("@");

		// Make sure the at (@) sybmol exists and  
		// it is not the first or last character
		if (at < 1 || (at + 1) === email.length)
			return false;

		// Make sure there aren't multiple periods together
		if (/(\.{2,})/.test(email))
			return false;

		// Break up the local and domain portions
		var local = email.substring(0, at);
		var domain = email.substring(at + 1);

		// Check lengths
		if (local.length < 1 || local.length > 64 || domain.length < 4 || domain.length > 255)
			return false;

		// Make sure local and domain don't start with or end with a period
		if (/(^\.|\.$)/.test(local) || /(^\.|\.$)/.test(domain))
			return false;

		// Check for quoted-string addresses
		// Since almost anything is allowed in a quoted-string address,
		// we're just going to let them go through
		if (!/^"(.+)"$/.test(local)) {
			// It's a dot-string address...check for valid characters
			if (!/^[-a-zA-Z0-9!#$%*\/?|^{}`~&'+=_\.]*$/.test(local))
				return false;
		}

		// Make sure domain contains only valid characters and at least one period
		if (!/^[-a-zA-Z0-9\.]*$/.test(domain) || domain.indexOf(".") === -1)
			return false;	

		return true;
	},
	showError: function () {
		$('#contact-container .contact-message')
			.html($('<div class="contact-error"></div>').append(contact.message))
			.fadeIn(200);
	}
};

Could anyone advise, please?

Thanks.

Quetzal

[jscheuer1]

The AjaxUpload function is defined in this external script:

<script src="js/ajaxupload.js" type="text/javascript"></script>

associated via the above external script tag in the head of the working page, but not with the page(s) exhibiting the error.

There could also be other problems, but lacking this helper script is a 'deal breaker'.

[Quetzal]

Hello John

Many thanks for your post.

That did the trick! I have pasted the:

<script src="js/ajaxupload.js" type="text/javascript"></script>

into that Web page where it was missing and now the form appears.

I have noticed, incidentaly, that the page has a problem with alignment (images etc are left aigned and not centred as they should be). This is caused by the two forward strokes in the URL:

http://stevehigham59.7host.com/finalProof/imagemenu//rates.html

When one of the forward strokes is removed (in the address bar), the page centres as it ought to do.

Are these two forward strokes a JavaScript error, too? I have gone through my CSS files and cannot locate them.

Cheers again, John.

Quetzal

[jscheuer1]

I'm not seeing the double slash in the address bar or status bar of IE 7, Firefox 3.5 or Opera 10. What browser is that where you get that? Or perhaps you are linking to the rates page from somewhere I'm not aware of.

In any event, though this (having a non-standard address in the address bar) can affect scripts and stylsheets that are associated with the page via relative URI's (paths), it shouldn't affect absolute paths for these.

I also notice that the pages vary, but from here (where I'm not getting this non-standard address), it only appears to be a difference in the top padding or margin for either the body and/or main content area.

If I do paste in the non-standard address, yes, the styles and apparently only some of the scripts are not found.

More than likely this non-standard address is being caused by a typo you made in the href attribute of anchor link tag to this page, but it is also possible that some javascript or (if used) server side script is adding the extra slash. If it's just a typo, find it and fix it. If one of the latter, the script involved must be identified and corrected.

Is there any particular link on any particular page that I could click on that would cause this non-standard address?

Also, if one started out by pasting this:

http://stevehigham59.7host.com/finalProof/imagemenu//

into the browser's address bar, all the pages would be messed up.

[Quetzal]

Hello John

I have checked everything and all seems well now. I was seeing the // earlier today - maybe pasting the

<script src="js/ajaxupload.js" type="text/javascript"></script>

into each html page which uses the script did the trick.

Thanks again.

Steve