CODEWITHSUNDEEP
jqueryhtmlinternet-explorer
Si8
Si8

Reputation: 9225

How to modify code to work with IE <= 9

I have the following code which works fine in Chrome and IE 10 and FF but does not work in IE 8 and most likely in IE 9 as well:

<script type = "text/javascript">
$(document).ready(function () {
    var $j = jQuery.noConflict();
    console.dir($j("#Button1"));
    $j("#Button1").click(function () {
        var textbox = document.getElementById("TextBox1").value;
        if (textbox.length > 0) {
            //alert("Search query is not empty and redirecting...");
            window.location.href = "http://www.mypagep.com/search_results.aspx?searchtext=" + textbox + "&folderid=0&searchfor=all&orderby=title&orderdirection=ascending";
        }
        else {
            alert("Search query is empty");
            document.getElementById("TextBox1").focus();
        }
    });
    $j('#TextBox1').keyup(function () {
        var $th = $j(this);
        $th.val($th.val().replace(/[^a-zA-Z0-9 ]/g, ''));
    });
    $j('#TextBox1').keypress(function (e) {
        var textbox = document.getElementById("TextBox1").value;
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 13) {
            if (textbox.length > 0) {
                e.preventDefault();
                window.location.href = "http://www.mypage.com/search_results.aspx?searchtext=" + textbox + "&folderid=0&searchfor=all&orderby=title&orderdirection=ascending";
            }
            else {
                e.preventDefault();
                alert("Search query is empty");
                document.getElementById("TextBox1").focus();
            }
        }
    });
});
</script>

I am using the following for the library link:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

I am using a CMS which seems to conflict with JQuery and that's why I am forced to use the line: var $j = jQuery.noConflict(); and use $j instead of the plain $ symbol

Functionality: If the user enters any non valid characters in the textbox the characters will be deleted. If the user presses enter in the textbox and there are characters there the user will be directed to the search page otherwise they will be displayed with an alert box. Same thing for the Search button, if the user presses but no text is in the textbox the user will be displayed with an alert box and nothing will happen, but if there is texts inside the textbox the user will be directed to the search page.

We are forced to use IE8 because some other softwares so I am trying to get it to work in older version of IE :/

How do I modify the code so it works with IE browser version that are not up to date?

Upvotes: 0

Views: 116

Answers (1)

ajp15243
ajp15243

Reputation: 7950

Your issue is that console.dir does not exist in IE8, even with the developer tools open (the console object doesn't exist in < IE9 when dev tools are closed). Change this to console.log, or remove it. For IE8 code, you probably want to keep console calls out of it unless you need them for that particular moment, due to needing the dev tools open for it.

Additionally, you should strongly consider Spudley's comment about your placement of your call to jQuery.noConflict(). This should go above the $(document).ready call, and change it to $j(document).ready so that your .ready() call is using the no conflict jQuery variable.

Upvotes: 2

Related Questions