Why Object expected error in jquery?

Question

I have simple web page having html, css and jquery. Purpose of this page is to demo horizontal collapse pane.

<html>

<head>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
    <title>Sample HTML</title>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
        }

        #map {
            width: 10%;
            height: 100%;
            float: left;
        }

        #sidebar {
            width: 89%;
            height: 100%;
            float: left;
            border: 1px solid;
        }

        #toggle {
            height: 10%;
            float: right;
        }
    </style>
    <script type="text/javascript">
        $(window).load(function () {//this is error line

            $(document).ready(function () {
                $("#toggle").click(function () {
                    if ($(this).data('name') == 'show') {
                        $("#sidebar").animate({
                            width: '10%'
                        }).hide()
                        $("#map").animate({
                            width: '89%'
                        });
                        $(this).data('name', 'hide')
                    } else {
                        $("#sidebar").animate({
                            width: '89%'
                        }).show()
                        $("#map").animate({
                            width: '10%'
                        });
                        $(this).data('name', 'show')
                    }
                });
            });
        });
    </script>


    </head>
<body>

    <div id="map">
        <input type="button" data-name="show" value="Toggle" id="toggle"></div>
    <div id="sidebar">SIDEBAR</div>
</body>
</html>

I used IE debugger and it hits at $(window).load(function () saying Object expected. I do not understand why it is not working.

Also this page is taking long time to load.

are you loading the html file using the file protocol like `file://path-to-file` — Arun P Johny, Sep 25 '14 at 05:22
@ArunPJohny No. I it is saved on my desktop. And I am opening it using IE and Chrome, both not working. — Pranit Kothari, Sep 25 '14 at 05:25
*"it is saved on my desktop"* So you *are* loading it from the file system and not from a web server? FYI, you only need either `(window).load(...)` or `$(document).ready(...)` but not both and certainly not nested. — Felix Kling, Sep 25 '14 at 05:26
Based on the related questions, I'm 99% certain that you have to use `src="http://code.jquery.com/jquery-1.10.1.js"`. — Felix Kling, Sep 25 '14 at 05:30

score 0 · Answer 1 · edited May 23 '17 at 11:57

0

You need not to use $(window).load(function () { as $(document).ready is there becuase document.ready fires when DOM is ready and window.load fires when images or any other resources loads. See this for more information.

Your error is coming because of jquery library path is incorrect, so check below path once again

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>

I think it should start with http://

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>

And you can remove window.load after correcting the lib path and it should work.

<script type="text/javascript">

            $(document).ready(function () {
                $("#toggle").click(function () {
                    if ($(this).data('name') == 'show') {
                        $("#sidebar").animate({
                            width: '10%'
                        }).hide()
                        $("#map").animate({
                            width: '89%'
                        });
                        $(this).data('name', 'hide')
                    } else {
                        $("#sidebar").animate({
                            width: '89%'
                        }).show()
                        $("#map").animate({
                            width: '10%'
                        });
                        $(this).data('name', 'show')
                    }
                });
            });
    </script>

edited May 23 '17 at 11:57

Community

1
1

answered Sep 25 '14 at 05:26

Bhushan Kawadkar

28,279
5
35
57

1

Please explain why the use of `$(window).load(function () {` in this situation would generate the error mentioned in the question. – Felix Kling Sep 25 '14 at 05:27
1

To clarify why comment: While your suggestion is certainly correct, it doesn't solve the problem at hand. – Felix Kling Sep 25 '14 at 05:32
I am not aware of the error mentioned in question but `document.ready` fires when DOM is ready and `window.load` fires when all resources,DOM are ready so there is no point in using `document.ready` inside `window.load`. And as OP using DOM elements inside the jquery script then there is no use of `window.load` as such. I am finding the exact reason behind the error. – Bhushan Kawadkar Sep 25 '14 at 05:38
This error comes when jquery library path is not correct. – Bhushan Kawadkar Sep 25 '14 at 05:42
[Yep, that's what I am thinking as well](https://stackoverflow.com/questions/26031086/why-object-expected-error-in-jquery/26031172?noredirect=1#comment40774647_26031086). – Felix Kling Sep 25 '14 at 05:43
Oh yeah .. you already posted in comment, I found it on https://forum.jquery.com/topic/document-ready-throwing-object-expected-error :). I should have read comments first. – Bhushan Kawadkar Sep 25 '14 at 05:47

Why Object expected error in jquery?

1 Answers1