JS-Error: function is not known ("is not a function") - javascript

Other people had this problem also, but I was not able to transfer the answers to my problem. So I just ask :-)
I got this code, using a star-rating-plugin ("rateit"):
<div class="rateit"></div>
Now I want to call a function after clicking on the div. When I just use
$(document).on('rated', '.rateit', function() { alert("aha"); });
this works, I get the alert. But when I call a function of the rateit-plugin with
$(document).on('rated', '.rateit', function() { ratingHelper.submit($(this).rateit('value'));
});
I get the error ".rateit is not a function". I get the same error when using
$('.rateit').bind('rated', function() { ratingHelper.submit($(this).rateit('value')); });
The function to call looks like
var ratingHelper = function(){
};
ratingHelper.prototype = {
submit: function(v){
...
Well I am new to JS/jQuery and totally helpless. I would appreciate any help very much. Thanks in advance!
EDIT
Oh man ... I had the jquery.js imported TWICE :-( sorry for bothering you and thanks for your help!!

$(document).on('event', 'element', callback);
event: name of event run
element: elements of trigger
callback: function run after trigger
In your case -> '.rateid' is class name in DOM, and in this -
$('.rateit').bind('rated', function() {}); you not pointing at the item

Related

JavaScript - Define function without calling it?

I feel so so stupid for forgetting this, but I've been out of practice for a minute, and I'm drawing a blank.
Why is slideDown being called onload rather than when the click is handled?
function buttonClicked(buttonNumber) {
$contentBox.slideDown("slow");
};
$button1.click = buttonClicked(1);
You would want to structure it as
$button1.click(function() {
buttonClicked(1);
});
This will make it fire when $button1 is clicked.
Try this:
$button1.click(function() {
buttonClicked(1);
});
See documentation at api.jquery.com

JavaScript (jquery) - Scope issue in click event

I know this subject has been already discussed in similar topics, but none of the solutions I could find can help me understand the issue I have.
Here is my simplified class and its the usual was I define them.
BottomNav = function() {
this.init();
}
$.extend(BottomNav.prototype, {
init: function(){
this.insue = false;
$(".up").click($.proxy(function () {
var thisinuse = this.inuse;
if(this.inuse===false) {
this.inuse = true;
this.moveSlider('up');
}
},this));
},
moveSlider: function(d){
//some instructions
alert('move slider');
}
});
$(document).ready(function() {
new BottomNav();
});
In FireBug on the breakpoint inside the click event this.inuse is undefined! (this is my problem), my scope looks good on the watch (right panel of firebug), this.insue is false as it should be - sorry I cannot post images yet!
I would be grateful of someone might help identifying this very strange behavior.
I tried some staff like putting the click event definition inside another function but it does not work either. I tried different ways of bindings and it does not work too.
However the below example is working on a number of other classes I made. I could access class scope from events, effects.
It's just a typo:
this.insue = false;
Change insue to inuse and the property will be there :-)
Apart from that, the variable thisinuse is quite superfluous in here. And change the condition to if(! this.inuse) instead of comparing to booleans…
this.inuse can be assigned to a variable out side your click event handler and use the variable inside the handler.

Javascript CallBack

I have a JavaScript function "print_something", which is implemented in around 300 jsp help pages.
I turned out this "print_something" function has to be corrected.
So I am searching for a solution not to change 300 files.
I have one page where I open custom help page:
window.open('SomeHelpPage101.htm', 'Help', 'location=no,status=no,height=500,width=600,resizable,scrollbars');
I tryed to redefine function like this:
var jsObject = window.open('SomeHelpPage101.htm', 'Help', 'location=no,status=no,height=500,width=600,resizable,scrollbars');
jsObject.print_something() = function(){//corrected function}
It all works well in Firebug if I do step by step. But if I run the code it happens that window.open(...) is not yet finished because it is asynchronous so my redefine doesn't work.
How can I force window.open(...) to finish first and afterwards redefining print_something() would be sucessful.
Thank you very much in advance.
I think this has already been covered so here is a link to it:
Set a callback function to a new window in javascript
Thank you guys very much for help and advices. :)
The solution was with setInterval function where we wait and check if object is initialised.
function Help()
{
// asynchronous object initialisation with "window.open"
var jsOBJ = window.open('HelpPage' + pageID + '.htm', 'Help', 'location=no,status=no,height=500,width=600,resizable,scrollbars');
// check every 100 ms if "window.open" has finished and "jsOBJ.custom_print" has initialised
var helpTimer = setInterval(function() {
if(jsOBJ.custom_print) {
clearInterval(helpTimer);
// override function which is declared in child pages which we open with "window.open"
jsOBJ.custom_print = function() {
alert('Test call from redefined parent function.');
jsOBJ.print();
};
}
}, 100);
}

How can I bind to the saved event on Mercury?

I'm exploring Mercury JS at the moment and can't seem to figure out a way to bind to the saved event.
According to the API docs, it should be as simple as:
Mercury.on("saved", function(event) {
// something here
}
...but that kicks up an error!
The following also doesn't work:
$(window).bind('mercury:saved', function() {
// no joy here either :(
};
Any clues?
I had the same problem. I solved it by setting the event function inside mercury:ready event.
Try
jQuery(window).on('mercury:ready', function() {
Mercury.on('saved', function(){
alert("It's working!");
});
});
I was having the same problem.
jQuery(window).bind('mercury:ready', function()
was working, but
jQuery(window).bind('mercury:saved', function()
wasnt.
Wired, but clearing the Browser-Cache did it for me.

Javascript: Can I avoid closures?

I am trying to make an website. I am putting addEventListener to more elements in a function called more times:
idImag = 0;
function function1()
{
//do something
function2()
}
function function2()
{
//do something
document.getElementById("holder" + idImag).addEventListener('mouseover',function(){
idImag++;
alert('It works');
}
function3(event)
{
alert(3);
}
function1();
function1();
<div id="holder0">Dog</div>
<div id="holder1">Chicken</div>
<div id="holder2">Cow</div>
But there is a problem: Only the last element gets the event listener... the others do nothing after putting the mouse over it.
Then I've googled a little and found out about closures and how variables are kept even after function returned... I didn't understand everything, but I just want to find out how to put the event listeners in function2. Can you help me?
Probably you noticed: I am a newbie. Sorry if the question is stupid or if it has no sense. If you need more details, I will put my whole code, but it has variables and comments in Romanian, so I am not sure if you will understand it. Sorry for my bad English and thank you in advance.
Why not a for loop?
function function3 (event) {
alert(3);
}
for (var idImag = 0; i< numberOfHolders; i++) {
//do something1
//do something2
document.getElementById("holder" + idImag).addEventListener('mouseover',function3);
}
It looks like you just care about the image id, which is available through the id attribute of the element.
Thus you can do:
document.getElementById("holder" + idImag).addEventListener(
'mouseover',
function(){
var id = this.id;
/* Then strip off "holder" from the front of that string */
}
);
This looks correct, in that it will call document.getElementById("holder0").addEventListener(…), then it will call document.getElementById("holder1").addEventListener(…). Closures aren't your problem there.
You can verify this by, eg, using console.log to log the element that you're adding the event listener to (you'll need Firebug installed, or Chrome's developer console open).
Maybe paste the code to http://jsfiddle.net/ so we can try it?

Categories