Why is this json script not working in IE7 & 8, but works in all other browsers?

[DBookatay]

I am almost done with my sites rebuild and am now in the testing phase. While testing in IE7 and 8 i found out that becuase of  a json script I have my jquery scripts will not work properly, even though they do in all other browsers, including IE9.

 

The page is: http://www.carcityofdanbury.com/New/?cat=01&do=View&stock=18481

 

The script is the Info Request form, something in this line: ".append("<p>Thank you " + data.name + ",</p><p class=\"indent\">we recieved your info request " + data.for + " on our<br />'.$vehicle.' and will contact you shortly.</p>")" is causing the jquery tabs to no longer work.

 

I did the php and jquery coding, but hired someone to do the json, so I do not know how to fix this. Any ideas?

[trq]

Have you tried inspecting data within firebug ? what does it look like?

[haku]

$vehicle

 

jQuery uses $vehicle as an alias. Maybe this is causing your conflict.

[nogray]

Make sure your JSON is correct and the last item does not have a comma after it.

[DBookatay]

Tried both suggestions and neither worked... On stackoverflow.com someone said: "The issue is with data.for and it sounds a bit like you (the person who wrote the code) are trying to access one of the reserved names. Even though data.for should be valid, IE doesn't like names which it thinks are special (class for example). data.class would cause a problem in IE, even though it's valid.

 

Try to rename data.for to something else data._for for example. Make sure you update the 01/Resources/infoRequest.php PHP file to return the new value as well." so I changed data.for to data.test and it did solve the issue in IE8, but IE7 still screws up my jquery.

 

Here is the entire code, anybody see anything wrong?

<script language="javascript" type="text/javascript">
$(document).ready(function() {

// Tabs
	$("#tabs").tabs();

// Google map
	$(\'#embed\').gmap3(
		{action: \'addMarker\', lat:41.40372, lng:-73.45844, map:{center: true, zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP}}
	);

// Pic popup
	$("#viewPics").fancybox({
		\'type\': \'iframe\', \'transitionIn\': \'fade\', \'transitionOut\': \'fade\', \'width\': 900, \'height\': 500, \'autoScale\': false, \'scrolling\': \'no\'
	});

// Form Validation
	jQuery.validator.messages.required = "";
	$("#infoForm").validate({

		invalidHandler: function(e, validator) {
			var errors = validator.numberOfInvalids();
			if (errors) {
				var message = errors == 1
					? \'You missed 1 required field.\'
					: \'You missed \' + errors + \' required fields\';
				$("li.Error span").html(message);
				$("li.Error").show();
			} else {
				$("li.Error").hide();
			}
		},

		onkeyup: false,
		submitHandler: function(form) {
			$.ajax({
				url: "01/Resources/infoRequest.php",
				type: "POST",
				cache:false,
				data: $("#infoForm").serialize(),
				dataType: "json",
				success: function(data) {
					$("li.Error").hide();
					$("#contact_form").html(\'<div id="message"></div>\');
					$("#message").html("<h2>Info Request Submitted!</h2>")
					.append("<p>Thank you " + data.name + ",</p><p class=\"indent\">we recieved your info request " + data.test + " on our<br />'.$vehicle.' and will contact you shortly.</p>")
					.hide()
					.fadeIn(2500, function() {
						$("#message").append("<p>Would you like to <a href=\"?cat=02&stock='.$stock.'\">prefill an application</a> now?</p>")
					});
				}
			});
		},

	});

});
</script>

[DBookatay]

Crap... I solved it. There was an extra comma

					onkeyup: false,
				submitHandler: function(form) {
					$.ajax({
						url: "01/Resources/infoRequest.php",
						type: "POST",
						cache:false,
						data: $("#infoForm").serialize(),
						dataType: "json",
						success: function(data) {
							$("li.Error").hide();
							$("#contact_form").html(\'<div id="message"></div>\');
							$("#message").html("<h2>Info Request Submitted!</h2>")
							.append("<p>Thank you " + data.name + ",</p><p class=\"indent\">we recieved your info request " + data.test + " on our<br />'.$vehicle.' and will contact you shortly.</p>")
							.hide()
							.fadeIn(2500, function() {
								$("#message").append("<p>Would you like to <a href=\"?cat=02&stock='.$stock.'\">prefill an application</a> now?</p>")
							});
						}
					});
				},

 

The very last comma in the code had to be removed.