I have a constructor Dropdown which will take an array as a parameter. This parameter will be used by a method attached to the prototype. The parameter is an array which should be turned into a parameter of jQuery option objects, which should be the drop down menu options for the select element. Currently I have:
function Dropdown(data) {
this.sel = $('<select>');
}
Dropdown.prototype.options = function (options) {
var self = this; //using $(this) doesn't work either
if ( !options ) {
//if null return the current values of
return self.sel.html();
} else {
//make a jQuery option object out of every item in the array
//set the sel property's html to that
self.sel.html = ($.map(options, function (val) {
return $('<option>').text(val).val(val);
}));
}
}
var testArray = ['one', 'two', 'three'];
var dropdown = new Dropdown(testArray);
dropdown.sel.appendTo($('body'));
console.log(dropdown.options()); //nothing outputted to the console
by passing testArray into the Dropdown constructor this should set the html property of sel, but it doesn't and trying to use the jQuery style getter prints nothing to the console. dropdown is appended to the page, just with no options.
To start with, you're not calling the options function in the prototype. After calling it, some other bugs showed up.
self.sel.html = ($.map(options, function (val) {
return $('<option>').text(val).val(val);
}));
This turns self.sel.html into an array filled with jQuery option elements, which you're doing nothing with.
I changed it a little bit to get it working. See if it works for you. I believe it's easy to understand.
function Dropdown(data) {
this.sel = $('<select>');
this.options(data);
}
Dropdown.prototype.options = function (options) {
var sel = this.sel;
options && options.forEach(function ( val ) {
$('<option>').val(val).text(val).appendTo(sel);
});
}
Fiddle: http://jsfiddle.net/b7pvS/
Right now your constructor does nothing other than to create a select element in jQuery. You pass in the data parameter and do nothing with it. You simply need to add this.options(data); in the constructor and you should be good to go.
function Dropdown(data) {
this.sel = $('<select>');
this.options(data);
}
Related
I am using the autoSuggest plugin from http://code.drewwilson.com/entry/autosuggest-jquery-plugin across my website to search for various different items.
One major function with this plugin is that when a selection is added, a callback function gets called and I check whether this is new data added or it is fetched from the web service and then update some variables(which I use for submission)
Up-till now, I have been using it without any thought but now I have decide to go OOP way and create a JS object to wrap this plugin and other associated functions(common callbacks) and config values(urls) etc.
In the class I have different data variables which will be updated as the selection are added and removed. halfway through the code, I realized that the callbacks take only one argument and there is no way(apparent to me) by which I could pass those variables or the object's context to these callbacks
Below is the code I have written so far :
var coSuggest = function(options) {
this.selector = options.selector;
this.options = options;
//this.that = this;
//this.submitURL = options.submitURL;
//if y=type is not defined , default type will be people
if ( typeof (options.type) === 'undefined') {
this.type = 'people';
} else {
this.type = options.type;
}
// if as_options are not defined, as_options will be a empty object
//console.log(typeof(options.as_options));
if ( typeof (options.as_options) === 'undefined') {
this.as_options = {};
} else {
this.as_options = options.as_options;
}
this.valuesField = $('#as-values-' + this.as_options.asHtmlID);
//the initData field will be an array of object containing {id,value} of prefilled items initially
//the addData field will be an array of object containing {id,value} of new selected items from the suggestions
//the newData field will be an array of strings [values] containing the new values added
//the removeData field will be an array of objects containing {id,value} of the items from data to be removed
if ( typeof (options.initData) !== 'undefined') {
this.initData = options.initData;
this.as_options.preFill = this.initData;
}
this.as_options.selectionAdded = this.selectionAdded;
// callback function to be added in as_options as selectionAdded
this.as_options.selectionRemoved = function(elem) {
console.log(elem);
}
//return this
};
//urlConf for searching the items sitewide
coSuggest.prototype.urlConf = {
people : 'abc',
interest : "index.php/profile/getInterestsSkillsTags",
skill : 'xyz',
teacher : 'xyz',
designation : 'xyz',
city : 'xyz',
subject : 'xyz',
};
// callback function to be added in as_options as selectionAdded
coSuggest.prototype.selectionAdded = function(elem) {
//console.log($(this).find('.as-values'));
console.log(elem);
}
//bind function to bind the autoSuggest plugin with the selector provided
coSuggest.prototype.bind = function(options) {
//console.log(as_options);
$(this.selector).autoSuggest(base_url + this.urlConf[this.type], this.as_options);
}
How can I do this without losing the re-usability of the code ?
I am answering this question as I think I have solved the problem by extending the code. I added a new parameter in the selectionAdded callback and supplied the function reference in that function while calling.
I ran yesterday in a problem with a jquery-selector I assigned to a variable and it's driving me mad.
Here is a jsfiddle with testcase:
assign the .elem to my obj var
log both lengths to the console. Result => 4
Remove #3 from the DOM
log obj to the console => the removed #3 is still there and the length is still 4.
I figured out that jquery query is snapshotted? to the variable and can't?won't? be updated
log .elem to the console.. yep Result => 3 and the #3 is gone
Now I update .elem with a new width of 300
logging obj & obj.width gives me 300.. So the snapshot has been updated ? What's interesting is that 3 of the 4 divs have the new width, but the removed #3 doesn't...
Another test: Adding a li element to the domtree and logging obj and .elem.
.elem does have the new li and obj doesn't, because it's still the old snapshot
http://jsfiddle.net/CBDUK/1/
Is there no way to update this obj with the new content?
I don't want to make a new obj, because in my application there is a lot information saved in that object, I don't want to destroy...
Yeah, it's a snapshot. Furthermore, removing an element from the page DOM tree isn't magically going to vanish all references to the element.
You can refresh it like so:
var a = $(".elem");
a = $(a.selector);
Mini-plugin:
$.fn.refresh = function() {
return $(this.selector);
};
var a = $(".elem");
a = a.refresh();
This simple solution doesn't work with complex traversals though. You are going to have to make a parser for the .selector property to refresh the snapshot for those.
The format is like:
$("body").find("div").next(".sibling").prevAll().siblings().selector
//"body div.next(.sibling).prevAll().siblings()"
In-place mini-plugin:
$.fn.refresh = function() {
var elems = $(this.selector);
this.splice(0, this.length);
this.push.apply( this, elems );
return this;
};
var a = $(".elem");
a.refresh() //No assignment necessary
I also liked #Esailija solution, but seems that this.selector has some bugs with filter.
So I modified to my needs, maybe it will be useful to someone
This was for jQuery 1.7.2 didn`t test refresh on filtered snapshots on higher versions
$.fn.refresh = function() { // refresh seletor
var m = this.selector.match(/\.filter\([.\S+\d?(\,\s2)]*\)/); // catch filter string
var elems = null;
if (m != null) { // if no filter, then do the evarage workflow
var filter = m[0].match(/\([.\S+\d?(\,\s2)]*\)/)[0].replace(/[\(\)']+/g,'');
this.selector = this.selector.replace(m[0],''); // remove filter from selector
elems = $(this.selector).filter(filter); // enable filter for it
} else {
elems = $(this.selector);
}
this.splice(0, this.length);
this.push.apply( this, elems );
return this;
};
Code is not so beautiful, but it worked for my filtered selectors.
Clean and generic solution worked properly with jQuery 3.4.1:
My solution is to do the following:
Intercept the selector at the time of jQuery object initialization and in the same time maintain all other jQuery functionalities transparently all this using inheritance
Build refresh plugin that make use of the new "selector" property we added during initialization
Definition:
$ = (function (originalJQuery)
{
return (function ()
{
var newJQuery = originalJQuery.apply(this, arguments);
newJQuery.selector = arguments.length > 0 ? arguments[0] : null;
return newJQuery;
});
})($);
$.fn = $.prototype = jQuery.fn;
$.fn.refresh = function ()
{
if (this.selector != null && (typeof this.selector === 'string' || this.selector instanceof String))
{
var elems = $(this.selector);
this.splice(0, this.length);
this.push.apply(this, elems);
}
return this;
};
Usage:
var myAnchors = $('p > a');
//Manipulate your DOM and make changes to be captured by the refresh plugin....
myAnchors.refresh();
//Now, myAnchors variable will hold a fresh snapshot
Note:
As optimization, object selectors don't need refresh as they are pass by reference by nature so, in refresh plugin, we only refresh if the selector is a string selector not object selector for clarification, consider the following code:
// Define a plain object
var foo = { foo: "bar", hello: "world" };
// Pass it to the jQuery function
var $foo = $( foo );
// Test accessing property values
var test1 = $foo.prop( "foo" ); // bar
// Change the original object
foo.foo = "koko";
// Test updated property value
var test2 = $foo.prop( "foo" ); // koko
Jquery .selector is deprecated, it's better to remeber string with selector value to some variable at the moment when you assign
function someModule($selector, selectorText) {
var $moduleSelector = $selector;
var moduleSelectorText = selectorText;
var onSelectorRefresh = function() {
$moduleSelector = $(moduleSelectorText);
}
}
https://api.jquery.com/selector/
You can also return the JQuery selector in a function, and save this function into the variable. Your code will look a bit different but it works. Every time when you execute the function, your jquery selector will search the DOM again.
In this example I used an arrow function without brackets which will return whatever is next to arrow. In this case it will return the JQuery collection.
const $mySelector = () => $('.selector');
console.log($mySelector().last().text());
$('.parent').append('<li class="selector">4</li>')
console.log($mySelector().last().text()); //RETURNS 4 not 3
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="parent">
<li class="selector">1</li>
<li class="selector">2</li>
<li class="selector">3</li>
</ul>
If you use remove() it will remove only a part of the DOM but not all the children or related, instead if you use empty() on the element the problem is gone.
E.G.:
$('#parent .child).find('#foo').empty();
Maybe it can be useful to someone!
I create a context-menu from an array like this:
var menu1 = [
{
'OPTION1':function(menuItem,menu) {
// code for OPTION1
}
},
{
'OPTION2':function(menuItem,menu) {
// code for OPTION2
}
}
];
When the user right-clicked on my webpage, a menu appears with the options OPTION1 and OPTION2.
I need to change dynamically the function name, because it's the context-menu option text. Is there any way to declare the function name as a variable?
This is what I want:
var optionsletters = {};
optionsletters['option1'] = 'option_one';
optionsletters['option2'] = 'option_two';
var menu1 = [
{
optionsletters['option1']:function(menuItem,menu) {
// code for OPTION1
}
},
{
optionsletters['option2']:function(menuItem,menu) {
// code for OPTION2
}
}
];
EDIT#1: This is the plugin I've been using jQuery ContextMenu Plugin
EDIT#2: I need this to allow change language from spanish to english and viceversa.
You can't use the object literal notation to set arbritrary properties as you seem to try in the second example. This doesn't stop you from setting the property manualy:
function make_menu_item(name, func){
var item = {}; //Create an empty object
item[name] = func; //Assign the property with the name you choose
//(obj['option1'] is equivalent to obj.option1 in Javascript)
return item;
}
var menu = [
make_menu_item('option1', function () {...}),
make_menu_item('option2', function () {...})]
What about something like:
var name = 'option_one',
optionsletters = {};
optionsletters[name] = function() { ... };
Are you asking if you can change the key from 'OPTION1' : function() {} to 'option1' : function() {} ? If so you can just copy the function to a new variable onclick. If what you're asking is to be able to call something 'option1' as a string like option1 but actually call OPTION1(){} you can try a few different things. One you could make your array like so arr[{'name' : 'option1', 'func' : function(){} }] Then you could reference array[0].name and array[0].func.
With your current code it looks like you're blowing out your functions with strings.
JS is super expressive so there are a million ways to do anything. Functions are first-class objects so can be passed as parameters and even returned from functions.
I have the following (simplified) object literal. The icons method uses closure to hide the icons variable, which I'd like to have as an associative array for later lookups.
var MapListings = {
icons: function () {
var allIcons = [] ;
return {
add: function (iconType, iconImage) {
var icon = new GIcon(MapListings.baseIcon);
icon.image = iconImage;
allIcons[iconType] = icon; // fails, but this is what I want
// allIcons.push(icon); // works, but this is not what I want
},
get: function () {
return allIcons;
}
};
} ()
}
I add items to the to the icons object like so:
MapListings.icons.add("c7", "/images/maps/blue.png");
MapListings.icons.add("c8", "/images/maps/red.png");
The following doesn't work:
allIcons[iconType] = icon;
But this does:
allIcons.push(icon);
Outside of the closure the associative array style works fine, so perhaps there is a conflict with jQuery? The error I get in firebug a is undefined looks to come from the library. I'd like to maintain the associative array style.
Any ideas?
Update
It looks like this conflict is coming from google maps. Odd, not sure of a way around this.
Dumbass Update
The part of my object literal that returned a base GIcon() object wasn't returning an object at all. So, the object didn't have the right properties.
baseIcon: function () {
var base = new GIcon();
base.shadow = '/images/maps/shadow.png';
base.iconSize = new GSize(12, 20);
base.shadowSize = new GSize(22, 20);
base.iconAnchor = new GPoint(6, 20);
base.infoWindowAnchor = new GPoint(5, 1);
return base;
}
And MapListings.baseIcon is NOT the same as MapListings.baseIcon()! D'oh
if you want a lookup table, just do var allIcons = {}
EDIT: Though technically it should work either way, as an array IS an object. Are you sure there isn't more to this?
EDIT #2: Can't you just make allIcons as a property of MapListings?
EDIT #3: I think it's working, but maybe you're not accessing it right? That or it fails creating the object with Google somehow, or the error you posted is happening elsewhere, and not here
function GIcon(){};
var MapListings = {
icons: function () {
var allIcons = [] ;
return {
add: function (iconType, iconImage) {
var icon = new GIcon(MapListings.baseIcon);
icon.image = iconImage;
allIcons[iconType] = icon; // fails, but this is what I want
// allIcons.push(icon); // works, but this is not what I want
window.x = allIcons
},
get: function () {
return allIcons;
}
};
} ()
};
MapListings.icons.add("c7", "/images/maps/blue.png");
MapListings.icons.add("c8", "/images/maps/red.png");
alert( MapListings.icons.get()['c8']['image'] )
You shouldn't loop using .length but instead directly access c7 or c8.
x = MapListings.icons.get();
for ( var prop in x ) {
if ( x.hasOwnProperty(prop ) ) {
alert( x[prop]['image'] )
}
}
So one thing you could do to fix this is change the way you reference the array. Since external to your add method you do this:
MapListings.icons["c7"]
You can also just use this to add to your array inside your add function:
add: function (iconType, iconImage) {
MapListings.icons[iconType] = iconImage;
},
allIcons[iconType] = icon; fails because allIcons is an Array, not an object. Try initializing allIcons to {} instead. That would allow you to place items in the collection by key.
Hi I'm trying to author a jQuery plugin and I need to have methods accessible to elements after they are initialized as that kind of object, e.g.:
$('.list').list({some options}); //This initializes .list as a list
//now I want it to have certain methods like:
$('.list').find('List item'); //does some logic that I need
I tried with
$.fn.list = function (options) {
return this.each(function() {
// some code here
this.find = function(test) {
//function logic
}
}
}
and several other different attempts, I just can't figure out how to do it.
EDIT:
I'll try to explain this better.
I'm trying to turn a table into a list, basically like a list on a computer with column headers and sortable items and everything inbetween. You initiate the table with a command like
$(this).list({
data: [{id: 1, name:'My First List Item', date:'2010/06/26'}, {id:2, name:'Second', date:'2010/05/20'}]
});
.list will make the <tbody> sortable and do a few other initial tasks, then add the following methods to the element:
.findItem(condition) will allow you to find a certain item by a condition (like findItem('name == "Second"')
.list(condition) will list all items that match a given condition
.sort(key) will sort all items by a given key
etc.
What's the best way to go about doing this?
If you want these methods to be available on any jQuery object, you will have to add each one of them to jQuery's prototype. The reason is every time you call $(".list") a fresh new object is created, and any methods you attached to a previous such object will get lost.
Assign each method to jQuery's prototype as:
jQuery.fn.extend({
list: function() { .. },
findItem: function() { .. },
sort: function() { .. }
});
The list method here is special as it can be invoked on two occasions. First, when initializing the list, and second when finding particular items by a condition. You would have to differentiate between these two cases somehow - either by argument type, or some other parameter.
You can also use the data API to throw an exception if these methods are called for an object that has not been initialized with the list plugin. When ('xyz').list({ .. }) is first called, store some state variable in the data cache for that object. When any of the other methods - "list", "findItem", or "sort" are later invoked, check if the object contains that state variable in its data cache.
A better approach would be to namespace your plugin so that list() will return the extended object. The three extended methods can be called on its return value. The interface would be like:
$('selector').list({ ... });
$('selector').list().findOne(..);
$('selector').list().findAll(..);
$('selector').list().sort();
Or save a reference to the returned object the first time, and call methods on it directly.
var myList = $('selector').list({ ... });
myList.findOne(..);
myList.findAll(..);
myList.sort();
I found this solution here:
http://www.virgentech.com/blog/2009/10/building-object-oriented-jquery-plugin.html
This seems to do exactly what I need.
(function($) {
var TaskList = function(element, options)
{
var $elem = $(element);
var options = $.extend({
tasks: [],
folders: []
}, options || {});
this.changed = false;
this.selected = {};
$elem.sortable({
revert: true,
opacity: 0.5
});
this.findTask = function(test, look) {
var results = [];
for (var i = 0,l = options.tasks.length; i < l; i++)
{
var t = options['tasks'][i];
if (eval(test))
{
results.push(options.tasks[i]);
}
}
return results;
}
var debug = function(msg) {
if (window.console) {
console.log(msg);
}
}
}
$.fn.taskList = function(options)
{
return this.each(function() {
var element = $(this);
if (element.data('taskList')) { return; }
var taskList = new TaskList(this, options);
element.data('taskList', taskList);
});
}
})(jQuery);
Then I have
$('.task-list-table').taskList({
tasks: eval('(<?php echo mysql_real_escape_string(json_encode($tasks)); ?>)'),
folders: eval('(<?php echo mysql_real_escape_string(json_encode($folders)); ?>)')
});
var taskList = $('.task-list-table').data('taskList');
and I can use taskList.findTask(condition);
And since the constructor has $elem I can also edit the jQuery instance for methods like list(condition) etc. This works perfectly.
this.each isn't needed. This should do:
$.fn.list = function (options) {
this.find = function(test) {
//function logic
};
return this;
};
Note that you'd be overwriting jQuery's native find method, and doing so isn't recommended.
Also, for what it's worth, I don't think this is a good idea. jQuery instances are assumed to only have methods inherited from jQuery's prototype object, and as such I feel what you want to do would not be consistent with the generally accepted jQuery-plugin behaviour -- i.e. return the this object (the jQuery instance) unchanged.