Changing javascript to jQuery first time Struts 1.3 application

Question

I am changing the javascript in my project to jquery. This is the first time im using Jquery and expect me to be making silly mistakes please. I placed a simple JQ alert function in a .js file which looks like below.

$(document).ready(function(){
  $("#stt").change(function(){
    alert("hi");
  });
});

So the aim is to throw an alert msg when the value of a td element with id="stt" is changed.

<tr id="stttr"> 
<td id="stt"> <html:text property="stt" size="20" maxlength="20"  style="height:12px; width: 180px;" /></td></tr>

and this is how im referencing jquery between the head tags of the jsp.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9/jquery.min.js"></script>
<script src="javascript/SearchPanelJQ.js"></script>
<script src="javascript/CalendarPopup.js"></script>

The Calendarpop.js is an older javascript file which i dont want to replace (it works fine on all browsers). Now when i visit this page in a browser with script debugging enabled in IE, i get the following error .

HTML1201: localhost is a website you've added to Compatibility View. 
ReportingTemplate.jsp
SEC7115: :visited and :link styles can only differ by color. Some styles were not     applied to :visited. 
ReportingTemplate.jsp
SCRIPT5007: The value of the property '$' is null or undefined, not a Function object 
SearchPanelJQ.js, line 1 character 1

The last line tells me something is not right with the setup. Can you tell me what?

I installed the jsdt jquery plugin and am using JQ v1.9. The project is a struts project.

Edit: 1) It works when the JQ function is included in the jsp. it dosent work when its in a different .js file. 2) even if i include http:in the reference, it only works when the document.ready function is in the same JSP and not when it is in a different .js file. This beats the purpose as the same validations will be used in multiple pages in my project.

Answer 1

for future reference:

• Run in Chrome (or any browser as other users have pointed out)

• Right click > Inspect Element > Console

• Read error logs (Console can provide js, php, and other errors to help pinpoint specific lines where the malfunction is happening)

Your

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9/jquery.min.js"></script>

should be

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

The reason, provided by user2736012 is:

OP is using a "protocol relative" url, which automatically uses the protocol that was used for fetching the page. In this case, if the protocol is file://home/User/Desktop/foo.html, the protocol relative url becomes file://ajax.googlapis..., which of course won't work. But it'll work when fetching the page using http, because it'll then be http://ajax.googleapis...

Answer 2

I found the issue. I am referencing JQ version 1.9 because i read in a tutorial that it should automatically pick the latest version in the 1.9 series. It works if i change it to 1.9.0 or 1.9.1. However, i still dont understand why 1.9 didnt work. it should have picked the latest 1.9.* version.

But atleast by making it 1.9.1/0 it works from a .js file.