Javascript not working in IE8 help please =(

Hello everyone. I’m really new to javascript and im trying to get a small blog together for my daughter. She fell inlove with a theme so we got the them for her ( this is for wordpress ) however this theme uses jquery and JS files.

It is working fine in Firefox, but will not work in any version of IE. I’m currently using IE8. I was told by someone else i aasked and he pointed out wherethe errors are in the JS file causing the problem, but i do not know how to fix it or what to do. Basically it makes the comments link not work at all in IE, and makes the comments open on the index page, which they should not be.

Below i’ll paste the JS code and then below that paste where i was told there was an issue. Any help will be greatly appreciated, and i will answer any questions to the best of my ability, thank you in advance!

base.js



    project:    STPo - Demain j'arrête v3
    created:    2009-09-01
    author:     Christophe ANDRIEU

    summary:    CONSTANTES
                UTILITIES
				FUNCTIONS
                WINDOW.ONLOAD

----------------------------------------------------------------------------- */

/*  =CONSTANTES
----------------------------------------------------------------------------- */
var d = document;
var w = window;
var debug = null;
window.config = {
    debug : false
}


/*  =UTILITIES
----------------------------------------------------------------------------- */
/* getElementsByClassName when not supported */
var matchAll = function() {
    var node = arguments[1] || document;
    var elms = node.getElementsByTagName('*');
    var className = arguments[0];
    if (d.getElementsByClassName) {
        return node.getElementsByClassName(className);
    }
    else {
        var regExp = new RegExp('\\\\b'+className+'\\\\b');
        var array = [];
        for (var i = 0; i < elms.length; i++) {
            var current = elms[i];
            if (current.className.match(regExp)) {
                array.push(current);
            }
        }
        return array;
    }
};

/* logs into a textarea for IE and in the console for others */
var debuger = function() {
    if (window.config.debug && !debug && typeof console == 'undefined') {
        var parent = d.getElementsByTagName('div')[0];
        var body   = d.getElementsByTagName('body')[0];
        var debug  = d.createElement('textarea');
        debug.setAttribute('rows', 10);
        debug.setAttribute('cols', 80);
        debug.setAttribute('name', 'debug');
        body.insertBefore(debug, parent);
        window.debug = debug;
    }
    else if (window.config.debug && console) {
        log('Debug mode : on');
    }
};
var log = function(x) {
    if (typeof console != 'undefined')
        console.log(x);
    else if (debug) {
        debug.value += x + '\
';
        debug.scrollTop = debug.scrollHeight;
    }
};

/*  =FUNCTIONS
----------------------------------------------------------------------------- */
var commentsPanel = function(){
	
	var myCommentLink = jQuery('#commentLink');
	var myCommentsArea = jQuery('#commentsArea');
	
	if ((myCommentLink) && (myCommentLink.length != 0)){
	
		// adds the link on the commentLink
		myCommentLink.html(
			'<a href="#"> (' +
			myCommentLink.html().toLowerCase().split(' (')[1].split(')')[0] +
			')</a>'
		);
		
		var myCommentLinkA = myCommentLink.children('a:first');
		
		// comments panel open or not
		if (window.location.toString().indexOf('comments') != -1){
			
			myCommentLinkA.addClass('on');
			myCommentsArea.show();
			
		}
		else {
			
			myCommentsArea.hide();
			
		}
		
		// onclick
		myCommentLinkA.bind('click', function(){
			
			if (myCommentLinkA.hasClass('on')){
				
				myCommentLinkA.removeClass('on')
				myCommentsArea.hide();
				window.location.hash = '#nocom';
				
			}
			else{
				
				myCommentLinkA.addClass('on')
				myCommentsArea.slideDown('slow');
				window.location.hash = '#comments';
				
			}
			
			myCommentLinkA.blur();
			return false;
			
		});
	}
}

var closePopin = function(){
	
	// close button
	jQuery('#closeButton, #mask').bind('click', function(){
		
		jQuery('#popinContainer, #mask').remove();
		return false;
		
	});
	
}

var commentSubmit = function(){

	jQuery('#errorMsg').hide();
	
	jQuery('#commentForm').submit(function(){
		
		var hasError = false;
		jQuery('.required, #spam1').parent('p').removeClass('error');
		jQuery('#errorMsg').hide();
		
		jQuery('.required').each(function(){
			
			var myVal = jQuery(this).val();
			
			if (!/[a-zA-Z0-9ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÑÒÓÔÕÖÙÚÛÜÝà áâãäåçèéêëìÃ*îïñòóôõöùúûüýÿ]/.test(myVal)){
				
				jQuery(this).parent('p').addClass('error');
				hasError = true;
				
			}
		});
		
		log(jQuery('#spam1').attr('checked'))
		
		// spam filter à l'arrache
		if (jQuery('#spam1').attr('checked') == true){
			
			jQuery('#spam1').parent('p').addClass('error');
			hasError = true;
			
		}
		
		if (hasError) {
			
			jQuery('#errorMsg').show();
			return false;
		}
		
		else{

			//if (document.getElementsByTagName('html')[0].className.indexOf('msie6') == -1){
			
				// Loader
				jQuery('body').prepend('<div id="mask"></div><div id="popinContainer"><div id="popinContent"><a href="#" id="closeButton" title="fermer"></a><img src="img/skin/ajax-loader.gif" alt="postage en cours..." id="ajaxLoad" /></div></div>');
				
				closePopin();
				
				// AJAX send
				s = jQuery(this).serialize();
				myAction = jQuery(this).attr("action");
				
				jQuery.ajax({
					type: "POST",
					data: s,
					url: myAction,
					error: function(myObject, textStatus, errorThrown){
						//alert('Ca a foiré. Pour la peine tu te tapes une sale alerte Javascript du siècle dernier !')
					},
					success: function(retour){
						jQuery('#ajaxLoad').remove();
						jQuery('#popinContent').addClass('merci');
						jQuery('#popinContent').append('<p>Ton commentaire a bien été posté.</p>');
						jQuery('#commentsArea').load(window.location.href.toString().split('#comments')[0] + " #commentsArea", function(){
							
							commentSubmit();
							
						});
					}
				});
				
				return false;
				
			//}
		
		}
		
	});
	
}

var allEpisodes = function(){
	
	// ul >> select
	jQuery('#allEpisodes ul').after('<form action="#"><select id="allEpisodesSelect"></select></form>');
	
	jQuery('#allEpisodes li a').each(function(){
		
		if (jQuery(this).hasClass('on')) var myOn = ' selected="selected"';
		else var myOn = '';
		jQuery('#allEpisodesSelect').append('<option value="' + jQuery(this).attr('href') + '"'+ myOn +'>' + jQuery(this).text() + '</option>');
	
	});
	
	jQuery('#allEpisodes ul').remove();
	
	// click
	jQuery('#dateStuff a').bind('click', function(){
		
		jQuery('body').prepend('<div id="mask"></div><div id="popinContainer"><div id="popinContent" class="episodes"><a href="#" id="closeButton" title="fermer"></a></div></div>');
		
		closePopin();
				
		jQuery('#allEpisodesSelect').clone().prependTo("#popinContent");
		jQuery('#allEpisodesSelect').bind('change', function(){
			
			window.location = jQuery(this).attr('value');
			
		});
		
		jQuery(this).blur();
		return false;
		
	});
	
}

/*  =WINDOW.ONLOAD
----------------------------------------------------------------------------- */
jQuery(document).ready(function(){

    // Functions
	commentsPanel();			// replier/déplier le panneau de commentaires
	commentSubmit();			// vérif du formulaire de commentaires
	allEpisodes();				// popin épisodes
	
});

Part I was told is triggering the bug:

// adds the link on the commentLink
		myCommentLink.html(
			'<a href="#"> (' +
			myCommentLink.html().toLowerCase().split(' (')[1].split(')')[0] +
			')</a>'
		);

The suspect code is okay and has no trouble.

The link is just a place-holder, with the onclick event triggering the comments to be slid up or down.

The code expects that the area for the comment link has an identifier of commentLink and that the area for the comments has an identifier of commentArea

Hi! Thanks for the reply, but honestly I have no idea what you’re saying. I’m not a web-designer I just was wondering if anyone could fix it or tell me what is wrong. The code in question pops up in error pages in IE which is another reason im concerned about it, but you’re saying it’s okay? If it’s okay do you know what the problem could be?

The code relies on some expectations of what the page contains.

We’ll be able to help you much better with this if you can point is to the original page that this code came from.

All that can be said for now, is that the code expects a commentlink section with a value contained within parenthesis.

For example:


<div id="commentLink">(5)</div>

If we knew more about the original place that the script came from, we could tell you more.

this is the theme in question

cara.oh-so-lovely. com

the developer in the Javascript file itself’s site is listed as

i left out the http because i dont have enough posts to post links yet :frowning:

Thank you. We will also want to compare with the HTML code on your daughters wordpress page, so a link to that means we can then help.

Edit:

Although there is a problem. The script at cara.oh-so-lovely.com doesn’t work. My web browser says that they don’t have jQuery defined.

well that cara one IS my daughters, it was sent to us by the developer which i will link below, and when i asked her of this she stated she does not code for IE, just chrome and firefox and im pretty sure she just downloaded the script and implemented it into her layouts… ive noticed a few of her things dont work in IE, but with this one in particular its thee only glitch and id love to get it worked out if possible for my daughter. I will link you to the test theme as well where my daughter first saw it.

This is the website and page where the theme was bought. Its second to last one on the right under themes for sale.

pinkfab.info/visitors/themes/

I have two jQuery files uploaded with this theme. could the problem be within those files and not the JS? ( i’m so lost and im sorry im so confusing, I really appreciate your time so far you’ve been wonderful )

The cara web site would have no trouble if jQuery were moved up above the base.js file. That has no bearing on your page though, so if we can view your wordpress page we can get the info we need to help you to resolve your issue.

There’s basically two approaches

  1. hack around with the script and come to an unsatisfactory patch
  2. find out what’s really causing the problem and resolve it

As you can imaging, I prefer the latter approach, because it means there’s less problems waiting for you later on down the road.

Edit:

The cara page is not the source template, but is your web page that you want to fix. Good news.

It helps to know what the error actually is.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Mon, 15 Mar 2010 05:01:48 UTC

Message: Object expected
Line: 259
Char: 1
Code: 0
URI: http://cara.oh-so-lovely.com/wp-content/themes/cara/js/base.js

Message: ‘html().toLowerCase().split(…).1’ is null or not an object
Line: 83
Char: 3
Code: 0
URI: http://cara.oh-so-lovely.com/wp-content/themes/cara/js/base.js

Normally the developer is the first point of call, when you face technical issues with what they provide.

I shall continue investigating however.

The script is expecting the comment parenthesis to have a space just before the opening parenthesis.

So, you will want to do 1 of two things:

  1. Either update the script so that split(’ (‘) has the space taken out and becomes split(’(')
  2. Or add a space before the HTML page comment parenthesis

I would go with the first of these solutions, and remove that space in the script.

okay I will try that, or both of those things, i cant thank you enough for all your help! I will see how it goes and let you know either way

Make sure too that the script loading jQuery occurs before the base.js script is loaded.

it worked! I took out the extra space and it works. thank you soooooooo much you are wonderful and should be paid for this. I’m so thrilled thank you again!

You’re very welcome. Thanks for the positive comment.