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.

The error you are getting says you haven't included jquery properly. Are you running the page from your desktop rather than a webserver? — Kevin B, Sep 24 '13 at 17:56
Are your scripts tags exactly as you have them in your question? if they are, then the error you are getting isn't possible if you're running from a webserver and have access to `ajax.googleapis.com` — Kevin B, Sep 24 '13 at 18:23
Yes sir. They are exactly as mentioned. However, could it be because of the jsdt jquery plugin — DJR, Sep 24 '13 at 18:30
Not if your scripts are in the exact order that you have above. — Kevin B, Sep 24 '13 at 18:42

HC_ · Answer 1 · 2013-09-24T18:12:19.797

2

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...

edited Sep 24 '13 at 18:12

answered Sep 24 '13 at 17:58

HC_

1,040
10
23

Only because OP is likely loading from `file:`. Otherwise the `src="//ajax.googleapis..."` is usually fine. – user2736012 Sep 24 '13 at 18:00
1

there is console in all 5 major browsers nowadays. – Cthulhu Sep 24 '13 at 18:00
2

Yeah, an explanation of why this is the case would help the OP not make the same mistake again. – Reinstate Monica Cellio Sep 24 '13 at 18:00
@Archer I am actually unsure as to when/why // used, I suggested my change because I noticed his set-up is different than what works for me for jquery "set-up" both locally and hosted online. – HC_ Sep 24 '13 at 18:03
3

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...`. – user2736012 Sep 24 '13 at 18:07
@user2736012 Thank you. I knew it will work. But you told me the reason why. – DJR Sep 24 '13 at 18:14

score 1 · Answer 2 · answered Sep 24 '13 at 19:02

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.

score 0 · Answer 3 · answered Sep 24 '13 at 18:16

0

the link for library is right, check it here! look at this line

SCRIPT5007: The value of the property '$' is null or undefined, not a Function object 
SearchPanelJQ.js, line 1 character 1

Something wrong with this library or conflict occurred.

answered Sep 24 '13 at 18:16

Alex Kulinkovich

4,408
15
46
50

it works when the document.ready function is in the jsp's head tags. but not when its in a different .js file. So the library should be fine dont u think? – DJR Sep 24 '13 at 18:19

Changing javascript to jQuery first time Struts 1.3 application

3 Answers3