JavaScript - Javascript Does Not Work With Firefox Latest Version

Hi,

i have a rating script which shows 5 stars and it allows users to vote out of 5 on certaiin things, the votes register ok but the stars dont change colour to show that the user has voted.

this has happened since my host upgraded to php 5.3 and i noticed on IE(which i never use much) it says there is an error on the page and that error says

Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Tue, 2 Feb 2010 20:00:42 UTC


Message: 'document.all[...]' is null or not an object
Line: 96
Char: 9
Code: 0
URI: rating.js

line 96 in the related file is
Code:

    }  else if(IE) {
        document.all[div2show].innerHTML = text;
    }

which only related to IE and not firefox so im unsure why my rating graphics do not show once selected.

here is the entire js file is there anything in there that might be preventing it?
Code:

/*
Page:           rating.js
Created:        Aug 2006
Last Mod:       Mar 11 2007
Handles actions and requests for rating bars.	
--------------------------------------------------------- 
ryan masuga, masugadesign.com
ryan@masugadesign.com 
Licensed under a Creative Commons Attribution 3.0 License.
http://creativecommons.org/licenses/by/3.0/
See readme.txt for full credit details.
--------------------------------------------------------- */

var xmlhttp
	/*@cc_on @*/
	/*@if (@_jscript_version >= 5)
	  try {
	  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP")
	 } catch (e) {
	  try {
	    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
	  } catch (E) {
	   xmlhttp=false
	  }
	 }
	@else
	 xmlhttp=false
	@end @*/
	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
	 try {
	  xmlhttp = new XMLHttpRequest();
	 } catch (e) {
	  xmlhttp=false
	 }
	}
	function myXMLHttpRequest() {
	  var xmlhttplocal;
	  try {
	    xmlhttplocal= new ActiveXObject("Msxml2.XMLHTTP")
	 } catch (e) {
	  try {
	    xmlhttplocal= new ActiveXObject("Microsoft.XMLHTTP")
	  } catch (E) {
	    xmlhttplocal=false;
	  }
	 }

	if (!xmlhttplocal && typeof XMLHttpRequest!='undefined') {
	 try {
	  var xmlhttplocal = new XMLHttpRequest();
	 } catch (e) {
	  var xmlhttplocal=false;
	  alert('couldn\'t create xmlhttp object');
	 }
	}
	return(xmlhttplocal);
}

function sndReq(vote,id_num,ip_num,units) {
	var theUL = document.getElementById('unit_ul'+id_num); // the UL
	
	// switch UL with a loading div
	theUL.innerHTML = '<div class="loading"></div>';
	
    xmlhttp.open('get', 'rpc.php?j='+vote+'&q='+id_num+'&t='+ip_num+'&c='+units);
    xmlhttp.onreadystatechange = handleResponse;
    xmlhttp.send(null);	
}

function handleResponse() {
  if(xmlhttp.readyState == 4){
		if (xmlhttp.status == 200){
       	
        var response = xmlhttp.responseText;
        var update = new Array();

        if(response.indexOf('|') != -1) {
            update = response.split('|');
            changeText(update[0], update[1]);
        }
		}
    }
}

function changeText( div2show, text ) {
    // Detect Browser
    var IE = (document.all) ? 1 : 0;
    var DOM = 0; 
    if (parseInt(navigator.appVersion) >=5) {DOM=1};

    // Grab the content from the requested "div" and show it in the "container"
    if (DOM) {
        var viewer = document.getElementById(div2show);
        viewer.innerHTML = text;
    }  else if(IE) {
        document.all[div2show].innerHTML = text;
    }
}

/* =============================================================== */
var ratingAction = {
		'a.rater' : function(element){
			element.onclick = function(){

			var parameterString = this.href.replace(/.*\?(.*)/, "$1"); // onclick="sndReq('j=1&q=2&t=127.0.0.1&c=5');
			var parameterTokens = parameterString.split("&"); // onclick="sndReq('j=1,q=2,t=127.0.0.1,c=5');
			var parameterList = new Array();

			for (j = 0; j < parameterTokens.length; j++) {
				var parameterName = parameterTokens[j].replace(/(.*)=.*/, "$1"); // j
				var parameterValue = parameterTokens[j].replace(/.*=(.*)/, "$1"); // 1
				parameterList[parameterName] = parameterValue;
			}
			var theratingID = parameterList['q'];
			var theVote = parameterList['j'];
			var theuserIP = parameterList['t'];
			var theunits = parameterList['c'];
			
			//for testing	alert('sndReq('+theVote+','+theratingID+','+theuserIP+','+theunits+')'); return false;
			sndReq(theVote,theratingID,theuserIP,theunits); return false;		
			}
		}
		
	};
