Cross browser compatibility issue for showing and hiding div

Question

I have MVC app.

I have written below code in the JS in Create view. Basically on the basis of selection on drop down I show and hide the div. Now the problem is below code works perfectly in Google chrome and Mozilla Firefox. but now working in IE 8.

What should I do ?

$('#PaymentType').change(function(){            
            var ptype=document.getElementById("PaymentType").value;        
            if(ptype=="On Account")
            {
                $(".InvoiceDiv").hide();
            }
            else
            {
                $(".InvoiceDiv").show();
            }

        });

How to test it ? means, when I change the item in combo box the div get hide, and its works in firefox...how to test in firebug the changed event ? — bnil, May 19 '13 at 05:00
For Handling using this link :http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tool — Harry Sarshogh, May 19 '13 at 05:13
The Eventbug extension has been released yesterday, see: http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/ — Harry Sarshogh, May 19 '13 at 05:15

score 2 · Accepted Answer · answered May 19 '13 at 06:42

2

I am not sure what real issue is but since you are using jQuery why don't you use it for your ptype, too? With this, cross-browser issue will be minimized (if not completely avoided).

$('#PaymentType').change(function(){            
    var ptype = $(this).val();        
    ...
});

Hope this helps.

answered May 19 '13 at 06:42

jinmichaelr

883
6
9

Thanks this helps... getElementById is not supported in IE 8. I am using the same. Which other property should I use ? If I wan to get value of other controls in same function ? – bnil May 19 '13 at 11:41
@user1650894 you mean calling other elements inside that function using jQuery? Take a look at jQuery selectors further here: http://api.jquery.com/category/selectors/ – jinmichaelr May 20 '13 at 07:53

Harry Sarshogh · Answer 2 · 2013-05-19T05:17:22.467

1

If your Js files has full of references to a method called document.getelementbyid Or order of your Js files and Css files which you import to program with < Link / > Tag , Reorder them and test it in IE i think that the reason your code breaks right at the beginning of the function.

edited May 19 '13 at 05:17

answered May 19 '13 at 04:56

Harry Sarshogh

2,137
3
25
48

thanks Ali, but i am quite confused , can you explain me in simple manner, I am new to MVC and scripts... – bnil May 19 '13 at 05:05

Cross browser compatibility issue for showing and hiding div

2 Answers2