Anonymous JavaScript function not executing - javascript

I could really use a second pair of eyes on this. I get the following error:
"Uncaught TypeError: undefined is not a function"
Can anyone see what is wrong with this function because I can't seem to debug
$(function(){
$('#div-id').insertBefore('#sumbit-button');
})();

jQuery already executes the function you pass to it, it does not return a function so you can't call it.
$(function(){
$('#UGInterestedIn').insertBefore('#sumbit-button');
});

There's 2 different things you can mean with this code. Either you're trying to make a function run on DOM ready, which would use the jQuery code:
$(function(){
$('#UGInterestedIn').insertBefore('#sumbit-button');
});
Which is also what aduch said, but you can also be referring to a self-executing anonymous function, which would be this vanilla JS code:
(function(){
$('#UGInterestedIn').insertBefore('#sumbit-button');
})();
The difference is that the first code requires jQuery to be included on the page, and loads the code when the DOM is ready. The second code runs the code immediately, but uses the anonymous function to change the scope of the variables. You're probably trying to do the first thing, but I thought I'd let you know about the second one too.

Related

Don't understand Javascript function syntax

I'm looking through a website's source code because I'm trying to learn to some basic Javascript. I understand the first part:
function count() {
...
}
I know that the function is called count, and doesn't take any arguments. The next function I don't understand:
$(function(){
...
});
Is the function called 'function'? And why is there a '$' symbol at the beginning. I've tried searching the internet, but google just ignores the '$'s and brackets and just searches for 'function'.
In addition, another thing I don't understand; the website has a single button that, when pressed, plays an audio file. The button is set up like so:
<a href="javascript:void()" id="button">
<img src="img/button.png" border="0">
</a>
What does javascript:void() do?
I'm sorry this isn't really a programming question, but I'm trying to learn Javascript and i figured I might have a look what other people are doing.
$ is the name (actually a reference to) of a function defined by the very popular jQuery library.
$( ) is calling the $ function
Inside the parenthesis you have an anonymous function definition.
$(function(){ console.log('test'); });
is pretty much the same as:
function nameNotImportant() { console.log('test'); }
$(nameNotImportant);
but it's more concise and you don't have to think of a name for that function.
As you probably noticed, nameNotImportant is not called. A reference to it is passed as parameter to the $ function to do as it wants with it, including call it. That is exactly what the $ function does when passed a function as parameter to it: it calls that function when the DOM is ready to be interacted with.
<a href="javascript:void()">
When an <a>nchor is clicked, the default action performed by the browser is to navigate to its href attribute. If you want it to not do that, you have to somehow interfere with the mechanism, for example by setting the href attribute to execute some javascript code that does nothing. I wouldn't consider it an example of good programming, but that is what it is used for.
I'm assuming you know that $ is an alias to jQuery.
$(function() {
// ...
});
is passing an anonymous function to the $ function, which can take a callback function. This function is run when the DOM is ready, so the more verbose form of this is
$(document).ready(function() {
// ...
});
In addition,
javascript:void()
is used to simply return undefined for a URL--aka the browser does not navigate to a page when you click on the link. javascript:void() is often used to allow the developer to bind JavaScript click events to the <a> tag.

not understanding what is going on here; anonymous function with jQuery object

Sorry to ask a naive question but I'm trying to figure out the best way to structure a bunch of code into something that is easier to manage
I wanted to put events and their responses into 'controllers' for different sections of site. I was looking through the book Javascript Web Applications and saw some promising stuff like this (p5 - my comment for what I thing I understand):
var controller={}; // ok- an object literal
(Controller.users = function($){ // creating an anonymous function; I don't get the dollar sign since it seems to work fine without it
var jtClick= function(){
alert('you clicked on me!');
};
$(function(){
$('#view').on('click',jtClick);
});
})(jQuery);
but I also noticed that this did the same thing:
var controller={};
(Controller.users = function(){
var jtClick= function(){
alert('you clicked on me!');
};
$(function(){
$('#view').on('click',jtClick);
});
})();
So do I need to pass jQuery as part of my anonymous function? Is this changing how scope is going to be handled? I updated the title to remove 'fully' since I don't think I'm getting much of this
thx in advance
This is a self-invoking function and allows you to safely use jQuery with other libraries that use $ as a library object/variable.
$ in the above example is nothing but the jQuery object that is being passed while invoking the function.