Behaviour.register(ratingAction);

many thanks for any help
Luke

This is puzzling me.

It's an incremental search function. Any help for a Javascript novice much appreciated:

Code:

$(function () {
    $('#quickFilter').incrementalFilter({
        items: 'dl.entryList > dt',
        foundCounter: '#resultCount',
        totalCounter: '#totalCounter',
        minChars: 2
    }).focus();
})

... here's the rest of it:

Code:

(function($) {
    var IncrementalFilter = function(params){
        var setting = this.setting = {
            input: undefined,
            items: undefined,
            searchScope: '*',
            minChars: 2,
            useHighlight: true,
            foundCounter: undefined,
            totalCounter: undefined,
            highlightElem: $('<em class="highlight" />'),
            foundClass: 'found',
            zeroClass: 'zero'
        }
        $.extend(setting,params)

        this.input = $(setting.input);
        this.items = $(setting.items);
        this.minChars = setting.minChars;
        if(setting.foundCounter){
            this.totalCounter = setting.totalCounter;
            this.foundCounter = new IncrementalFilter.Counter(setting);
        }
        this.formerQuery = '';
        this.itemData = [];
        this.init();
    }

    IncrementalFilter.prototype = {

        makeData: function(){
            var that = this;
            this.items.each(function(){
                var obj = [$(this)]
                if($(this).is('dt')){
                    obj.push($(this).next())
                }
                that.itemData.push(new IncrementalFilter.SearchedItem(obj,that.setting));
            })
            if(this.foundCounter){
                this.foundCounter.refresh(this.itemData.length);
                if(this.totalCounter){
                    $(this.totalCounter).html(this.foundCounter.all)
                }
            }
        },

        processQuery: function(query){
            var tempq = this.escapeQuery(query)
            tempq = $.trim(tempq).split(/\s+/);
            var queries = []

            for(var i=0,l=tempq.length;i<l;i++){
                for(var j=0,m=tempq.length;j<m;j++){
                    if(i!=j && tempq[i] && (tempq[i] == tempq[j]
                       || RegExp(tempq[i]).test(tempq[j])
                       || tempq[i].length < this.minChars)){
                        tempq.splice(i,1)
                        l = m = tempq.length;
                    }
                }
                if(tempq[i]){
                    queries.push(tempq[i])
                }
            }

            if(queries.join(' ') != this.formerQuery){
                this.search(queries);
                this.formerQuery = queries.join(' ');
            }
        },

        escapeQuery: function(query){
            var escapeChars = '.+*^$?()[]{}';
            var res = query;
            for(var i=0,l=escapeChars.length;i<l;i++){
                var ec = escapeChars.charAt(i);
                res = res.replace(RegExp('\\'+ec,'g'),'\\'+ec);
            }
            return res;
        },

        search: function(queries){
            var that = this;
            var count = 0;
            $(that.itemData).each(function(){
                var self = this;
                var matchCount = 0;
                $.each(queries,function(){
                    if(RegExp(this,'i').test(self.text))
                        matchCount++;
                })
                if(matchCount == queries.length){
                    this.showItem()
                    this.clearHighlight(function(){
                        $.each(queries,function(){
                            self.highlightWord(this)
                        })
                    });
                    count++;
                }else{
                    this.hideItem();
                }
            })
            if(this.foundCounter){
                this.foundCounter.refresh(count)
            }
        },

        reset: function(){
            var that = this;
            $(this.itemData).each(function(){
                this.showItem();
                this.clearHighlight();
                if(that.foundCounter){
                    that.foundCounter.reset();
                }
            })
        },

        setEvent: function(){
            var that = this;
            this.input.bind('keyup',function(){
                var val = $(this).val();
                if(val.length >= that.minChars){
                    that.processQuery(val)
                }else{
                    that.reset();
                }
            })
        },

        init: function(){
            this.makeData();
            this.setEvent();
            if(this.input.val().length >= this.minChars){
                this.processQuery(this.input.val())
            }
        }
    }

    /**
     *@param obj {array}
     **/
    IncrementalFilter.SearchedItem = function(obj,setting){
        this.useHighlight = (setting.useHighlight && $.fn.highlightText && $.fn.removeOuterTag)
        if(this.useHighlight){
            this.highlightElem = setting.highlightElem || $('<em class="highlight" />');
            this.highlightExpr = /^<(\w+)/.exec($('<div />').append(this.highlightElem).html())[1]
                               + '.'+this.highlightElem.attr('class').split(/\s/).join('.');
        }
        this.text = '';
        this.obj = [];
        for(var i=0,l=obj.length;i<l;i++){
            var temp = obj[i];
            this.obj[i] = {'elem':temp,'orgsrc':temp.html()}
            this.text += obj[i].text();
        }
    }

    IncrementalFilter.SearchedItem.prototype = {
        hideItem: function(){
            $(this.obj).each(function(){
                this.elem.hide();
            })
            return this;
        },

        showItem: function(){
            $(this.obj).each(function(){
                this.elem.show();
            })
            return this;
        },

        clearHighlight: function(callback){
            if(!this.useHighlight) return this;
            var that = this;
            $(this.obj).each(function(){
                $(that.highlightExpr,this.elem).removeOuterTag()
            })
            if(callback) callback();
            return this;
        },

        highlightWord: function(word){
            if(!this.useHighlight) return this;
            var that = this;
            var query = new RegExp(word,'gi')
            $(this.obj).each(function(){
                this.elem.highlightText(query,that.highlightElem)
            })
            return this;
        }
    }

    IncrementalFilter.Counter = function(setting){
        if(!setting || !setting.foundCounter) return undefined;
        this.obj = $(setting.foundCounter);
        this.foundClass = setting.foundClass || 'found';
        this.zeroClass = setting.zeroClass || 'zero';
        this.all = undefined;

        this.refresh = function(count){
            this.obj.html(count);
            if(!this.all){
                this.all = count;
            }

            if(count == 0){
                this.zero()
            }else if(count < this.all){
                this.highlight();
            }
        }

        this.reset = function(){
            this.refresh(this.all);
            this.obj
                .removeClass(this.foundClass)
                .removeClass(this.zeroClass)
        }

        this.highlight = function(){
            this.obj
                .removeClass(this.zeroClass)
                .addClass(this.foundClass)
        }

        this.zero = function(){
            this.obj
                .removeClass(this.foundClass)
                .addClass(this.zeroClass)
        }

        return this;
    }

    $.fn.incrementalFilter = function(params){
        return this.each(function(){
            if(typeof params == 'string' || params.size){
                new IncrementalFilter({input:$(this),items:params})
            }else if(typeof params == 'object'){
                params.input = $(this);
                new IncrementalFilter(params)
            }
        });
    };

I'm using the Javascript Tabifier (found he http://www.barelyfitz.com/projects/tabber/) on a new website I'm building.

Here is the test page I've been trying it out on: http://www.myohmomma.com/test-2

It seems to be working well in IE, but doesn't even appear in Firefox. Any idea why?

Additionally, there seem to be some positioning issues when I view it in Firefox, which I'm thinking is a topic for the CSS forums, but I thought could be relevant to my issue, somehow.

I don't want to overwhelm anyone williing to help with code, so please let me know if there is more you need to see. This is what applies to the tabifier:

In the head of my php document:

[CODE]<script type="text/javascript" src="http://www.myohmomma.com/wp-includes/js/tabber-minimized.js"></script>[CODE]

In the sidebar of my php document:

[CODE] <div class="sidebar">
<div class="tabber">
<div class="tabbertab">
<h2>Welcome</h2>
<img src="images/Welcome.png" alt="" />
<div id="Connect">
<div id="Connect-01">
<img src="images/Connect_01.png" width="315" height="48" alt="" />
</div>
<div id="Connect-02">
<img src="images/Connect_02.png" width="27" height="87" alt="" />
</div>
<div id="Facebook">
<img src="images/Facebook.png" width="76" height="82" alt="" />
</div>
<div id="Connect-04">
<img src="images/Connect_04.png" width="21" height="87" alt="" />
</div>
<div id="Newsletter">
<img src="images/Newsletter.png" width="77" height="82" alt="" />
</div>
<div id="Connect-06">
<img src="images/Connect_06.png" width="21" height="87" alt="" />
</div>
<div id="Twiiter">
<img src="images/Twiiter.png" width="75" height="82" alt="" />
</div>
<div id="Connect-08">
<img src="images/Connect_08.png" width="18" height="87" alt="" />
</div>
<div id="Connect-09">
<img src="images/Connect_09.png" width="76" height="5" alt="" />
</div>
<div id="Connect-10">
<img src="images/Connect_10.png" width="77" height="5" alt="" />
</div>
<div id="Connect-11">
<img src="images/Connect_11.png" width="75" height="5" alt="" />
</div>
</div>

</div>


<div class="tabbertab">
<h2>Features</h2>
<p>Tab 2 content.</p>
</div>


<div class="tabbertab">
<h2>Categories</h2>
<p>Tab 3 content.</p>
</div>

<div class="tabbertab">
<h2>Search</h2>
<p>Tab 4 content.</p>
</div>


</div>
</div>[CODE]

From my CSS stylesheet:

[CODE].sidebar{
position: relative;
top:0px;
padding-top:20px;
padding-right:10px;
padding-left:10px;
padding-bottom:0px;
float:right;
width:350px;
}

.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
background:#ffffff;
}

.sidebar ul li{
padding: 10px 0 10px 0;
background:#ffffff;
}

.sidebar ul li h2{
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
color: #2d0a0b;
border-top: 1px solid #2d0a0b;
border-bottom: 1px solid #2d0a0b;
padding: 5px 0px 5px 0px;
background:#ffffff;
}

.sidebar ul ul li{
padding: 0;
background:#ffffff;
}


/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
REQUIRED to hide the non-active tab content.
But do not hide them in the print stylesheet!
--------------------------------------------------*/
.tabberlive .tabbertabhide {
display:none;
}

/*--------------------------------------------------
.tabber = before the tabber interface is set up
.tabberlive = after the tabber interface is set up
--------------------------------------------------*/
.tabber {
}
.tabberlive {
margin-top:1em;
}

/*--------------------------------------------------
ul.tabbernav = the tab navigation list
li.tabberactive = the active tab
--------------------------------------------------*/
ul.tabbernav
{
margin:0;
padding: 3px 0;
border-bottom: 0px solid #778;
font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
}

ul.tabbernav li a
{
padding: 3px 0.5em;
margin-left: 0px;
margin-right: 3px;
border: 1px solid white;
background: white;
text-decoration: none;
}

ul.tabbernav li a:link { color: #2d0a0b; }
ul.tabbernav li a:visited { color: #2d0a0b; }

ul.tabbernav li a:hover
{
color: #2d0a0b;
text-decoration:underline;
background: white;
border-color: white;
}

ul.tabbernav li.tabberactive a
{
color: #fbb1c0;
background-color: #2d0a0b;
border: 1px solid #2d0a0b;
}

ul.tabbernav li.tabberactive a:hover
{
color: #fbb1c0;
text-decoration:underline;
background: #2d0a0b;
border-bottom: 1px solid white;
}

/*--------------------------------------------------
.tabbertab = the tab content
Add style only after the tabber interface is set up (.tabberlive)
--------------------------------------------------*/
.tabberlive .tabbertab {
padding:5px;
border:10px solid #2d0a0b;

/* If you don't want the tab size changing whenever a tab is changed
you can set a fixed height */

height:285px;

/* If you set a fix height set overflow to auto and you will get a
scrollbar when necessary */

overflow:auto;
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}

#Connect {
position:absolute;
left:30px;
top:200px;
width:315px;
height:135px;
}

#Connect-01 {
position:absolute;
left:0px;
top:0px;
width:315px;
height:48px;
}

#Connect-02 {
position:absolute;
left:0px;
top:48px;
width:27px;
height:87px;
}

