JavaScript SRC path not working - javascript

I have searched this web looking for an answer, but it seems that this time I'm not so lucky, so I am forced to ask. I apologize if it's already answered (could not find it). And yes, English is not my first language, so I also apologize for my spelling mistakes, I try my best.
This is my problem, using Tomcat 5.5, Struts 1.3, JRE 1.5 and I'm using firefox 3.5.6.
In my jsp page I cannot seem to put any src="path/path" in my <script> I have tried deleting the src and all works well, but my project is going to need a lot of use from jquery and I do not want to copy/paste all the js file in every jsp.
This is my code:
<script type="text/javascript" src="js/jquery-1.3.2.js">
function showMySelf(){
alert("Hello World!");
}
(... plus other stuff code that actually uses jquery functions)
</script>
and the submit button:
<input type="submit" onclick="showMySelf()">
When I click the button, nothing happens (well it actually repaints the page) and when I delete the "src" tag from the script and add all the jquery code to the page it all works well.
I have tried putting another slash in the path as "/js/jquery-1.3.2.js" and returns an error.
I have tried using ResolveURL and it doesn't seem to give me better results.
I have also tried changing the js file to another file ("generics.js" and "js.js"), I also tried with "js/*.js".
Any of theese solutions have archived anything.
I have also tried using the struts tags (like html:submit) but it also did not work.
The path is actually right, since looking the code in my web browser gives me a link to the js file. So I suposse the browser knows were to look for my js file, it does not give me an error or a broken link to the file.
Any ideas of why this is happening?
Thank you all.
Random.

You can not use a script element to load an external file and put code in it at the same time. You need to use two script elements:
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
function showMySelf(){
alert("Hello World!");
}
(... plus other stuff code that actually uses jquery functions)
</script>

I think Gumbo solved it.
As a sidenote, a very good way to find out whether a browser can load a JS file is the "Net tab" in Firebug in Firefox. It shows all loaded (and failed) requests of the current page.

The two most likely options are:
a) You are including HTML in your JS file (i.e. <script> tags)
Take it out.
b) You have the wrong URI and when you attempt to resolve your relative URI manually you do so incorrectly
Look at your server access logs to see what is actually being requested (or use a tool such as Firebug)

The first thing to do in such case. Install Firebug and look at the "Console" panel (for possible syntax errors) and the "Net" panel to see whether your jQuery sources are being fetched correctly. The 2nd column there shows the request status code.
alt text http://img46.imageshack.us/img46/6224/jqueryfirebugtmp.jpg
(full size image)

Related

Using JQuery 1st Time

