JQuery autoloading user functions - javascript

I am quite new to JQuery, and I am learning every day. But now I am quita stuck...
For something that should be fairly simple I cannot get to work.
I have a function that I want to run on loading. But the system does not allow me.
I have written the following code :
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
function TestFunction(){
alert('We are just testing!');
}
function TestFunctionTwo(){
alert('Yes really!');
}
$(document).ready(function() {
TestFunction();
TestFunctionTwo();
}
</script>
As you see the two alerts should be given.
But unfortunately the system does nothing.
I hope that someone could tell me what I am doing wrong.
Thanks in advance.
P.S. I have seen several similair questions. However none of their solutions "seem" to work for me. Maybe there is one critical comma that I am adding or forgetting. But I do not seem to get it :-(

Your brackets repairs were not complete.
<script src="------Your jQuery location -------------"></script>
<script>
function TestFunction(){
alert('We are just testing!');
}
function TestFunctionTwo(){
alert('Yes really!');
}
$(document).ready(function() {
TestFunction();
TestFunctionTwo();
})
</script>

you didn't close the ready function properly.should be
$(document).ready(function() {
TestFunction();
TestFunctionTwo();
});

You simply made a syntactic error. The ready-function is not closed.
To prevent this in the feature, learn to use your browsers console.

Related

Javascript document.ready in multiple files with Gulp [duplicate]

If I have a lot of functions on startup do they all have to be under one single:
$(document).ready(function() {
or can I have multiple such statements?
You can have multiple ones, but it's not always the neatest thing to do. Try not to overuse them, as it will seriously affect readability. Other than that , it's perfectly legal. See the below:
http://www.learningjquery.com/2006/09/multiple-document-ready
Try this out:
$(document).ready(function() {
alert('Hello Tom!');
});
$(document).ready(function() {
alert('Hello Jeff!');
});
$(document).ready(function() {
alert('Hello Dexter!');
});
You'll find that it's equivalent to this, note the order of execution:
$(document).ready(function() {
alert('Hello Tom!');
alert('Hello Jeff!');
alert('Hello Dexter!');
});
It's also worth noting that a function defined within one $(document).ready block cannot be called from another $(document).ready block, I just ran this test:
$(document).ready(function() {
alert('hello1');
function saySomething() {
alert('something');
}
saySomething();
});
$(document).ready(function() {
alert('hello2');
saySomething();
});
output was:
hello1
something
hello2
You can use multiple. But you can also use multiple functions inside one document.ready as well:
$(document).ready(function() {
// Jquery
$('.hide').hide();
$('.test').each(function() {
$(this).fadeIn();
});
// Reqular JS
function test(word) {
alert(word);
}
test('hello!');
});
Yes you can easily have multiple blocks. Just be careful with dependencies between them as the evaluation order might not be what you expect.
Yes it is possible to have multiple $(document).ready() calls. However, I don't think you can know in which way they will be executed. (source)
Yes it is possible but you can better use a div #mydiv and use both
$(document).ready(function(){});
//and
$("#mydiv").ready(function(){});
I think the better way to go is to put switch to named functions (Check this overflow for more on that subject).
That way you can call them from a single event.
Like so:
function firstFunction() {
console.log("first");
}
function secondFunction() {
console.log("second");
}
function thirdFunction() {
console.log("third");
}
That way you can load them in a single ready function.
jQuery(document).on('ready', function(){
firstFunction();
secondFunction();
thirdFunction();
});
This will output the following to your console.log:
first
second
third
This way you can reuse the functions for other events.
jQuery(window).on('resize',function(){
secondFunction();
});
Check this fiddle for working version
Yes you can.
Multiple document ready sections are particularly useful if you have other modules haging off the same page that use it. With the old window.onload=func declaration, every time you specified a function to be called, it replaced the old.
Now all functions specified are queued/stacked (can someone confirm?) regardless of which document ready section they are specified in.
Yes, it's perfectly ok.but avoid doing it without a reason. For example I used it to declare global site rules seperately than indivual pages when my javascript files were generated dynamically but if you just keep doing it over and over it will make it hard to read.
Also you can not access some methods from another
jQuery(function(){}); call
so that's another reason you don't wanna do that.
With the old window.onload though you will replace the old one every time you specified a function.
It's legal, but sometimes it cause undesired behaviour. As an Example I used the MagicSuggest library and added two MagicSuggest inputs in a page of my project and used seperate document ready functions for each initializations of inputs. The very first Input initialization worked, but not the second one and also not giving any error, Second Input didn't show up. So, I always recommend to use one Document Ready Function.
You can even nest document ready functions inside included html files. Here's an example using jquery:
File: test_main.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="main-container">
<h1>test_main.html</h1>
</div>
<script>
$(document).ready( function()
{
console.log( 'test_main.html READY' );
$("#main-container").load("test_embed.html");
} );
</script>
</body>
</html>
File: test_embed.html
<h1>test_embed.html</h1>
<script>
$(document).ready( function()
{
console.log( 'test_embed.html READY' );
} );
</script>
Console output:
test_main.html READY test_main.html:15
test_embed.html READY (program):4
Browser shows:
test_embed.html
You can also do it the following way:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#test").hide();
});
$("#show").click(function(){
$("#test").show();
});
});
</script>
</head>
<body>
<h2>This is a test of jQuery!</h2>
<p id="test">This is a hidden paragraph.</p>
<button id="hide">Click me to hide</button>
<button id="show">Click me to show</button>
</body>
the previous answers showed using multiple named functions inside a single .ready block, or a single unnamed function in the .ready block, with another named function outside the .ready block. I found this question while researching if there was a way to have multiple unnamed functions inside the .ready block - I could not get the syntax correct. I finally figured it out, and hoped that by posting my test code I would help others looking for the answer to the same question I had