#Facebook {
position:absolute;
left:27px;
top:48px;
width:76px;
height:82px;
}

#Connect-04 {
position:absolute;
left:103px;
top:48px;
width:21px;
height:87px;
}

#Newsletter {
position:absolute;
left:124px;
top:48px;
width:77px;
height:82px;
}

#Connect-06 {
position:absolute;
left:201px;
top:48px;
width:21px;
height:87px;
}

#Twiiter {
position:absolute;
left:222px;
top:48px;
width:75px;
height:82px;
}

#Connect-08 {
position:absolute;
left:297px;
top:48px;
width:18px;
height:87px;
}

#Connect-09 {
position:absolute;
left:27px;
top:130px;
width:76px;
height:5px;
}

#Connect-10 {
position:absolute;
left:124px;
top:130px;
width:77px;
height:5px;
}

#Connect-11 {
position:absolute;
left:222px;
top:130px;
width:75px;
height:5px;
}[CODE]

I've visited the forums so many times as a reader and usually find solutions here. I'm usually good at figuring it out on my own, but I'm really stumped. I am new at this and I think I'm in over my head. I'd reallly appreciate some help.

Hi,

Using the following javascript:
Code:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">
</script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=1">
</script>

I am able to display the latest tweet of a user into a div.

However, I have a user-generated database of username's stored in an XML file and would like to list each username's latest tweet on a single page. Any thoughts on how I might be able to achive this? I'm new to javascript so forgive my stupidity.