We Keep Coding

Using .load in JavaScript

I am using .load() function in JavaScript and I'm working with JSP java files. I am loading a page like this in JavaScript
$("#body").load("livestatus #status")
The problem is the div I'm trying to load doesn't load immediately on page load because it contains some data from APIs, so there's a one second delay but my code doesn't accommodate that delay.

Try to put your code in document.ready block or if you are making an ajax request then put your code in Ajax success function

If you use jQuery and it just not initialized for some element, you can use
$(function() {
$("#body"). // ... your code
});
If it calls through some time and you can't track when exactly, you can use live listeners on some event. Like, click on this element.
$("body").on("click", "#body", function() {
// your code
});
$("body") can contain any parent element which had loaded before jQuery.
Or you can load 1px image with you code which loads after main code and track when it will load.
<div id="body">
<!-- your markup -->
<img class="loading-status-img" src="../path_to_1px_small_image.png" style="display:none">
<img class="loading-status-img-2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII=" style="display:none">
<!-- your markup -->
</div>
<script>
$("body").on("load", ".loading-status-img", function() {
// execute you code here after #body will load
});
</script>
The second image is encoded with base64.
[UPD] old version of jQuery have another syntax. More: http://api.jquery.com/live/

Code a HTML button to link to a JavaScript file

I'm trying to get a button written in HTML to link to a separate JavaScript file when it is clicked, the button in question is coded below
<input type="button" id="clickme" value="Submit" />
I am using the Brackets code editor, and the js file I want to be linked is in the same project as my HTML code, if that helps at all
thanks in advance

Load the script into the page with a <script> element.
Keep your code in a function instead of simply running the whole thing with the script is loaded.
Find the button in the DOM (e.g. with getElementById) and bind the function as a click event listener with addEventListener).

If you mean link, I would use an <a> (anchor) tag which has an attribute href which is the reference. Therefore, you could use:
Link to JS
Or perhaps you meant the onclick attribute which would be:
<input type="button" id="clickme" onclick="myfunction()" value="Submit" />
However, as was pointed out, this is not best practice either.
jQuery.click() vs onClick
Provides some options and reinforces the idea that onclick is not the best way to trigger a Javascript function.

Just link your js script to a page by:
<script src="js/button.js"></script>
and then just call action in that scripts through the class or id.
<button id="btnShow"><h1 class="jumbotron-heading">Expand</h1></button>
<p class="p1">Test</p1>
That's a jQuery not js, but anyway a good example as I think
$('#btnShow').click(function(){
$('.p1').show();
});

On click of a send button will trigger a function and the modal dialog is not fading out

I have tried couple of ways in jQuery for fading out a modal dialog. Please see what I have got
A sendMessage button with a text area.
<div class="sendmessage">
<textarea class="form-control" rows="2"></textarea>
<br>
<button onClick="infoAlert();" type="button" id="sendMessage" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Send Message</button>
</div>
On click of the send button will call a JavaScript function infoAlert() and the jQuery fading out function is called with in that. The fading out is not happening at all.
My jsfiddle is here. Could some help to figure out the problem?
function infoAlert(){
$(document).ready (function(){
$("sendmessage").click(function(){
$("#myModal").show();
$("#myModal").fadeOut('slow', 0, function(){
$("#myModal").dialog('close');
});
});
});
}
]
[1]:

The first thing I saw in fiddle is you chose 2 bootstrap js files, which will cause the conflict. So, you have to choose one of them, not both.
The second thing is $("sendmessage").click(function(){}). It should be $('.sendmessage').
The third one is your code does not make any sense when you call div#myModal show then hide it. Bootstrap js should take care all the modal show and hide action.

If you opened up your browser debugger console, you will see that there is an error saying:
Uncaught ReferenceError: infoAlert is not defined
Basically, your infoAlert() function needs to be defined within your $(document).ready like this:
$(document).ready (function(){
function infoAlert(){
$("sendmessage").click(function(){
$("#myModal").show();
$("#myModal").fadeOut('slow', 0, function(){
$("#myModal").dialog('close');
});
});
}
});
You can read more about the $.ready() function here.
Since you have already specified the data-toggle="modal" and data-target="#myModal" HTML attributes, you don't need any javascript to achieve the same effect. Take a look at this updated fiddle with all the Javascript removed.
Also, note that in your original fiddle, you don't need to use both Bootstrap 3.2.0 and Bootstrap 2.3.2.

Dynamically generated script not working

I have a contenteditable div where you type javascript which gets outputted into an empty script tag.
<div contenteditable="true" id="script-generator"></div>
<div id="save-script">Save</div>
<script type="text/shorthand" id="script">
</script>
So you write your script in the div, click save and I have some JS which gets the html of the contenteditable div and adds it to an empty script tag.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$('#script').html(script);
});
So far this works. But the generated script has no effect. The browser must not recognise the script because it wasn't there on page load? How do I make the script take effect without reloading the page?
Note: The type/shortand on the script is because I'm using a plugin which converts shortand words into actual Javascript. So the user would just need to write shorthand into the contenteditable div, and the plugin would convert that to JS. This might be adding to the problem?

I don't think it works to modify an existing <script> element. If you want the script to be executed you need to add a new element.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$("#script").text(script);
ShortHand.parseScripts();
});

Correct - you need to create the script tag to have it execute after load.
$('head').append($('<script />', {html: script}));
...which means you can remove your empty script tag.

I have set up a test that's similar to what you have been looking for. Take a look and see if that helps.
Working Demo
Test code:
<div id="script" style="display:none">
alert(4+4);
</div>
<input id="sLoad" type="button" value="Load/Execute Script" />
$('#sLoad').click(function(){
//You may want to append to the head
$('<script/>').append( $('#script').html() ).appendTo('#script');
});

Can't change onclick dynamically through javascript: bookmarklet

I've tried to change the onclick function through a bookmarklet in the url using this code:
javascript: document.getElementById('Button1').onclick = function(){alert('foo')};void(0);
I can change the value of the button but just not the onclick function. Is it even possible?
Thanks ^^
Some notes: I've also tried putting the code in a .js file and creating an external .js file using createElementId but it still does not seem to work :/

You were missing the trailing semi-colon to terminate the alert call. It's easier to spot once you indent it:
document.getElementById('Button1').onclick = function() {
alert('foo');
};

This code works. So the only option is that Button1 is not an ID of an element on that page.
For example:
<div id="Button1">Button</div>
If an element on the page looks like that, you will get your alert ('foo');

Your code seems to work...
Try to insert this code into the w3schools jseditor http://www.w3schools.com/js/tryit.asp?filename=tryjs_events
<html>
<body>
<button type="button" id="Button1" onclick="alert('Some action');">Action!!</button>
<button type="button" id="Button2" onclick="document.getElementById('Button1').onclick = function(){alert('another action')};">Change onclick</button>
</body>
</html>