Question

I am a predominantly PHP developer. I realize in this day and age specialization in one scripting language doesn’t cut it, but the fact remains that my skills at JavaScript and jQuery are pretty green. I am a novice at best. I can create my own code but Cross Browser compatibility remains a huge issue with my work in JavaScript.

Anyway, I have a script that filters products according to categories/subcategories. This is how it works: you select a category and the javascript in the background does its thing to filter the subcategories so that the options displayed are the ones pertaining to the parent category- a combination of these two filters the product line.

Here is my code:

function scategories(){

    //get the category option value from the category drop down bar
    var cat = (document.getElementById('categories').value);

    //get all the options from the subcategory drop down bar
    var subcat = document.getElementsByClassName('subcategories');

    var n=0;

    //if the category bar option is set to 0 display everything
    if(Number(cat)==0){
        Show(); 
    }

    //filter the subcategories
    while(subcat.item(n)){

        //if there is no match b/w the subcategories option and the categories id FILTER
        if(Number((subcat.item(n).value).split('|')[1]) != Number(cat) && Number(subcat.item(n).value) != 0){
            document.getElementsByClassName('subcategories')
                .item(n)
                .style
                .display="none";    
        }else{

            //else display the subcategory
            document.getElementsByClassName('subcategories')
                .item(n)
                .style
                .display="list-item";   
        }
        n++;
    }   
}

This code is pretty self explanatory I would say. I also have a shiftfocus function that shifts the focus from the current option selected in the subcategory to the default one which is ‘none’ whenever a new category is picked. This basically resets the subcategory.. here’s the code:

    function shiftfocus(){
        document.getElementsByClassName('subcategories')
            .item(0)
            .removeAttribute("selected");
        document.getElementsByClassName('subcategories')
            .item(0)
            .setAttribute("selected","selected");
    }

Shiftfocus is called onChange and scategories is called onClick.

Problem 1:
1) Firefox: Shiftfocus doesn’t shift the focus to the default option even though I can see it adds the ‘selected’ attribute.

2) Safari: Does not work at all.

---

EDIT: Problem 2 was the product of a careless mistake. I left open an anchor tag which was
creating havoc in IE. Should have double checked before bothering you
guys. Sorry. Problem 1 still persists.

---

Problem 2:
I understand none of us developers particularly like internet explorer. But I am willing to believe I have made a mistake here. I have some jQuery that fetches data from a script in another file via the native POST function and appends it to a table with the id “content”. This works fine on every browser, except IE. If I try going back to IE 7,8 compatibility mode the results are a little better (the data shows up broken in pieces though) and in IE9 compatibility mode nothing is appended at all! Here’s the code:

$.post("bagcontents.php", { 
    "Bid": $(this).attr('bid')
},
function(data){
    $("#content").empty().append(data);
    roundNumber();
    $('#processorder_hidden').attr('value',currentBid);
});


//append here
<div id="contents" style="overflow:auto;height:345px;padding-right:5px;">
    <form name="bag_contents" id="bag_contents" method="post" action="<?php _page ;?>">
        <table id="content">
        </table>           
        <input type="hidden" id="bag_contents_hidden" name="bag_contents_hidden" value="1" />       
    </form>
</div>

Any help will be appreciated. I tried outputting the fetched results with alert, alert(data), and the script is fetching everything just fine. Its the just the append part that fails 😐

Answer 1

Here are some suggestions and hope you find them somewhat useful.

Problem: 1
Instead of having the shiftfocus() set the to a specific value, have you tried using .val(”) just to clear it out. I can imagine that this will default to the first option.

Problem: 2
This will be hard to debug without knowing what data is coming back from the server. Might be bad formatting or some syntax error on the rendered output.