Question

I have a simple ajax page that adds 2 numbers.

When I run in IE, the async callback works.

When I run in Firefox it doesn’t work.

I get the correct return value in Firebug but lblSum remains blank in Firefox.

It has something to do with the return false at the end of the btnAdd click handler.

There is a server-side handler in case Javascript is disabled, so in the Javascript I add a return false.

<script type="text/javascript">
    var pageWebForm1 = {
        txt1: document.getElementById('TextBox1'),
        txt2: document.getElementById('TextBox2'),
        lblSum: document.getElementById('LblSum'),
        btnAdd: document.getElementById('BtnAdd'),
        init: function() {
            this.btnAdd.onclick = function() {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        xhrCallback(xhr.responseText);
                    }
                }
                xhr.open("POST", "Handler.ashx", true);
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send("x=" + pageWebForm1.txt1.value + "&" + "y=" + pageWebForm1.txt2.value);
                return false;
            }
        }
    }
    pageWebForm1.init();

    function xhrCallback(retval) {
        pageWebForm1.lblSum.innerText = retval;
    }
</script>

Answer 1

It has nothing to do with the return false statement. Your problem is innerText is IE only. Another stackoverflow post on a cross-browser solution.