CODEWITHSUNDEEP
javascript.netfirefoxvisibility
Mike Thunder
Mike Thunder

Reputation: 449

JavaScript works in IE, but not Firefox

In my .NET project I'm using a Button in HTML page that brings a hidden <div>. That <div> contains a form to insert a company.

HTML:

<div class="top-div-where-is-my-ADD-button">
    <h2>
        Search:
        <input type="text" id="search" />
        <div id="divADD" onclick="AddCompany()">
            <span>Add Company</span></div>
    </h2>
</div>

    <div id="hide" style="visibility: hidden; height: 0px; padding-bottom: 10px;">
    <table id="CompanyDetails" class="company" style="width: 100%; text-align: center;">
.........
</div>

JavaScript:

function AddCompany() {
    HideCompany();
    $(hide).css({ visibility: "visible", height: "auto" });
    var a = document.getElementById("divbuttonSaveCompany");
    a.onclick = InsertCompany; 
}

function InsertCompany() {
    var a = document.getElementById("Name").value;
    var b = document.getElementById("Address").value;
    var c = document.getElementById("Country").value;
    var d = document.getElementById("Phone").value;
    var e = document.getElementById("Fax").value;
    var f = document.getElementById("Email").value;
    var gg = document.getElementById("Contact");
    var g = gg.options[gg.selectedIndex].value;
    $.ajax({
        url: '@Url.Action("AddCompany", "Company")',
        data: { nameCompany: a, address: b, country: c, phone: d, fax: e, email: f , contact: g},
        dataType: "html",
        type: "POST",
        error: function () {
            alert("error");
        },
        success: function (data) {
            alert("Company was successfully added! ");
            $("#all").html(data);
        }
    });
}
function HideCompany() {
    $(hide).css({ visibility: "hidden", height: "0" });
    $("#Name").val("");
    $("#Address").val("");
    $("#Country").val("");
    $("#Phone").val("");
    $("#Fax").val("");
    $("#Email").val("");
}

So basically in IE when I push the button AddCompany the hidden <div> appears, but in FF doesn't.

Does anyone know what I need to do to fix this?

Upvotes: 2

Views: 394

Answers (3)

adrienfb
adrienfb

Reputation: 33

Have you tried using the display property instead of visibility?

When using visibility th eelement takes up space even if not displayed, using display the element take sup no space, so you don't need worrying about the height.

Also you seem to be using jQuery, could you toogle the visibility of your div using

$(hide).show();

$(hide).hide();

or simply

$(hide).toggle();

These are jQuery shortcuts that use the css display property (see doc)

Upvotes: 1

Pointy
Pointy

Reputation: 413720

The problem is this:

$(hide)

That works in IE because IE makes a global variable from every element with an "id". Firefox won't do that.

Change all references to $(hide) to $('#hide').

Upvotes: 3

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382132

Use the jQuery hide function to hide an element, and the show function to display it.

Setting the height to 0 is non-standard.

Upvotes: 1

Related Questions