Javascript and Firefox ISSUES

[bturner]

My javascript code works in IE but not in Firefox. Is there anyone that can help with this. If so, I can post my script and see where the problem is. I haven't used javascript for long so my experience with it is limited. Cannot figure out what it is on my own. Need Help!

[tgreer]

Firefox itself will help. Use the "JavaScript Console" under the Tools menu to see the errors.

[bturner]

tgreer - Thanks for that. I am going to try that and see if it fixes my issues.
thx again

[bturner]

Using the javascript console gave me the error that I have been getting but it didn't help any further than that. Should I post my script to see to see if there are errors in it or why it isn't working?

[tgreer]

Why not post the error, first?

[bturner]

function _TF_trimWhitespace(txt) {
    var strTmp = txt;
    //trimming from the front
    for (counter=0; counter<strTmp.length; counter++)
        if (strTmp.charAt(counter) != " ")
            break;
    //trimming from the back
    strTmp = strTmp.substring(counter,strTmp.length);
    counter = strTmp.length - 1;
    for (counter; counter>=0; counter--)
        if (strTmp.charAt(counter) != " ")
            break;
    return strTmp.substring(0, counter+1);
}

function _TF_showAll(tb) {
    for (i=0;i<tb.rows.length;i++)
    {
        tb.rows[i].style.display = "";
    }
}

function _TF_shouldShow(type, con, val) {
    var toshow=true;
    if (type != null) type = type.toLowerCase();
    switch (type)
    {
        case "item":
            var strarray = val.split(",");
            innershow = false;
            for (ss=0;ss<strarray.length;ss++){
                if (con==_TF_trimWhitespace(strarray[ss])){
                    innershow=true;
                    break;
                }
            }
            if (innershow == false)
                toshow=false;
        break
        case "full":
            if (val!=con)
                toshow = false;
        break
        case "substring":
            if (val.indexOf(con)<0)
                toshow = false;
        break
        default: //is "substring1" search
            if (val.indexOf(con)!=0) //pattern must start from 1st char
                toshow = false;
            if (con.charAt(con.length-1) == " ")
            { //last char is a space, so lets do a full search as well
                if (_TF_trimWhitespace(con) != val)
                    toshow = false;
                else
                    toshow = true;
            }
        break
    }
    return toshow;
}

function _TF_filterTable(tb, conditions) {
    //given an array of conditions, lets search the table

    for (i=0;i<tb.rows.length;i++)
    {
        var show = true;
        var rw = tb.rows[i];
        for (j=0;j<rw.cells.length;j++)
        {
            var cl = rw.cells[j];
            for (k=0;k<conditions.length;k++)
            {
                var colKey = cl.getAttribute("TF_colKey");
                if (colKey == null) //attribute not found
                    continue; //so lets not search on this cell.
                if (conditions[k].name.toUpperCase() == colKey.toUpperCase())
                {
                    var tbVal = cl.innerText;
                    var conVals = conditions[k].value;
                    if (conditions[k].single) //single value
                    { 
                        show = _TF_shouldShow(conditions[k].type, conditions[k].value, cl.innerText);
                    } else { //multiple values
                        for (l=0;l<conditions[k].value.length;l++)
                        {
                            innershow = _TF_shouldShow(conditions[k].type, conditions[k].value[l], cl.innerText);
                            if (innershow == true) break;
                        }
                        if (innershow == false)
                            show = false;
                    }
                }
            }
            //if any condition has failed, then we stop the matching (due to AND behaviour)
            if (show == false)
                break;
        }
        if (show == true)
            tb.rows[i].style.display = "";
        else
            tb.rows[i].style.display = "none";
    }
}

