jQuery error in visibility despite functioning function - javascript

I have the problem that with my jQuery code, despite the working code, the error message:
script.js: 28 Uncaught TypeError: $ (...). Css (...) is not a function
occurs. It was supposed to work anyway, but since I don't want any unnecessary error codes in my code, I ask if anyone has a solution to this error?
Here is my code:
$(document).ready(function () {
$("#bgh-tooltipin1").hover(function () {
$("#bgh-tooltipout1").css('visibility', 'visible');
}, function () {
$("#bgh-tooltipout1").css('visibility','hidden')()
});
});


You are adding unnecessary parenthesis at the end:
$("#bgh-tooltipout1").css('visibility','hidden')**()**
The last parenthesis would be fine if .css('visibility','hidden') returned a function, but instead, it returns a jQuery object representing the "#bgh-tooltipout1" element
This is the correct version:
$(document).ready(function () {
$("#bgh-tooltipin1").hover(function () {
$("#bgh-tooltipout1").css('visibility', 'visible');
}, function () {
$("#bgh-tooltipout1").css('visibility', 'hidden');
});
});

Related

Call jQuery widget from outside

I wrote a jquery-Widget with a method clear:
(function($) {
$.widget('ccf.mobileHeaderAutocomplete', {
...
clear: function () {
this.ulElement.empty();
},
...
});
})(jQuery);
I sucessfully call another method on the input element:
$('.header-searchfield input')
.on('input', function () {
var value = $(this).val();
$(this).mobileHeaderAutocomplete('suggest', value);
});
I now want to call it when clicking a button (outside the input element, to which the widget is attached to), but it doesn't work:
$('.header-searchfield__close-button').on('click', function () {
$('.header-searchfield input').data('mobileHeaderAutocomplete').clear();
}
The error in the JS console is Uncaught TypeError: Cannot read property 'clear' of undefined
I used this answer as reference and tried also ui-mobileHeaderAutocomplete. Am I missing something here?

How to Implement inheritance in Jquery UI widget

I am trying to inherit a method from base widget to another widget.
here is my sample code
My base widget is
$(function () {
$.widget("UI.baseWidget", {
options: {
testVal:''
},
_create: function () {
alert(this.option.testVal);
},
});
});
and other widget calling this base widget is
$(function () {
$.widget("UI.MyWidget", $.UI.baseWidget, {
options: {
testVal:''
},
_create: function () {
$.UI.baseWidget.prototype._create.call(this);
}
});
});
and initilise the MyWidgetcode is'
$('#mydiv').MyWidget({testVal:'test widget'})
How can we pass testVal option from MyWidget to baseWidget call?
and I getting error some thing like
Uncaught TypeError: i is not a constructor
Uncaught TypeError: $(...).MyWidget is not a function
can please help me to fix this issue. thanks in advance

Seems to work OK: I only made one correction : changed option to options in alert(this.option.testVal); and the alert with 'test widget' popped up OK. You can also try to create the widget jquery onReady and see if that fixes the problem i.e. :
$(function () {
$('#myDiv').MyWidget({testVal:'test widget'});
});
See my code at https://jsfiddle.net/5gmn6x7k/4/

Adding jQuery code to wordpress

I am trying to add the following code to Wordpress but it doesn't seem to work. The same code in a fiddle works.
Please help.
$(".box").hover(
function (e) {
$('.box').not(this).addClass('grey')
}, // over
function (e) {
$('.box').removeClass('grey')
} // out
);

You have to wrap it in the noConflict mode. Like:
jQuery(function($){
// Your jQuery code here, using the $
});
See: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
So, that would boil down to
jQuery(function($){
$(".box").hover( function (e) {
$('.box').not(this).addClass('grey');
}, // over
function (e) {
$('.box').removeClass('grey');
} // out
);
});

Not a Function After First Click

I have a JS Function that looks like this:
$(function() {
$(".accordion").on("click", "dd", function (event) {
$("dd.active").find(".content").slideToggle("slow");
$(this).find(".content").slideToggle("slow");
var current = event.currentTarget
if (current.hasClass('active')) {
current.removeClass('active');
}
})
});
The first part works fine, the second part (starting with var current =) works the first time then jQuery throws an error:
TypeError: current.hasClass is not a function
if (current.hasClass('active')) {
How do I solve this issue?
Here is a jsFiddle.

Wrap current reference in jQuery object
var current = $(event.currentTarget);
jsFiddle.

Very simple jquery custom function throws error

I have the following code:
$(document).ready(function() {
$.fn.addRemoveButton = function() {
alert(1);
};
$.addRemoveButton();
});
And I get the following error message from firebug:
TypeError: $.addRemoveButton is not a function
$.addRemoveButton();
Why and how can I fix this?

You need to define a selector, try this:
$(document).ready(function() {
$.fn.addRemoveButton = function() {
alert(1);
};
$(document).addRemoveButton();
});
Here is working jsFiddle.

You need to apply that to any DOM.
Example
jQuery Code
$(function()
{
$.fn.addRemoveButton = function() {
alert(1);
};
$('#letit').addRemoveButton();
});
HTML Code
<div id="letit"></div>

or, you can create it as a jQuery global function:
$(document).ready(function() {
$.addRemoveButton = function() { // removed the .fn
alert(1);
};
$.addRemoveButton();
});
This binds the function to the jQuery object, where you can then use it like in your original example.
See this post for the difference between jQuery.fn.method and jQuery.method

Categories