Question

I have a main page that loads a content of a div:

    var content = $("#content_layout");
    //some code here
    content.load("claim_form.aspx?claim_no=" + file_number);

The claim_form.aspx has a drop down, and based on that drop down it should show the apropriate input fields. I set the index to be 1 and automatically load the first set of inputs. Here is some code to explain it better:

$("#request_type").change(function(e) {
    index = document.getElementById("request_type").selectedIndex;
    if (index == "0") {
        variable_content(1000);
        hide_all(900);
        show_div("#invoice_payment_button_layout", 900);
        real_index = "1";
    }
    else if (index == "1") {
        variable_content(1000);
        hide_all(900);
        show_div("#void_check_button_layout", 900);
        real_index = "2";
// and so on......

When I load the page for the first time, it works perfectly; however, when I hit F5 or access the page again via url, I see ALL the input fields. As if the index was every singe number….

I’m using IE7 for this (company requirement)…
Can anyone tell me how to fix the problem? So when I hit F5 or access the page again it does not show me all the stuff?

EDIT:
More Code:

//This is the first line
$(document).ready(function() {
//define some variables blah blah
hide_all(1); //I created this function (not sure if one exists so i specify)

then later:

function hide_all(speed) {
    $("#comment_box_layout").slideUp(speed);
    $("#invoice_payment_button_layout").slideUp(speed);
    $("#deductible_recovery_request_layout").slideUp(speed);
//so on with all the divs
}

Maybe it will be easier now?

Answer 1

Have you tried calling the hide_all() method on $(document).ready? It sounds like there is some funny CSS caching, so maybe by always hiding everything when the document is ready, you could set a clean base state.