show() is undefined because of custom plugin - javascript

I wrote this plugin to catch show event only for div_loading_page element:
(function ($) {
$.each(['show'], function (i, ev) {
var el = $.fn[ev];
$.fn[ev] = function () {
this.each(function () {
if (this.id == 'div_loading_page') {
$(this).trigger(ev);
return false; // break out of the loop
}
});
//alert(this.id);
el.apply(this, arguments);
};
});
})(jQuery);
It's working fine but because of it i get following error:
$cluetipTitle.show() is undefined , which is from cluetip jquery plugin. Any idea how can i resolve this conflict?

Change:
el.apply(this, arguments);
To
return el.apply(this, arguments);
This ensure that the original function's return value is reserved and will not cause unexpected behavior

change this
$.each(['show']
to
return $.each(['show']
this will allow for chaining, ie doing what you want to do with the .show

Related

Jquery Dailog not returning the user given value for Confirmation PopUp.

Hi I'm using JQUERY Dialog for a confirmation popup. I have a common javascript file, in which i had a function which used to call window.ShowModalDialog. Now from the same function i am calling the jquery dialog, but as it is an asynchronous call, the calling function returns the value(yes/no) without even accepting Values from dialog. How can i return the proper value(yes/no)
If I have correctly understood the problem ...
and if something is wrong, add the example of your code
Try using this pattern:
(function ($, undefined) {
$.fn.dialog = function (options) {
options = $.extend({}, $.fn.dialog.options, options);
return this.each(function () {
var dialog = $(this);
dialog.children(".ok").click(function (e) {
options.ok.call(this, e);
dialog.close();
});
dialog.children(".close").click(function (e) {
options.close.call(this, e);
dialog.close();
});
});
};
$.fn.open = function () {
this.get(0).showModal();
};
$.fn.close = function () {
this.get(0).close();
};
$.fn.dialog.options = {
ok : function () {},
close : function () {}
};
})(jQuery);
and using callback
var dialog = $(".myDialog").dialog({
ok : function () {
alert("ok!!");
}
});
Do everything you need in callback, but avoid callbackhell.
see example

Access originally clicked element in jQuery plugin

I have the following plugin, and while I wish it to be able to be applied to multiple elements, I do not wish to create a new dialog for each element.
But in the dialog.open callback or when the button is clicked, I wish to be able to access the element which was clicked and opened the dialog.
If I wanted to create multiple dialogs, I suppose I could put this.each(function () {...} in the init method and then this would be the individually clicked element, but as stated earlier, I only one one dialog.
EDIT. I revised the code so that it does what I need it to do. It just seems like a bit of a hack using data as I did. Is there a more proper way to do so?
How is this accomplished?
(function($){
var defaults = {};
var methods = {
init : function (options) {
var settings = $.extend({}, defaults, options);
var dialog = $('<div/>').dialog({
open: function( event, ui ) {
console.log(dialog.data('elementThatWasClicked'));
},
buttons: [
{
text: 'click',
click: function() {console.log(dialog.data('elementThatWasClicked'));}
}
]
});
return this.each(function () {
var $this=$(this);
$this.click(function(){dialog.data('elementThatWasClicked',$this).dialog('open')});
});
}
};
$.fn.test = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || ! method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.test');
}
};
}(jQuery));
$(function(){
$('.bla').test();
});

After retrieving the onclick source, can't use methods of element

This is the content of "myPlugin.js":
(function ($) {
$.fn.MyPlugin = function (options) {
// retrieve somespan
somespan.html("");
})(jQuery);
function SelectLink(element) {
console.log(element);
if (element.parent("span").parent("li.clickable")) {
alert("is clickable");
} else {
alert("is not clickable");
}
}
When I click the link element we created inside the div , the console gives me:
TypeError: element.parent is not a function
<a onclick="javascript: SelectLink(this);" href="#">
So it knows the element from which we departed, but I can't do anything further with it? Why does this happen?
Here element is a dom element reference not a jQuery oject so there is no method called parent() in it.
You can get the jQuery wrapper for the element and call the method on the wrapper
function SelectLink(element) {
console.log(element);
var $element = $(element);
if ($element.parent("span").parent("li.clickable")) {
alert("is clickable");
} else {
alert("is not clickable");
}
}
Since you are working on a plugin, instead of using inlined event handlers use jQuery event handlers like
(function ($) {
$.fn.MyPlugin = function (options) {
var $a = $('');
somespan.html($a);
$a.click(SelectLink)
}
function SelectLink(event) {
var $this = $(this);
//if ($this.closest("li.clickable").length) {
if ($this.parent("span").parent("li.clickable").length) {
alert("is clickable");
} else {
alert("is not clickable");
}
}
})(jQuery);

Make plugin to element specific

I have following js plugin to catch show hide events of elements. But i want to make it specific to One dom element only, i.e #div_loading_page
jQuery(function ($) {
$.each(['show','hide'], function (i, ev) {
var el = $.fn[ev];
$.fn[ev] = function () {
this.trigger(ev);
el.apply(this, arguments);
};
});
});
can anyone please help. thanks
jQuery(function ($) {
$.each(['show','hide'], function (i, ev) {
var el = $.fn[ev];
$.fn[ev] = function () {
this.each(function () {
if ( this.id == 'div_loading_page') {
$(this).trigger(ev);
return false; // break out of the loop
}
});
el.apply(this, arguments);
};
});
});

Generic function for jQuery events

I've got following solution to prevent of multiple clicks (respect only the first one and ignore the rest):
preventMultiClick = function() {
$(this).unbind("click");
$(this).bind("click", function() {
return false;
});
};
preventMultiSubmit = function() {
$(this).unbind("submit");
$(this).bind("submit", function() {
return false;
});
};
$("a").one("click", preventMultiClick);
$("#user").one("submit", preventMultiSubmit);
That solution for me is not elegant I think should be. So I tried upgrade it to following one:
preventMultiClick = function(event) {
$(this).unbind(event);
$(this).bind(event, function() {
return false;
});
};
$("a").one("click", preventMultiClick("click"));
$("#user").one("submit", preventMultiClick("submit"));
and that solution doesn't work. Could somebody explain why or tell me how the function respecting event given as function argument should be written?
The issue is you are calling the function when you are binding the handler, event object is passed to your handler, also event is an object, you should use it's type property.
var preventMultiClick = function(event) {
$(this).unbind(event.type);
$(this).bind(event.type, function() {
return false;
});
};
$("a").one("click", preventMultiClick);
$("#user").one("submit", preventMultiClick);
The problem is that you're passing in an undefined variable rather than the function reference. Instead I would do something like this.
preventMultiClick = function(event) {
$(this).unbind(event.type);
$(this).bind(event.type, function() {
return false;
});
};
$('a').one('click', preventMultiClick);
$('#user').one('submit', preventMultiClick);
Each event contains it's type.

Categories