How can I reliably run a jquery script after page load

I'm attempting to get some jquery code to run after a sharepoint page loads, the code being:
$(".ms-commentcollapse-icon").click();
I've been using the following to load the code after the page loads, but it does not seem to be very reliable (it will work sometimes and other times it wont):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
$(".ms-commentcollapse-icon").click();
});
</script>
are there any other good methods for achieving this? I'm not sure what's going on, sharepoint could be at fault, but I figured I would try fiddling around with the script a bit more first.
You could use an auto-executing function:
<script type="text/javascript">
(function () {
$(".ms-commentcollapse-icon").click();
} ());
</script>
If this is SharePoint 2010 or above, you can use ExecuteOrDelayUntilScriptLoaded(yourfunction,"SP.JS") to keep your code from firing until after the SP.JS library has loaded (or you can put any other library in the second parameter for a similar effect).
If this is in a web part and you don't want it to execute until other web parts on the page are fully loaded, make sure the web part containing the script is below the other web parts.
As a last resort, you could execute it on a delay using setTimeout or setInterval, but that's ugly.
You can prevent the default behaviour by using e.preventDefault(); within the function.
<script type="text/javascript">
$(".ms-commentcollapse-icon").click(function(e) {
// We're going to stop the default behavior
e.preventDefault();
//some code here
});
</script>

Can't get Javascript UI watchdog functions to work

