Call jQuery widget from outside - javascript

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?

Related

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

Use vue.js method in EventListener click in other method

I have a vue.js script that generates an element 'lens' in a method.
Now, I would like to add an EventListener that calls another method when the lens element is clicked.
The issue:
I have tried two different ways to add the listener.
1: lens.addEventListener("click", this.openLightbox(src));
Works but is executed on pageload, not on click
2: lens.addEventListener("click", function() { this.openLightbox(src) }, false);
Is executed on click and not on payload, but throws error: Uncaught TypeError: this.openLightbox is not a function
The question:
How can I call the lightbox method in my zoom method? I does work if I copy the code from the lightbox mehtod into the zoom method itself as a function, however since the lightbox method is called by other elements as well that would lead to duplicate code.
Here is the full code:
initVue(target: string) : void {
this.vue = new Vue({
el: "#" + target,
store,
delimiters: vueDelimiters,
data: {
},
methods: {
openLightbox(src) {
console.log(src);
},
imageZoom(src) {
lens = document.createElement("DIV");
// works but is executed on pageload, not on click
lens.addEventListener("click", this.openLightbox(src));
// Is executed on click and not on payload, but throws error: Uncaught TypeError: this.openLightbox is not a function
lens.addEventListener("click", function() { this.openLightbox(src) }, false);
}
}
});
}
You have to attach this to the anonymous function like this :
lens.addEventListener("click", function() { this.openLightbox(src) }.bind(this), false);
Or define an alias before the statement, like this :
var self = this;
lens.addEventListener("click", function() { self.openLightbox(src) }, false);
Otherwise, this will not reference the parent context that you need.

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/

Binding 'this' and getting this

$('.btn-delete').on('click', this.confirm.bind(this));
Above, on click it runs:
p.confirm = function(e) {
if(!$(this).hasClass('danger')){
$(this).addClass('danger');
$(this).bind('mouseleave',function(){
$(this).removeClass('danger');
$(this).unbind('mouseleave');
});
}
else{
this.delete();
}
};
I'm having trouble with this. I need this to get the button but I also need this to access another method (this.delete). I've tried bind but it faisl to work.
Any ideas?
Assuming I'm understanding your question correctly, you want to be able to pass the clicked element as this to the p.confirm function. You should be able to do this by using call, or by using p.confirm as the handler:
// using call
$('.btn-delete').on('click', function (e) {
p.confirm.call(this, e);
});
// as handler
$('.btn-delete').on('click', p.confirm);
Assuming that this.delete is actually p.delete, just use call in the handler to pass the clicked element as this to the delete method:
p.confirm = function (e) {
var self = $(this); // cache lookup, "this" is the clicked element
if (!self.hasClass('danger')) {
self.addClass('danger');
self.bind('mouseleave', function () {
self.removeClass('danger');
self.unbind('mouseleave');
});
} else {
p.delete.call(this); // pass clicked element to use as "this" in p.delete
}
};

How do I set doubleClick function to call custom function in jqGrid

I have added a custom edit button control on the jqGrid navigator as follows:
jQuery("#grid").navButtonAdd('#pager',
{
caption:"Edit",
buttonicon:"ui-icon-pencil",
onClickButton: editSelectedRow,
position: "last",
title:"click to edit selected row",
cursor: "pointer",
id: "edit-row"
}
);
So that rather than use the default function: editGridRow, it uses my custom function editSelectedRow. However, I also want to add the doubleClick function to so that it calls editSelectedRow on doubleClick.
using the default editGridRow function works as such
ondblClickRow: function()
{
var rowid = jQuery("#grid").jqGrid('getGridParam','selrow');
jQuery(this).jqGrid('editGridRow', rowid);
}
However, when I replace the default editGridRow function with my default function editSelectedRow as such,
ondblClickRow: function()
{
var rowid = jQuery("#grid").jqGrid('getGridParam','selrow');
jQuery(this).jqGrid('editSelectedRow', rowid);
}
I get the following error within firebug:
uncaught exception: jqGrid - No such method: editSelectedRow
The function editSelectedRow however does exist and works with clicking the custom edit button. Please help, thanks.
UPDATE:
#Oleg: As requested here's the code defining method: editSelectedRow
function editSelectedRow(rowid)
{
var rowid = jQuery("#grid").jqGrid('getGridParam','selrow');
if( rowid != null )
{
var dialogId = '#edit-form-dialog';
var dialogTitle = 'Edit Customer';
$(dialogId).load('/customer/edit/id/' + rowid, function ()
{
$(this).dialog(
{
modal: false,
resizable: true,
minWidth: 650,
minHeight: 300,
height: $(window).height() * 0.95,
title: dialogTitle,
buttons:
{
"Save": function ()
{
var form = $('form', this);
$(form).submit();
$("#grid").trigger("reloadGrid");
},
"Cancel": function ()
{
$("#grid").trigger("reloadGrid");
$(this).dialog('close');
}
}
});
LaunchEditForm(this);
});
}
else
{
jQuery( "#dialogSelectRow" ).dialog();
}
return false;
}
#Oleg: Thanks, you advised against using a custom method editSelectedRow in place of method editGridRow. The reason I am using this is that my forms are Zend Forms and I need all the bells and whistles of Zend Form to be available. The server generates this form and it's loaded into a dialog form. If there's a way to still achieve this without resorting to my editSelectedRow custom method, I'd be glad to learn it. Thanks.
You question is pure JavaScript question.
If you define the function editSelectedRow as
function editSelectedRow(rowid)
{
...
}
you can call it as editSelectedRow(rowid) and not as jQuery(this).jqGrid('editSelectedRow', rowid);.
Another problem is that you use this inside of he body of editSelectedRow function. It's not correct. You can define editSelectedRow function in a little another way
var editSelectedRow = function (rowid) {
...
};
In the case editSelectedRow will be able to bind this to any value. To do this you need use another form of invocation of the function. Inside of ondblClickRow it will be
ondblClickRow: function () {
var rowid = jQuery("#grid").jqGrid('getGridParam','selrow');
editSelectedRow.call(this, rowid);
}
In the above example the first parameter of call is the value used as this inside of the function. We forward just the current this value forward to editSelectedRow. If we would use the form editSelectedRow(rowid); for the invocation of the function the value of this inside of function will be initialized to window object.
The usage of editSelectedRow inside of navButtonAdd can stay unchanged.

Categories