We Keep Coding

jQuery error in visibility despite functioning function

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');
});
});

Error with mixitup filtering on pages that don't have filtering

On my homepage I have mixitup working using this:
var containerEl = document.querySelector('.gallery-container');
var mixer = mixitup(containerEl, {
selectors: {
control: '[data-mixitup-control]'
},
load: {
filter: '.engagement-ceremony'
}
});
I got this from their website. It works fine, but the moment I go to another page I'm getting this error in console:
Uncaught Error: [MixItUp] An invalid selector or element reference was passed to the mixitup factory function and it's causing my other js on the page to break.
I thought I'd try this instead to see what happens:
var mixer = mixitup('.gallery-container', {
selectors: {
control: '[data-mixitup-control]'
},
load: {
filter: '.engagement-ceremony'
}
});
But then I got this error: Uncaught Error: [MixItUp] The provided selector yielded no container element.
I'm stumped as to why this would error this way.
EDIT
So the only way I could get this to work properly without errors is to take this part of the mixitup script and load it onto my homepage conditionally using php. A hacky fix that bothers me, but the only way it'll work.

// Gallery Filtering
var containerEl = document.querySelector('.gallery-container');
var mixer;
if (containerEl) {
mixer = mixitup(containerEl, {
selectors: {
control: '[data-mixitup-control]'
},
load: {
filter: '.engagement-ceremony'
}
});
}
I had to wrap the script in a if statement.

Javascript CallBack with same function name in multiple pages

My objective is to perform Auto-Complete feature of the same context in multiple pages/Views, for same input having the same class name (i.e. Client Name to be auto complete for many pages like Create and Edit View and others).
Since I need to call the jquery's autocomplete() in each page, I had written in
Views\Shared_Layout.cshtml
page of my project so the auto complete feature will available where required. The code I had written in _Layout.cshtml is as follows:
<script>
$(document).ready(function () {
//common
$('.form-control.salescode').autocomplete({
minLength: 4,
source: '#Url.Action("GetAccountManager", "AccountManager")',
select: callBackSalesCodeLookUp
});
});
</script>
Then any View (Create or Edit) which requires, the auto-complete feature have this code called:
<script>
function callBackSalesCodeLookUp(event, ui)
{
event.preventDefault();
var selectedArr = ui.item.value.split("|");
var accountManagerID = selectedArr[0];
var accountManagerName = selectedArr[1];
$('.form-control.salescode').val(accountManagerID);
}
</script>
However, when I ran the project, I am getting an error for pages which have not having the following code, which is as expected:
function callBackSalesCodeLookUp(event, ui)
{
event.preventDefault();
var selectedArr = ui.item.value.split("|");
var accountManagerID = selectedArr[0];
var accountManagerName = selectedArr[1];
$('.form-control.salescode').val(accountManagerID);
}
The error I am getting, is in Chrome as :
jquery-3.1.1.js:3855 Uncaught ReferenceError: callBackSalesCodeLookUp
is not defined
at HTMLDocument. (Login?ReturnUrl=%2FAccountOpeningRegister%2FCreate:393)
at mightThrow (jquery-3.1.1.js:3570)
at process (jquery-3.1.1.js:3638)
I want to less the code, and which is the reason I made up something like this. I will be glad to know if there is any better way of coding this.
Thank You

Check if the function exists in the window before calling it.
<script>
if (typeof callBackSalesCodeLookUp == 'function') {
$(document).ready(function () {
//common
$('.form-control.salescode').autocomplete({
minLength: 4,
source: '#Url.Action("GetAccountManager", "AccountManager")',
select: callBackSalesCodeLookUp
});
});
}
</script>

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?

jQuery Widget Factory access options in a callback method

I'm trying to create a jQuery control using the widget factory. The idea is that I turn a button into a jQuery button, give it an icon, and register the click event for that button such that when invoked, it displays a calendar control on a textbox, whose id is passed in as an option to the widget method:
$.widget("calendarButton", {
options: {
textFieldId: ''
},
_create: function () {
this.element.button(
{
icons: {
primary: "ui-icon-calendar"
}
}).click(function () {
if (this.options.textFieldId != '') {
$(this.options.textFieldId).datetimepicker('show');
return false;
}
});
}
});
The problem with this however, is that this.options is undefined when the click handler is invoked; which makes sense since the method has a different scope. So I tried to see if there is a way to define a "static" variable which then can be accessed inside the callback method. I found this answer that explained how to create variables inside a wrapper function like this:
(function ($) {
var $options = this.options;
$.widget("calendarButton", {
options: {
textFieldId: ''
},
_create: function () {
this.element.button(
{
icons: {
primary: "ui-icon-calendar"
}
}).click(function () {
if ($options.textFieldId != '') {
$($options.textFieldId).datetimepicker('show');
return false;
}
});
}
});
})(jQuery);
But it still reports that $options is undefined. Is there a way to achieve this? I'm trying to avoid requiring the callback function be passed in since it'll be pretty much the same for all instances. Any help is appreciated.

After playing with it for a few hours, I finally came across the jQuery Proxy method which is exactly what I was looking for. I changed the code a little bit to look like this:
$.widget("calendarButton", {
options: {
textFieldId: ''
},
_create: function () {
this.element.button(
{
icons: {
primary: "ui-icon-calendar"
}
}).on("click", $.proxy(this._clickHandler, this));
},
_clickHandler: function () {
if (this.options.textFieldId != '') {
$(this.options.textFieldId).datetimepicker('show');
}
}
});
Notice that instead of implementing the click callback directly, I'm essentially creating a delegate that points to my private _clickHandler function, which itself runs on the same context as the $.widget() method (since the second argument of $.proxy(this._clickHandler, this) returns $.widget()'s context) hence availablity of the options variable inside the method.