this thread is related to the previous thread I have made on here,
I managed to add a new value to the existing value of the input,
function autofill() {
$('.items-form a').click(function(){
var currentValue = $("#inputString").val();
var newValue = $(this).attr('href') + " ";
var totalValue = currentValue + newValue;
$("#inputString").val(totalValue);
$(this).toggleClass('clicked');
return false;
});
}
now the problem is how I can ‘toggle’ the input like we have the toggleClass() in jquery?
the idea is to remove the input value which I previously add in if I do a second click, but this value will be added again when I do a third click, and go on and on - it is like what toggleClass() does.
There is more simple method than the one you outlined.
What you need to do when a user clicks a link is
empty the input field
toggleClass(‘clicked’) on the clicked <a>
walk through all <a> elements, if an element has class “clicked”, add it’s href (plus a space of course) to the input field
I don’t know if you need it, but the nice thing about this is that it preserves the order of the tags (the order in which tags appear in the input field is the same as the order in which the <a> tags are displayed on the website).
Hint: to walk through all <a> elements use $.each()
hi, I have looked very hard to understand this code, there are a few lines I am not quite get them…
tag = String(tag);
str = String(str);
i dont know why they have to be converted to string as they are already strings, arent they? does it make any different if I dont convert them to string?
if (idx === false) {
return;
}
what does it mean if the idx is not found, then return? what does it do?
sorry for a long question. but i do understand this code in general that you use string to add or remove tag. brilliant!
thanks!
p.s. I also tried to use array to do the same thing, but it is quite complicated!
$('.items-form a').click(function(){
var currentValue = $("#inputString").val();
var intersect;
var tag = $(this).attr('href');
var arrA = currentValue.split(' ');
var arrB = [tag];
for (i in arrA) {
for (j in arrB) {
if (arrA[i] == arrB[j]) intersect = arrA[i];
var index = arrA.indexOf(intersect);
}
}
if(index >= 0){
arrA.splice(index,1);
$("#inputString").val(arrA.join(" "));
}
else {
arrA.push(arrB);
$("#inputString").val(arrA.join(" "));
}
$(this).toggleClass('clicked');
return false;
});
I still can’t read JS like this, but I can answer some of these:
if (idx === false) {
return;
}
what does it mean if the idx is not found, then return? what does it do?
When a function returns, it stops running. If you say “return x;” then it’s also returning a value, but if I understand it correctly, if there is no value (just return) then it returns undefined. (notsure?) But anyway, in this case, the point is to stop the function, because something necessary for it to run has been checked for and found not to exist.
replace is a function that takes a regular expression as one of its arguments…
the first argument of the first replace is inside /'s (/pattern here/)
\s means “any whitespace” and {2,} means “at least two” (it’s {minimum, maximum} and if you don’t mention a maximum, then it’s infinite).
So it looks for anywhere where there’s 2 or more whitespace characters (which can be spaces, tabs, and I think also newlines?), and replaces them literally with ’ ’ (one space).
After that, another replace looks for any whitespace characters who start
^ means “the beginning” and is known as an “anchor” character in regexes.
is referring to how many whitespaces: none, one, or many.
Any extra whitespace that ended up in the front of your tags is replaced with ‘’ or nothing (no space between single quotes… looks like a double quote here but that’s not what it is).
No you don’t necessarily need to convert them to strings, but if you do you’re sure they are strings and the javascript engine doesn’t fail if you do a substr() or indexOf(); these functions are not defined for all objects.
If idx is not found, the substring is not found, i.e., the tag you want to remove is not currently in the input field (for example because I removed it manually, whithout using your links evil grin).
If the substring is not found, i.e., if the tag is not found in the input, I won’t waste any more time to remove it and can simply “return”. That should be “return false” btw, my bad
Basically what this statement does is:
.replace(/\s{2,}/,’ ') - Replace every occurence of 2 or more spaces with one space
.replace(/^\s*/, ‘’); - Remove any spaces at the start of the input
This is just to make the input string look nicer.
Regular Expression are a topic on their own, and should be viewed as such. If you’re interested you could read this tutorial. If you have any questions about them I would advice you to start a new thread on that, since it would be rather offtopic in this thread
Note that regular expressions are not only available in javascript, but in other programming languages as well.
No worries, I’m just glad you’re not “one of those guys” that just copy/paste the code and forget all about it
It’s good to see you’re really making an effort!
Now that isn’t too bad, is it?
You can however simplify it to:
$('.items-form a').click(function() {
var tag = $(this).attr('href');
var arrA = $("#inputString").val().split(' ');
if((idx = arrA.indexOf(tag)) >= 0) {
arrA.splice(idx,1);
} else {
arrA.push(tag);
}
$("#inputString").val( arrA.join(' ').replace(/\\s{2,}/,' ').replace(/^\\s*/, '') );
$(this).toggleClass('clicked');
return false;
});