Not implemented Javascript error in IE7 when binding function

I get the javascript error
SCRIPT16385: Not implemented
When i run the following piece of code..
$j('img[id="edit_destination"]').bind('click',function(){
document.getElementById("edit_destination").onclick = editPRINum(this);
});
editPRINum is a function in the same javascript. I googled the problem and looks like i have to declare in case it is a variable. However i am using this to bind a function. What should i be doing?
I think you should try this
$j('img#edit_destination').bind('click',editPRINum);
In your callback function (editPRINum), this will be a reference to the img element.
PS: What is $j? a shortcut to jQuery?

Window load wrapper for jQuery

jQuery(document).ready(function($){}); is a known and great way to protect the $ from causing errors.
What I'm curious about is if jQuery(window).load(function($){}); would work in the same way?
Basically, what I have now is:
jQuery(document).ready(function($){
$(window).load(function(){
// ...
});
});
This just seems unnecessary to me, any ideas about simplifying this? I need the safety of having jQuery properly mapped to $ (or whatever the correct term is) but the same timing as window.load()
I prefer this...
(function($){
$(window).load(function(){
//everything is loaded (images, scripts, etc.)
});
// and/or
$(document).ready(function(){
// the dom is in place, but everything is not necessarily loaded
});
})(jQuery);
Note: This will only work if jQuery was included before this script. I have never encountered any problems with jQuery being undefined this way. Furthermore, you will never have problems with $ being undefined, because you are passing it into your anonymous function.
You can do this:
(function($) {
$(window).load(function(){
// ...
});
})(jQuery);
The anonymous function will be executed immediately rather than waiting for DOM ready as in the code in the question. Within the function $ will be a reference to jQuery so won't clash with any other $ defined outside the anonymous function.
You can create a local parameter:
(function($) {
$(...)
})(jQuery);
This code executes an anonymous function with a parameter named $, passing jQuery as the parameter value.

Self invoking functions javascript

I wrote a self invoking function in both firefox and chrome it it wouldn't invoke.
I wrote something to the effect of
(function () { alert("THE"); })();
do self invoking functions not work in current browsers?
I did include all essential tags and all other code works on the page
"Self-invoking functions" are not really a part of javascript, it's just a term that people are calling a specific pattern of code (like AJAX, etc.); these patterns should work anywhere that javascript works.
What you're calling a "self-invoking function" is just creating an anonymous function and immediately calling it (as opposed to say storing it in a var, as an object value, as a function param, etc.).
That is, the following are basically the same:
var f = function(){...}; f()
and
( function(){...} )()
So because your 'self-invoking function' is a basic part of javascript, there is no possible way it's not working unless the insides aren't working or your environment is messed up. You could copy-paste your code onto a new blank page, and it would work fine. Something else must be going wrong:
Check your errors in your dev console. Specifically, check to make sure you don't have a syntax error or that there isn't some weird thing going on with the webpage you're testing it on (e.g. if you somehow redefine alert...).
I had this issue with a self invoking function which produced this error...
Uncaught TypeError: object is not a function
The problem was caused by not having a semi colon ending the line before the opening bracket
That function works. Javascript supports functional programming, so for a browser not to run that code, even for a very old browser that would be absurd. Are you sure that statement is being reached? Try debugging javascript that occurs before that statement.
<script type="text/javascript">
(function() {
alert('Hello World!');
})();
</script>
Works in every browser I have installed on this machine.
This function definitely works. I would check your browser's console for any js errors in your page. Perhaps you could try to put a simple console.log function at the beginning of your script to see if any JavaScript is being called in the first place.
This self invoking function with return value will work in all current browsers(Safari, Chrome and Firefox) without issue. This function executes immediately, automatically and anonymously.
<script type="text/javascript">
alert((function(){
return("Hello World");
})());
</script>
I had a similar problem. I'm mentioning it below.
I couldn't run this self-invoking function on any browser
(function myfunc() {
var x = 34;
console.log(x);
})();
but whenever I added window.onload like below, it worked fine:
window.onload = (function myfunc() {
var x = 34;
console.log(x);
})();

Categories

Resources