Develop Reference

Write a function from native javascript to jQuery [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm wondering how can I rewrite this javascript function into jQuery but using if/else statements instead of while:
<textarea style="overflow-y: hidden;" onkeyup="expandtext(this);"></textarea>
function expandtext(textArea){
while (textArea.rows > 1 && textArea.scrollHeight < textArea.offsetHeight) {
textArea.rows--;
}
while (textArea.scrollHeight > textArea.offsetHeight) {
textArea.rows++;
}
textArea.rows++
}

Well, since you appear to want it so badly, here it is
$.fn.expandText = function () {
$.each(this, function (k, textArea) {
while (textArea.rows > 1 && textArea.scrollHeight < textArea.offsetHeight) {
textArea.rows--;
}
while (textArea.scrollHeight > textArea.offsetHeight) {
textArea.rows++;
}
textArea.rows++
});
}
$('textarea').expandText();
FIDDLE
Additionally, I think I understand what you wanted to ask. In order to understand this you need a good understanding of javascript objects and document object model. There are special properties of objects in the DOM which affect how the objects are displayed (this is all done by your browser automatically), rows is one of those properties, and in order for the element on the page to change in height, which is the goal of this function, you need to change the property rows on the specific element. You can't do this with jQuery (or maybe you can, who knows) because it wraps your object in other objects. Even if it is possible, you are going to have to call a function on the wrapper object which is then going to access the DOM object and change it's property, which is what your function does in the first place, so why bother at all.

Easier multiple value changes with jQuery [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am really in need of this one, because I cann't manually type loads of options for admin panel. Hence I need a quick way to fetch each input/select and add value as I want.
Here's looong sample for one option field:
$("select[name=big_proceed]").val("true");
$("select[name=proceed_action]").val("");
$("input[name=choice_premium]").val("Premium <span>Code</span>");
$("input[name=big_proceed_pts]").val("");
$("#settings_proceed input, #settings_proceed select").each(function () {
databaseData($(this));
});
I thought something like this may work but apparently I was wrong. Here's sample:
$("#settings_proceed :input").each(function () {
$(this)
.eq(0).val("true")
.eq(1).val("")
.eq(2).val("Premium <span>Code</span>")
.eq(3).val("");
databaseData($(this));
});
Any suggestions for me ?

From the jQuery documentation:
.eq(index): Reduce the set of matched elements to the one at the specified index.
Hence your second example doesn't work as intended because $(this) only matches one element (that's the intention behind the .each()). You could rewrite the code like so:
var values = ["true", "", "Premium <span>Code</span>", ""];
$("#settings_proceed :input").each(function(i){
$(this).val(values[i]);
databaseData($(this));
});
However, this approach makes the code hard to read and error-prone because it assumes a fixed order of the HTML elements (what if you change the order of the input fields but forget to adjust the JS accordingly?). So you really should "manually" add IDs to your input elements and select them by their ID and not their index.
As #David Thomas pointed out, some sample HTML would be quite helpful here, but without knowing any further details of what you're trying to do I'd suggest the following:
var values = {
big_proceed: "true",
proceed_action: "",
choice_premium: "Premium <span>Code</span>",
big_proceed_pts: ""
};
$.each(values, function(key, value){
$("#settings_proceed").find("[name='"+key+"']").val(value);
databaseData($(this));
});
That way you can neatly define all the values in one object and let jQuery safely do the rest.

How can invoke a function in Javascript automatically like jquery [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I've been trying to understand how jQuery works. Let's say for instance you would like to do something when an anchor tag is clicked. Take the code below for example:
$('.selector').click
The "$" References jQuery but then how does jQuery know that it is supposed to look for and find ('.selector') in the DOM? Then how does jQuery automatically know to run the following method of "click" on the matched element?

$ is a function. You're passing it the ('.selector') argument. That's how it knows what to fetch.
It then returns a jQuery object populated with the DOM elements that were found. That jQuery object has methods on it.
When you call .click() on the jQuery object, it iterates through the matched DOM elements it's holding, and performs the expected operation.
Here's a very simple example.
var $ = function(selector) {
return new jQuery(selector);
}
function jQuery(selector) {
var elems = document.querySelectorAll(selector);
this.length = [].push.apply(this, elems);
}
jQuery.prototype.click = function() {
for (var i = 0; i < this.length; i++)
console.log("clicking", i, this[i].nodeName);
return this;
}

It basically registers an event handler for that event on the elements that are selected. The event handler is something your browser takes care of, it invokes the handler when it registers a click. JQuery just sets it up in a way that's more user friendly.
Also note click() is different than click(function(){}), the first actually invokes the click as if you just mouse clicked the item, the second is actually an event handler that calls your function when a click is performed.

creating DOM nodes from arrays [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Note: This is a continuation of another question that I decided were two separate issues that need to be solved. I'm also currently not sure of how exactly to phrase this question, so I will try my best and when I get more clarity I will rephrase my question for future reference.
I'm writing two basic jQuery plugins, $.fn.query and $.fn.build, that sort an array, and create html code to insert into a document, respectively. I'm currently testing it with Vimeo video ID's that I will display videos with.
$.fn.build has three parts. First it wraps every array item with individual containers, the builds them into rows (problem area), then lastly it wraps everything in a container. (every part of this is optional).
Specifically the problem comes from this line: $(tmp).add(newRow); although it is valid javascript.
if ( options.splitBy !== undefined && options.wrapRow !== undefined ) {
var tmp = $([]),
newRow = function(i) {
$(build.splice( i, i + options.splitBy )).wrapAll( options.wrapRow ).parent();
};
for (var i = 0, l = build.length, a = options.splitBy; i < l; i += a) {
$(tmp).add(newRow);
}
build = tmp;
console.log(build);
}
See: http://jsbin.com/upatus/2/edit

I am quite sure that you want to use the function, instead of adding the function itself. Also, you will want to use the same tmp object all over the time, instead of wrapping it into a new jQuery instance and not adding to the original one. Try
tmp.add(newRow(i));
BTW: If you want to build an array, you should use
var tmp = [];
and
tmp.push(…);
Now I've looked at the code from the other question. Both answers are correct, and contain some valid points:
splice is an Array function on jQuery's prototype, and returns an array. (You have fiexd this now)
Your query method returns an array, but should return a jQuery instance for chaining
Your build variable was not initialized, but used
You should really choose whether you want to use arrays or jQuery objects internally in your function, and not mix them.
BTW, you should rename your functions to more descriptive names. "build" and "query" are very vague and may collide with other plugins.

Which strategy makes more sense in this jQuery plugin? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm making a jQuery plugin that displays alerts on the page. The plugin itself inserts the alert markup into the DOM. Since the jQuery way is to make everything return this to maintain chaining, I've run into an interesting issue I'd like feedback on. I'm trying to decide between the following two options.
Option One:
$("#content").alert('prepend', {type:'error', message:'This is an error'})
This looks pretty simple. An alert is prepended to the beginning of the #content DOM element. The problem is that it's unclear what is returned. It would make sense to return the alert element that was just created, but that kind of goes against the jQuery way.
Option Two:
$("<div>").alert({type:'error', message:'This is an error'}).prependTo("#content")
This way seems less clear and less intuitive, but it's more inline with the jQuery way of doing things, and it's clear what element is going to be returned.
So which options would you choose? My concern is that most users may not know that you can do $('<div>') to create a new element. On the other hand, I don't know of any well-known projects whose jQuery plugin methods return elements other than the elements they're invoked on, but perhaps there are. Thoughts?

I would just put it in the jQuery namespace (instead of on its prototype):
$.alert({type:'error', message:'This is an error'}).prependTo("#content");
In addition, you might consider asking for a selector/DOM node/jQuery object, instead of having the user prepend it themselves:
$.alert({
parent: '#content', // or $('#content') or document.getElementById('content')
type: 'error',
message: 'This is an error'
});

If your alert system is meant to be a popup-like or modal-like system, the user shouldn't have to specify a container. However, you can allow him to pass a container to insert your alertbox in:
$.alert({
type: 'error',
message: 'This is an error',
container: $(...) // Optional
});
It would return your plugin instance, or the alert container.

No, jQuery does not always return this. Chainability means only that you should return the instance itself if there's no result of your method.
For example, the clone() returns a new jQuery instance too; so there's nothing wrong with it. If you say "it's unclear", just document it, or rename the method to e.g. "$.fn.getAlert".
Yet, you must choose the signature of your method. The first option is like having a mandatory parameter for the container. If you like to make it optional, you might make the alert system a static method: $.createAlert(...) with an optional parameter.