We Keep Coding

How do I get a jquery function to run when the page is loaded?

I'm trying to create an html page that uses jquery to populate a table when the page loads. I have the function that gets the data, but currently for testing I just attached it to a button that I'm clicking to get the table to appear.
How do I get a jquery function to run when the page is loaded? In case it isn't obvious I'm a complete beginner when it comes to Jquery, so this may be something really obvious, but I've been trying to google it and I can't find a solution.

This should do the trick
jQuery(document).ready(myFunction);
function myFunction(){
// logic goes here
}

jQuery(document).ready(function(){
//some logic
newFunc();
//logic
});
function newFunc(){
//logic
}
However you can write code anywhere inside <script> tags and it will execute directly after including the jQuery file. But, the may not be as effective as above because at that time dom may or may not be created. So, better go the above way .. as it will only execute when page is loaded and DOM is created.

Are you looking for something like this. You can do this in regular JS.
document.addEventListener('DOMContentLoaded', function() {
console.log('document loaded');
});
But be aware this doesn't cover you from other dependent file loading like the js and png and others . They get loaded asynchronously . this just cover you for the dom content load

Count Script Tags

I've been trying to figure if there was some sort of way to count all tags on my webpage so far haven't had any luck so I came to my last resort you guys!
Basically what I want is to detect all script tags getting a total where I can than
for example
if(scriptCount != 5) {
//send warning that this user may be using an outside script
}

Just get them and use length, of course you have to actually do this after all the script tags are available in the DOM, which means in the last script tag on the page, or inside a DOM ready handler.
var scriptCount = document.getElementsByTagName('script').length

send warning that this user may be using an outside script
You shouldn't.
There are many browser addons which add script tags to a page which are visible to the page's JS code. No user will tell you that they are happy because you warned them. But you will likely lose users who think that your page behaves oddly.
If you want to prevent "cheating", then this idea won't work either.

jQuery dialog with load doesnt clean up after itself

I'm pretty sure this was somewhere discussed, but I cant seem to find it anywhere. I would really appreciate if anyone could point me to the right direction.
I have setup a dialog which opens and closes just fine. I need to load dynamic content in it and so Im using this:
$('#dialog').load("somepage.php?document=1");
This load up correctly and everything works pretty much fine except the fact that once I close the dialog and then open it with some different query string (e.g. with document=2) I can see that there are still contents of document=1 loaded in DOM.
This causes issue when there is javascript function in the Loaded page because than it gets executed twice. (well the number of times I load documents so its pretty much unusable).
I have tried clearing the dialog:
$('#dialog').html("")
But that didnt help much.
Does anyone have any idea what could help?

Instead of just closing the dialog, destroy it:
$('#dialog').dialog("destroy");
That should clear the dialog back to its initial state:
https://api.jqueryui.com/dialog/#method-destroy

If you want to just load part of a page, you can always do the following: Let's say I want a specific div only.
$('#dialog').load("somepage.php?document=1 #myDiv");
Furthermore, I don't know what you're closing your #dialog with, but if it was something with an id of myButton, you'd do:
$(document).on("click", "#myButton", function(e) {
// To keep div within DOM and empty
$("#dialog").empty();
// To get rid of div (you would have to re-append #dialog every time)
$("#dialog").remove();
});
All this being said, .load() doesn't actually execute any scripts from your loaded page. If you were to use $.post() or $.get(), you could strip out the <script> tags yourself.
Best of luck!

Is there any jquery to detect if the html tag was not closed? or page has not completely loaded?

I'm experiencing an issue (which I still need to fix) where my entire page does not load. It gets cut off in the middle of an element.
Is there a way using jquery or javscript to do something like:
if (some element has not loaded yet) {refresh the page}
I was thinking of just putting <div id="end_of_page"></div> at the bottom of the page, and checking if that was rendered, if not, i'll know something went wrong and can reload to try again.
thanks!!

Is there a way using jquery or javscript to do something like:
if (some element has not loaded yet) {refresh the page}
You can do that, yes. Put this in the head after including jQuery:
<script>
jQuery(function($) {
if (!$("#end_of_page")[0]) {
// Something went wrong, load again
location.reload();
}
});
</script>
You'll enter the body of the loop (and so, force a reload) if the end_of_page element doesn't exist as of when the jQuery ready event fires (which is meant to be when the page is done loading).
But: Better by far to figure out why your page is getting cut off half-way through and solve that. This sort of workaround is not a solution.

You can use
$(document).ready(function(){
// code here
});
that code will only run when the page has loaded. A convenient shorthand is:
$(function(){
// code here
});
assuming your jQuery object is $. To finish your requirement, you can have a variable that is set within the load function, then use a timer set at the start of the page to check for it. If it's not there, reload.
Personally, I think you should invest some time into figuring out why your pages only half-way (Firebug or the Chrome Inspector may help you do this, it might be a resource in your page that is causing it to hang, and since most HTTP requests are only made 2 at a time per hostname, it might be waiting for that to return before fetching the rest).

Might be a server-side issue OR some script or library is stealing your fish $ (AKA: 'Dollar').
I'll rather suggest you to debug your code instead of refreshing the page trying to fix issues.
Make sure your scripts are in the head of your document, and jQuery + your jQ functions right before the closing </body> tag wrapped in:
(function($){ /*your functions*/ })(jQuery);

Do I still need $(document).ready(function(){ })?

I've been developing in javascript for a few months and I have been using $(document).ready(function(){ at the beginning of all my scripts. I've noticed other folks don't use this in their scripts but I can't seem to get mine working without it. I'd like to keep my code cleaner, but for all my google searches I can't seem to figure out how to get rid of it.
I know it tells the browser to execute my script as soon as the page loads but is there something global I can set so that I don't need to explicitly tell the browser to execute each of my scripts when the page loads? Or is it a more global problem with where in my html files the scripts are located?

You're needing document.ready probably because you're interacting with the DOM before it loads. How can the script manipulate elements that are not there yet?
If you stick your script at the end of the file you will not need it. It's also good practice to do so for a lot of Javascript files as they can take time to process (especially if they're hosted externally). Putting them at the end of the file often speeds up the page load time.

All $(document).ready(function() { ... }); or $(function() { ... }); does is wait for the document to be ready for manipulation. You should use $(document).ready(function() { ... }); or $(function() { ... }); if your scripts are inline or in the <head /> section because JavaScript executes in the order in which it appears on the page otherwise.
To do away with $(document).ready(function() { ... }); or $(function() { ... });, simply move your scripts down to the bottom of the page after all of your content, right before the closing </body> tag.
Putting the scripts at the bottom is really a best practice anyway. For this and other best practices, I recommend you take a look at Html5Boilerplate and Yahoo! Best Practices.

the $(document).ready() convention is part of jQuery, not just JavaScript. From their' documentation on the ready function:
This is the first thing to learn about jQuery: If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.
So yes, it is required. jQuery does come with a shorthand for this though, so you could do the following:
$(function() {
//jquery code
};