So this question should be really basic, but I can't find anything specifically related to it online or on Stack Exchange.
I'm running to run some DOM in my .js file to replace JavaScript function calls within the HTML and to use Qtip for tool tip implementation. However, I cannot get even the most basic of scripts to run for this function. Here's some code snippet:
<body>
<div id="title_Bar"></div>
<script type="text/javascript" src="DOMscript.js"></script>
</body>
And here's the code for DOMscript.js:
$('#title_Bar').mouseover(function() {
alert("hello");
}
I've already called Jquery in the header because I use it in most of the other scripts I'm running which are all working just fine, but I can't get the mouseover or hover or any of the other neat UI JavaScript tricks working.
I tried loading DOMscript.js in the header with the rest of my scripts and that didn't work either. I want these watchdog functions to be running constantly but not interfering with the functionality of the page overall, so any advice on this would be greatly appreciated!
Please note down the correction;
$('#title_Bar').mouseover(function() {alert("hello");});
closing parenthesis were missing in you code.
Ya'll might want the .hover function instead...
$("#title_Bar").hover( function () {
alert("Mouse is entering the element");
}, function() {
alert("Mouse done up and left the element");
});
... i made a little jsfiddle with it too

jQuery .click(function() not working in IE7

Ok, I've looked through all the questions regarding this and I've tried several of the suggestions to no avail, so I'm hoping someone can shed more light on my problem.
OUTLINE OF THE ISSUE:
I'm running two Nivo sliders in a tabbed box. The code I have works in all the normal browsers, but some reason IE7 doesn't like the code I have and won't register the .click(function(e) when the tab is selected.
HERE IS THE CODE:
Part 1 - this loads the slider gallery on page load on the first tab:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Part 2 - this is one IE7 has an issue with. This is for the other tabs so the gallery won't load until the tab is clicked. For some reason IE7 doesn't like this:
<script type="text/javascript">
$(document).ready(function(){
$('#gallery3-link').click(function(e){
$('#gallery1').nivoSlider();
return false;
});
});
</script>
THIS IS WHAT I'VE TRIED SO FAR:
I've tried using the $("#ClickMe").live('click', function() which didn't work as well as the $("body").delegate("p", "click", function() which were the two main solutions I saw people using to get this to work in IE7. When I was debugging I also set an alert to make sure IE was registering the click function:
$('#target').click(function() {
alert('Handler for .click() called.');
});
This had no effect. When you clicked on the tab, it didn't alert which confirmed the click function wasn't working. I've spent quite a while digging around for a solution to this and am plum out of resources. I thought it might something with the code, or some other work around - most of the sites I referenced were from circa 2006 or 2007. Not that JS has changed that much, but I was hoping maybe someone found a simplier solution in the last 4 years.
any help would greatly be appreciated.
D
Without seeing what you're actually working with, possibly you could try preventDefault() instead of return false;
<script type="text/javascript">
$(document).ready(function(){
$('#gallery3-link').click(function(e){
e.preventDefault();
$('#gallery1').nivoSlider();
});
});
</script>
I am guessing it is an error before that, that is causing the issue. Are there any errors on the page? Have you tried putting a simple alert('test') where the click function is set? If so, does it work?
EDIT:
From the other things you reference which I see when I did a search is the person was using IETester and it worked fine in regular IE7 and IE8. Are you using a real version of IE7?
The best solution I found was to simply load all the galleries on page load using the:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
It does add some time to the page load time - just about a 1/2 second more, but it solves the problem in IE7.
Thanks for everybody's help in this.
D
I just ran into this same bug, none of the other answers here were satisfactory. I solved this myself by using
$('body').click(function() { ... });

JavaScript function doesn't work in IE?

I'm having a lot of problems with IE7/IE8 and Javascript/jQuery, which I don't have in Chrome or FireFox.
I have this Javascript function:
function changeImg(img,bla){
$('#open_case').css("background-image", "url('"+img+"')");
getIngo(bla);
navigation_image(bla);
}
And this is my onclick function:
<div class="cImage" style="background-image:url('http://bla.com/images/this_image.jpg');" onclick="changeImg('http://bla.com/images/this_image.jpg','2');"></div>
But it's like the function isn't called at all, 'cause if I change the changeImg function to an alert function:
function changeImg(img,bla){
alert('hi!');
}
It still doesn't work.
The only error IE7/IE8 gives is Expecting Object(roughly translated)
What am I doing wrong?
Thanks in advance!
[Edit:]
These are lines IE7/IE8 is pointing at;
<script type="text/javascript" src="Scripts/swfobject.js"></script>
<script type="application/javascript" language="javascript">
function clearText(textfield){
if (textfield.defaultValue == textfield.value){
textfield.value = '';
$(textfield).css('color','#000000');
}
}
function addText(textfield){
if (textfield.value == ''){
textfield.value = textfield.defaultValue;
$(textfield).css('color','#999999');
}
}
If the error is object expected. Then try this
Change your
<script type="application/javascript" language="javascript">
To
<script type="text/javascript">
Is there a reason you're using javascript here? It looks like you're changing the image on a navigation item? You could just just the CSS :hover classes. Regardless, using onmouseover isn't really the "proper" way to be handling this sort of thing in javascript, if you really cannot use just CSS, at the very least look into handling the mouse over envent properly in jQuery.

Categories

Resources