CODEWITHSUNDEEP
javascriptjquery
user2872068
user2872068

Reputation: 3

New to Jquery - it does not load or work at all on any browsers

I am very new to jQuery. I am trying to create a simple page. Using google's hosted jQuery. Based on many examples from stackoverflow, I have written this small piece of code. The change event never gets fired. I also do not see 'can not load' alert. If I look in the firebug and expand the script tag from google it shows it as 'undefined'. I am testing locally, not using any web-server. Can anyone please point out my mistakes? Code as below:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="./styles/qForm.css" rel="stylesheet" type="text/css"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script>
        if (!window.jQuery) {
            alert("can not load');
        }

        $('#choice').change(function () {
                    alert('here!');
                    if($(this).val() == '0') $(this).addClass('empty');
                    else $(this).removeClass('empty')
                });

        $('#choice').change();

    </script>

</head>
<body>
    <div id="surround">
        <div id="top">
            <h3 id="title"> Enter Information </h3>
        </div>
        <div id="bottom">
             <select id="choice">
                 <option style="color: gray;" value="0" selected="selected">Select...</option>
                 <option value="1">one</option>
                 <option value="2">two</option>
                 <option value="3">three</option>
             </select>
        </div>
    </div>
</body>

Upvotes: 0

Views: 76

Answers (4)

Andr&#233;s Torres
Andr&#233;s Torres

Reputation: 733

You have a typo on the quotes of the alert function.

alert("can not load');

The quotes must be the same. That's should be the first reason your code isn't working.

alert("can not load");

Upvotes: 2

Blazemonger
Blazemonger

Reputation: 92893

The <script src="//ajax...." isn't understood by your browser when using a local file. Change this to <script src="http://ajax...."

Upvotes: 0

Tim Withers
Tim Withers

Reputation: 12059

With jQuery use, it is typical to wrap it in a "ready" function.

<script>
$(document).ready(function(){
    $('#choice').change(function () {
        alert('here!');
    });
});
</script>

This means that jQuery will wait until the page loads completely before it applies bindings. If it tries to apply bindings to elements that don't exist yet (the page hasn't rendered those elements), it will just be ignored.

Upvotes: 0

NullPointerException
NullPointerException

Reputation: 3804

Add http: to your script source

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Upvotes: 0

Related Questions