/** PUBLIC FUNCTIONS **/
//main function
function TF_filterTable(tb, frm) {
    var conditions = new Array();
    if (frm.style.display == "none") //filtering is off
        return _TF_showAll(tb);

    //go thru each type of input elements to figure out the filter conditions
    var inputs = frm.tags("INPUT");
    for (i=0;i<inputs.length;i++)
    { //looping thru all INPUT elements
        if (inputs[i].getAttribute("TF_colKey") == null) //attribute not found
            continue; //we assume that this input field is not for us
        switch (inputs[i].type)
        {
            case "text":
            case "hidden":
                if(inputs[i].value != "")
                {
                    index = conditions.length;
                    conditions[index] = new Object;
                    conditions[index].name = inputs[i].getAttribute("TF_colKey");
                    conditions[index].type = inputs[i].getAttribute("TF_searchType");
                    conditions[index].value = inputs[i].value;
                    conditions[index].single = true;
                }
            break
        }
    }
    var inputs = frm.tags("SELECT");
    //able to do multiple selection box
    for (i=0;i<inputs.length;i++)
    { //looping thru all SELECT elements
        if (inputs[i].getAttribute("TF_colKey") == null) //attribute not found
            continue; //we assume that this input field is not for us
        var opts = inputs[i].options;
        var optsSelected = new Array();
        for (intLoop=0; intLoop<opts.length; intLoop++)
        { //looping thru all OPTIONS elements
            if (opts[intLoop].selected && (opts[intLoop].getAttribute("TF_not_used") == null))
            {
                index = optsSelected.length;
                optsSelected[index] = opts[intLoop].value;
            }
        }
        if (optsSelected.length > 0) //has selected items
        {
            index = conditions.length;
            conditions[index] = new Object;
            conditions[index].name = inputs[i].getAttribute("TF_colKey");
            conditions[index].type = inputs[i].getAttribute("TF_searchType");
            conditions[index].value = optsSelected;
            conditions[index].single = false;
        }
    }
    //ok, now that we have all the conditions, lets do the filtering proper
    _TF_filterTable(tb, conditions);
}

function TF_enableFilter(tb, frm, val) {
    if (val.checked) //filtering is on
    {
        frm.style.display = "";
    } else { //filtering is off
        frm.style.display = "none";
    }
    //refresh the table
    TF_filterTable(tb, frm);
}

function _TF_get_value(input) {
    switch (input.type)
    {
        case "text":
             return input.value;
        break
        case "select-one":
            if (input.selectedIndex > -1) //has value
                return input.options(input.selectedIndex).value;
            else
                return "";
        break;
    }
}

//util function that concat two input fields and set the result in the third
function TF_concat_and_set(salText, salSelect, salHidden) {
    var valLeft = _TF_get_value(salText);
    var valRight = _TF_get_value(salSelect);
    salHidden.value = valLeft + valRight;
}

[bturner]

Here is the error that I keep getting. The page opens but it won't work from there.

"A script on this page may be busy, or it may have stopped responding. you can stop the script now, or you can continue to see if the script will complete."

Either way it never completes. If I stop it or continue. The code I submitted is used as an include in my page.

I am new to all of this so bear with me. Sorry for any stupid questions. :cheesy:

[tgreer]

That's a lot of code to debug... forgive me for not being more helpful, but if you're new at this, then how did you write all this code? If you DIDN'T write the code, then perhaps you'd get better support from whomever did?

If I have time this weekend, I may take a closer look.

[jswindell]

That's a lot of code to debug... forgive me for not being more helpful, but if you're new at this, then how did you write all this code? If you DIDN'T write the code, then perhaps you'd get better support from whomever did?

If I have time this weekend, I may take a closer look.

tgreer,
I believe the author of the code is Sidney Chong. Here is a link to the demo for this code called "TableFilter".

http://www.codeproject.com/jscript/tablefilter.asp?df=100&forumid=2552&exp=0&select=894102

In the post the author states:
"Browser Compatibility This script and the demo were developed and tested on the IE platform only, since the project did not require Netscape compatibility. It shouldn't be too difficult to make it work on Netscape and I'll probably get round to it when I have the time. I would appreciate any help in this area as well."

Plus there are some posts that seems to indicate that Firefox compatibility has not been figured out yet.

Using Firebug it appears the this line
var inputs = frm.tags("INPUT");
is an issue for Firefox. It registers the error "Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead."

However it looks like IE can reference form fields by "TYPE".

Is there an equivalent Firefox call or would the code need to be restructured to pass the names of the form fields that need to be processed?

thanks,
John

[tgreer]

You can use the cross-browser DOM method "getElementsByTagName".

[jswindell]

You can use the cross-browser DOM method "getElementsByTagName".

Excellent thanks for the quick response! After I posted my question I sort of stumbled ("Googled" ) on that method by accident. Is there something I can read that is a good primer on the DOM model?

FWIW I used Firebug to debug the tablefilter code and will be posting the details on the originating site. It turns out that fix and one other change ,replace <variable0> = <variable1>.innerText references to <variable0> = <variable1>.innerHTML, got the code working perfectly.

thanks again,
John

[tgreer]

The World Wide Web Consortium maintains all the standards and documentation.

[jblacdao]

Excellent thanks for the quick response! After I posted my question I sort of stumbled ("Googled" ) on that method by accident. Is there something I can read that is a good primer on the DOM model?

A good source of documentation would be at www.w3schools.com. They have a full tutorial on HTML DOM. It would be best to start there coz u can test out the tutorials on the site itself. I'm also starting to learn web programming myself and I find resources there to be most useful