I'm referencing it as it says on w3schools and this website
<head>
<script>
src = 'C:\path...\jquery-1.11.3.js';
$(document).ready(function() {
$("p").click(function() {
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
I compile and open on chrome but when I click any of those 3 messages they don't disappear =P
External scripts are loaded with the src attribute, like this
<script src='jquery-1.11.3.js'></script>
The path to the file should be referenced using paths relative to the root of your application, not the map structure of your system.
Put the src tag in the script tag:
<script scr="C:\path...\jquery-1.11.3.js">
P.S. Always use double qoutes!
P.P.S. If you still can't figure it out, go to the console and look for any errors.
Also: prepare to get very familiar with the "Developer" tab in your browser ... particularly the "JavaScript console." When a JS program encounters any sort of error, the browser's usual response is to "simply stop ... silently." And, if there's any sort of syntax-error, to "silently" issue a warning or error message to the JavaScript console (which ordinary users never see).
Any of these things can produce the result that you now see, namely: "nothing happens."
It can be quite frustrating, really . . .
The problem was in the path, not sure if any of the answers above because what I did was copy paste what they had and tried it without my messy code, and it worked. Then I linked the online Jquery library as oppose to linking what I had in the folder and it worked, then I fixed the path I had. Maybe it was the quotes, not sure now. Thanks anyways. (I wasn't getting errors below in the debugger box =P)

GWT: Can I include js in html page or do I need `ScriptInjector`?

I am adding an html file to my GWT page like so:
HTML htmlPanel = new HTML();
String html = MyHtml.INSTANCE.getHtml().getText();
htmlPanel.setHTML(html);
RootPanel.get().add(htmlPanel);
and that works ... but the embedded script files don't run. I see the line in Chrome's Elements tab where the script should be loaded, but apparently it is not (doesn't show up in the Scripts tab, and debugger lines are not hit).
As a test, I loaded the html file straight into my browser (not via GWT), and the script does show up in the Scripts tab and it does run the code (so it's not an issue with the script tag itself).
So ... why/how do the scripts not run when embedded by GWT? (I wouldn't know how to keep an embedded script from running if I tried!) ;o)
Do I have to use the ScriptInjector to make this work (I'm having my own problems with getting that working, which is a subject for another thread)? If so ... why?
Thanks for your help!
Creating the script by adding it to an HTML widget and appending it to the page will not work, this is not supported by the browser. GWT isn't doing this, the browser is, or rather, the browser is doing it because of how the HTML widget works. For specifics on why this is the case, see the great answer at https://stackoverflow.com/a/13392818/860630 that digs into the details.
There are several other ways you can do this, but they all boil down to the work that the ScriptInjector is already doing - if ScriptInjector doesn't work for you, it seems unlikely that the other options will behave either. Maybe edit your question to use ScriptInjector and describe your issues, or ask a new question with it? The only cases where I've seen ScriptInjector not work is related to $wnd, or which page the script is appended to (see com.google.gwt.core.client.ScriptInjector#TOP_WINDOW).

Strange behaviour with Javascript inclusion

Hi I'm experiencing some problems including a javascript file in my html project.
When I include it like this at the end right before the body tag my site does not work correctly.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</body>
If, however i delete the tag at the end to make it look like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"/>
</body>
everything works fine.
And if i include it within the head, it also works, independent of the syntax.
Why does it behave like this?
Do what everybody else has said, regarding the <script src="..."></script>
Use just src="//...", instead of src="https://..." or on non-encrypted pages (http vs https) your visitors will get security warnings for mixing the two protocols
If you have written jQuery code anywhere on the page, prior to actually including the file, you're going to get reference errors, where JS will not be able to find the function ($) you're trying to use.
There is a debugger available if you use Chrome, and press CTRL+SHIFT+J : it will take you to the developer-console, where I'm sure you're going to see all kinds of reference errors.
In Firefox, it would be CTRL+SHIFT+K, in IE it's F12.
This works under the same premise as writing in other languages where you try to use libraries or other classes, but don't actually import them until the bottom of your program.
For browser compatibility, you must use the first form:
<script src="https://..."></script>
with an explicit closing tag </script>. If this is the case where your code is not working, then your real problem lies elsewhere and not in the way you close the tag.
There might be some race condition happening for you... it will be good if you can provide complete code... if you attach that in header ... then your jquery is successfully loades and then executes your body part... if your attaching that in body ... then closure of script is give some issues... try to play while changing your script code placements in you body tag.
</script> closing is compulsory to work in cross browsers
This might help you in ur debugging.
Why do you want to load jquery in the end of your code? If you have some other scripts that need jquery, then they should be loaded after it. So either you put all script tags in head or in the end of body — jquery should be loaded before other files that depend on it.

JS is not loading correctly, where is the fault?

I have a website where I want to use MagicZoom.
Everything would be fine since it is easy to implement, but there seems to be an error when loading the js file.
I will send you the website which is currently under construction.
MagicZoom should be implemented there, where you chose your fabric, for a close-up.
I think, but of course this is only my opinion and I'm not an expert, that the problem occurs because the div container with the picture is created dynamically from another PHP file and not present onload. Therefore the JavaScript does not work properly.
You will see that in the second step the zoom does not load although the class is set correctly.
Your error says "prettyPhoto is not a function". This tells me that some script is trying to use the "prettyPhoto" object before that script has been included on the page.
Looking at your HTML header, I see that is among the last of the <script> tags. Try moving the <script> tag where you include that library in your HTML header up a couple of lines, above some of the other includes. Be aware - you can't move it above the includes for jQuery!
Try that out, let us know.

ASP.net: ClientScript.RegisterClientScriptBlock fires before jQuery is loaded

Interesting problem here from some inherited code I recently looked at. I'm trying to add a compression module to a project. It is loading all the JS and CSS files, combining them, minifying them, and compressing them. I've tried a number of solutions, but all of them have one fatal problem.
I have some javascript that is being loaded via Page.ClientScript.RegisterClientScriptBlock in the PreRender of the MasterPage. The compression module is loading as a Script Tag link in the MasterPage, but when I run the page... the code from the PreRender is lopped on top and is giving me a '$ is undefined' error, telling me jQuery isn't loaded yet.
Furthermore, I can't seem to get past the same problem when it comes to inline javascript on content pages.
Any ideas as to what is causing this? Enlighten me as I have no clue.
If have done this before with RegisterStartupScript (instead of RegisterClientScriptBlock) and called the $(document).ready(function() from WITHIN that script.
If the script tag link that eventually expands out to jquery is not in the head, but in the body of the page, then $ will be undefined when the script block executes, unless it is included in the html before the opening <form /> tag in the rendered html, which I understand is where RegisterClientScriptBlock spits out its script (just after that opening tag).
If this is not the case, and the joined/minified script is in the head, then I'd use a browser debugger such as Firebug or IE Dev Tools to verify that the jquery script is being correctly included in your combined script.
I know this answer is late to the party, but try calling ClientScript.RegisterClientScriptBlock in your OnPreRenderComplete (rather than OnPreRender) handler. This inserts the code later in the page rendering process.
All your jQuery code should be written inside the DOM-ready function:
$(function() {
// your code here
});
indipendently from where you place it in the page, 'cause the jQuery() function isn't avalaible before.

Categories