We Keep Coding

Spring boot javascript not executing?

I'm working on a spring mvc application, and my javascript is directly in my html files. For whatever reason, this code is never executed. I even have a coded in breakpoint and it's never hit. No errors or anything are thrown from the chrome debugger. It seems like nothing runs at all, even when I write jibberish. I've tried explicitly defining jquery in case there were any conflicts, but there is nothing. This is the code on the bottom of my page.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
$(document).ready(function(e){
debugger;
alert( "ready!" );
});
</script>

You should not use any script inside the script tag which is used to link a js file. Create another script tag and paste your code in it:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("ready!");
});
</script>

Addthis is Undefined when I use addthis, When I load page by Ajax

I'm try to show 'addthis sharing' buttons when make ajax call. at the first call by ajax, buttons does not show, but when I reload whole page everything is OK, buttons is right place.
I searched a lots of fixes but no one works for me.
one of them is addthis.toolbox(); or window.addthis but when I use word addthis insde JavaScript tag, browser debugger writes error 'addthis is undefined'.
please give me smart advice what's happen and how can I fix it ?
Code (it's a partial view which load from ajax Call):
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxx" async="async"></script>
<div class="addthis_sharing_toolbox"></div>
<script>
addthis.toolbox(); // addthis - is undefined
</script>

I have fixed this problem.
In my project I have 3 View level
_layout
View
_partialview
I had addthis Js reference and button's Div inside the _partialView.
But when I move Js reference to View and change Url(add - &async=1) it works fine and now 'addthis' - is defined (till here is undefined).
Hare is full example:
View:
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-'yourPubId'&async=1"></script>
//Some Code
_partialView:
//Some Code
<div class="addthis_sharing_toolbox"></div>
<script>
$(function() {
addthis.init();
addthis.layers.refresh();
});
</script>
Good luck, everyone can use this perfect plugin 'addthis' when you load page by Ajax.

The async version of the addthis_widget.js script you're using was intended to be used for the newer dashboard tools, as the call to addthis.toolbox() is undefined because AddThis hasn't fully loaded yet. If you remove async="async" from the script, it should work.
Alternatively, you could add the async attribute this way:
<script src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxx&async=1" type="text/javascript">
Then before you call addthis.toolbox(), make sure you call addthis.init().
https://www.addthis.com/blog/2013/05/07/a-brief-history-of-using-addthis-dynamically/
-Matt
AddThis Support

Uncaught ReferenceError $ is not defined

I'm very new to JavaScript (just started a few hours ago and trying to get a script working). I went through a few tutorials on W3 and the 'hello world' code works when I paste it directly into my HTML but I'm having a problem with a script (I've had problems with other scripts as well but I am not sure what I'm doing wrong).
I have this code that I want to test in my HTML, I copied the HTML in and it looks the same then I made a file in my static folder called edit.js and copied the JavaScript into it (exactly as shown). It didn't work no errors on the page but when I click it nothing happens. I tried to paste a W3 'hello world' code in and that worked but this script does not.
I tried to inspect the code in Chrome and that's where I see the above error (under the resources tab). I can open the js file using Chrome which makes me think the js file is accessible and pointing correctly but I'm not sure how to get it working. I'm using Jinja2 as my template engine to render the HTML and in my header I have:
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
and in my main template (the one that gets rendered on all pages) I have:
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
edit.js:
(even putting it within the script tag directly on the page I want to use it on doesn't work)
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});​
HTML:
(it's embedded in a larger page)
<head>
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
</head>
... my html code..
<div id="wrapper">
<div id="container">
<div id="storedvalue"><span>Hello</span> [edit]</div>
<div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [save]</div>
</div>
</div>
I have never been able to successfully run a JavaScript that wasn't on W3 yet. I get the same problem with other scripts even though I see people online saying they work fine for them. Do I need to do anything extra to make this work?
My two questions are:
What am I doing wrong?
Because Javascript seems to just not work when there's a problem, is there a way to get errors or information on what's actually wrong?
I read Uncaught ReferenceError: $ is not defined? and have been trying to figure this out for the last hour and can't see my problem.

First you need to place the jQuery script tag first.
Second, you need to do one of the following things:
Put your code within this function:
$(document).ready(function(){/*CODE HERE*/});
Or like this:
$(function(){
/*CODE HERE*/
});
The DOM needs to be ready before you can use it. Placing your code within anonymous functions that are executed on the ready event of the DOM is how you can do this.
Edit:
$(function(){
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});​
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Script tag for jQuery should come before your custom javascript.
Follow by edit.js
<script type="text/javascript" src="static/edit.js"></script>

Try removing the language attribute..sometimes work for me. It's obsolete now .. i think

You need to include jquery before you can use it.

javascript error: this.node is null or not an object

I am working on ASP.NET 3.5, c#, visual studio 2010. I have made a master file and a default page that uses this master file. I have placed a couple asp:contentplaceholders in the master and corresponding code in the page that uses this master. I have also inserted JavaScript like this in the content page (and not the master):
<asp:Content ID="Content6" ContentPlaceHolderID="Mainpage" Runat="Server">
<script src="path1" type="text/javascript"></script>
<script src="path2" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var options = {
//some java code
};
$(".mycssclass").effect(options);
});
</script>
</asp:Content>
On running the website I get the following runtime error in visual studio:
Microsoft JScript runtime error: 'this.node' is null or not an object
and it point to some function inside the JavaScript like
this.node.onload=function(){..............//I am not a java guy so do not know much about this
Where am I going wrong? Why does the site compile correctly but throw this runtime error?
I also tried inserting this java code inside the master file in the <head>, but same error. This is urgent please so if someone experienced can pinpoint where exactly to put the code that would be solve my problem quickly.

Have you included a reference to the jQuery library? A good practice would be to have the jQuery include in the Master.
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<!-- the remainder of your .js references should follow-->
</head>
If it's your intention to have that script run on 'page load', then ensure you have it set correctly:
$(document).ready(function() {
// put all your jQuery goodness in here.
});
More info on jQuery document ready.

I'm not sure exactly what it is you are doing with that snippet of code, but I don't think it is the proper syntax.
You probably should re-write it to look like this:
$(document).ready(
function () {
var options = {
//some java code
};
$(".mycssclass").effect(options);
});
Just passing in the function to the jQuery selector will probably get some wonkiness.

Thank you everyone! there was no problem with either the syntax in the javascript or the location/page where it was first included by me. I just figured out that the mistake was somewhere else. This javascript works on an <img> tag. It zooms the image insdie the <img> tag. I was using the <asp:ImageButton> instead og <img>. It works perfect as soon as I replaced it. Thank you all for your time and the knowledge sharing.

Scriptaculous load parameter in FF 2.0.x

Greetings all,
I am attempting to explicitly load the effects.js and builder.js Scriptaculous libraries on a page, using this code:
<script type="text/javascript" src="/javascripts/scriptaculous.js?load=builder,effects"></script>
This works like a charm in FF 3.0.x, IE7 and Opera 9.6.x. It does not work in Firefox 2.0.x, however. The libraries never become loaded. In order to get them to load in FF 2.0.x, I must explicitly reference them with two extra <script /> tags, i.e.:
<script type="text/javascript" src="/javascripts/scriptaculous.js?load=builder,effects"></script>
<script type="text/javascript" src="/javascripts/builder.js"></script>
<script type="text/javascript" src="/javascripts/effects.js"></script>
Does anyone happen to know what the discrepency between FF 2.0 and 3.0 is that causes this behavior? Is there a better solution to my problem?
Thanks for your help!

I've had too much coffee today, so I figure I will give this a go.
One possibility is the load function in scriptaculous.js does not correctly do the processing to include the libraries passed to it as parameters (scriptaculous.js?load=builder,effects).
Try putting in an alert to see if the load function in scriptaculous.js is being entered into, if it is, then the process probably doesn't do what it's supposed to on FF2:
load: function() {
alert('In the load function!');
...rest of code here...
If it isn't, then (maybe) firefox 2 does not want to execute load.
The last part of load seems to do the work for including other libs:
$A(document.getElementsByTagName("script")).findAll( function(s) {
return (s.src && s.src.match(/scriptaculous\.js(\?.*)?$/))
}).each( function(s) {
var path = s.src.replace(/scriptaculous\.js(\?.*)?$/,'');
var includes = s.src.match(/\?.*load=([a-z,]*)/);
(includes ? includes[1] : 'builder,effects,dragdrop,controls,slider,sound').split(',').each(
function(include) { Scriptaculous.require(path+include+'.js') });
});
From the above code, I can see that the includes variable should parse out the library names, see if that's being assigned anything, replace it with something like:
var includes = s.src.match(/\?.*load=([a-z,]*)/);
alert(includes[0] + ' ' + includes[1]);
That should give you a better idea of what's going on. While this is an interesting little problem, I would definitely go with the solution you proposed:
<script type="text/javascript" src="/javascripts/scriptaculous.js"></script>
<script type="text/javascript" src="/javascripts/builder.js"></script>
<script type="text/javascript" src="/javascripts/effects.js"></script>