Develop Reference

JavaScript/Jquery - Copy table row inside a handler

I got a function like this:
function isRowEmpty(){
var emptyRow = true;
var tableRow;
$('#ProblemsGrid').delegate('td a', 'click', function() {
tableRow = $(this).closest ('tr');
});
tableRow.find('textarea').each(function(index, element){
var value = $(element).val();
if(value != "") {emptyRow = false;}
});
return emptyRow;
}
What I'm trying to do is to get the table row that has the that was clicked and check the of that row to see if it's empty, then return true/false. I think the problem I got here has something to do with javascript closure. The var tableRow is not being changed in the outer function. I've been trying to figure out a workaround but no luck. I'm relatively new to JavaScript and Jquery.
Update: Here's how isRowEmpty() is used.
function deleteRow(){
if (isRowEmpty()===true){
$('#ProblemsGrid').delegate('td a', 'click', function() {
$(this).closest ('tr').remove();
});
}
}
Here's part of my HTML:
<tr>
<td><textarea name='text' style='width: 98%; height:40px'>....</textarea></td>
<td><a href='#anchor' name='DeleteButton' onclick='deleteRow();'>
<img src='../images/delete.gif'></img> </a>
</td>
</tr>

You should utilize the power of jQuery when you are using it. I tried to simplify your code:
$('.deleteRow').on('click', function() {
var tr = $(this).closest('tr');
var remove = true;
tr.find('textarea').each(function() {
if ($(this).val() != '') {
remove = false;
}
});
if (remove) {
tr.remove();
}
});
Just add a class deleteRow to your remove button/image and lose your inline event handler (onclick='functionCall())
Example jsFiddle
It seems you're appending your rows dynamically, then your selector should look like this:
$(document).on('click', '.deleteRow', function() {
// ...
});
By the way. From the .delegate docs:
As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the .on() method. In general, these are the equivalent templates for the two methods:

Try this:
function deleteRow(){
if (emptyRow){// isRowEmpty returning emptyRow
$('#ProblemsGrid').delegate('td a', 'click', function() {
$(this).closest ('tr').remove();
});
}
}

Try this.
function isRowEmpty(el){
var emptyRow = true;
if(el.val() != "" && el.val() != "....")
emptyRow = false;
return emptyRow;
}
$(document).delegate('#ProblemsGrid td a', 'click', function() {
if (isRowEmpty($(this).closest('tr').find('textarea'))){
$(this).closest('tr').remove();
}
});
Fiddle

create stackoverflow tagging system?

I am trying to create a tagging system just like SO has.
I have added the tags,now I want to remove them.
MyQuestion:
How do I remove the tags appended?
how do I make the cross button(a span) look identical to that in SO tagging system?
SO TAGGING
var tags = [];
$("#textBox").keypress(function (e) {
if (e.which === 13) {
$(".target").append("X</span>'+ "");
function remove_tag(){
//what to do here?
}
tags.push(this.value);
this.value = "";
}
});

Here's my JSFiddle: http://jsfiddle.net/Wky2Z/11/
Basically, listen on the .cross to be clicked, and then remove from array and delete element
//enter something in textbox and press enter....
var tags = [];
$("#textBox").keypress(function (e) {
if (e.which === 13) {
$(".target").append("X</span>'+ "");
tags.push(this.value);
this.value = "";
}
});
$('body').on('click','.cross',function(){
tags.splice($(this).parent('a').html(), 1);
$(this).parent('a').remove();
});
As for the look of the cross, SO use a CSS Sprite, so you can do the same by making a png or gif or jpeg of the two states, off(grey) and hover(red) and switch the background-position to red with css eg: .cross:hover { background-position:0px -20px }

You can delete elements making use of remove().
Also, i would recommend you to make use of jQuery events instead of using inline events. (if you take a look at the source code of stackoverflow you will notice there are no inline javascript calls)
In this case you would need to add an event handler to the document object as you want to assign the events to elements which are not loaded in the DOM from the start.
$(document).on('click', '.tag span', function(){
$(this).parent().remove();
});
Living example: http://jsfiddle.net/Wky2Z/7/
Update
I updated the example removing the element from the list of tags too:
http://jsfiddle.net/Wky2Z/8/
Added a data-value for the tag links:
$(".target").append("X</span>'+ "");
And modified the click event:
$(document).on('click', '.tag span', function(){
$(this).parent().remove();
var removeItem = $(this).parent().data('value');
tags = $.grep(tags, function(value) {
return value != removeItem;
});
});

For a full jQuery solution you can remove the inline remove_tag function and use jQuery on function. it works for dynamically created elements too.
Attach an event handler function for one or more events to the
selected elements.
Here you can get the parent element of the deleted element and remove it from the DOM using remove.
To "sync" the array with the current situation you can use grep to delete the item from the array; note the removedItem variable used to get the text only of the parent excluding the children from the text.
Code:
//enter something in textbox and press enter....
var tags = [];
$(document).ready(function () {
$('body').on('click', 'span.cross', function () {
var removedItem = $(this).parent().contents(':not(span)').text();
$(this).parent().remove();
tags = $.grep(tags, function (value) {
return value != removedItem;
});
});
$("#textBox").keypress(function (e) {
if (e.which === 13) {
$(".target").append("X</span>' + "");
tags.push(this.value);
this.value = "";
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/pDFnG/

Here's the updated link: http://jsfiddle.net/Wky2Z/6/
Move remove_tag outside of keypress event handle and pass a this pointer to it for quick solution:
//enter something in textbox and press enter....
var tags = [];
function remove_tag(x) {
$(x).parent('a').remove();
}
$(function () {
$("#textBox").keypress(function (e) {
if (e.which === 13) {
$(".target").append("X</span>' + "");
tags.push(this.value);
this.value = "";
}
});
});

Hover and toggle in basic javascript

I have the following JavaScript code for a simple hover which uses JQuery:
$('.product_img_link').hover(function(){
$(this).prev('.hoverProduct').show();
},function(){
$(this).prev('.hoverProduct').hide();
});
(finds the previous div with class hoverProduct, and displays it on hover and hides it on mouse out).
How can I write this snippet without JQuery, using only plain JavaScript?

Something like this:
var links = document.querySelectorAll('.product_img_link');
[].forEach.call(links, function(link) {
var prev = link.previousSibling;
link.addEventListener('mouseover', function() {
prev.style.display == 'block';
});
link.addEventListener('mouseout', function() {
prev.style.display == 'none';
});
});
In jQuery prev with a selector gets the previous element only if it matches the selector. If you want the same behavior in plain JS you can test like this:
...
var prev = link.previousSibling;
var hasClass = /\bhoverProduct\b/.test(prev.className);
if (hasClass) {
// events
}
...

jQuery how to get the class or id of last clicked element?

I am trying to get the class or an id of the last clicked element. This is what I have based off of what I found here...
HTML
Button
JQUERY
$('.button').click(function () {
myFuntion();
});
function myFunction (e) {
e = e || event;
$.lastClicked = e.target || e.srcElement;
var lastClickedElement = $.lastClicked;
console.log(lastClickedElement);
}
This sort of does what I want, but I am not sure how to go about modifying it so I can get just the class.
I have also tried using this solution but couldn't get it to work with my code.
$('.button').click(function () {
myFuntion();
});
function myFunction(){
var lastID;
lastID = $(this).attr("id");
console.log(lastID);
}
When I do this my console log comes back as undefined. I am probably missing something obvious. Any help is much appreciated. Thanks.

You can pass clicked element as parameter to your function:
$('.button').click(function () {
myFunction(this);
});
function myFunction(element) {
console.log(element);
console.log(element.id);
console.log($(element).attr("class"));
}
UPDATE added jsfiddle

A couple of ways come to mind:
$(".button").click(myFunction);
Should work with the above myFunction.
$(".button").click(function () { myFunction($(this)); });
function myFunction($elem) {
var lastID;
lastID = $elem.attr('id');
$.data('lastID', lastID);
}

In order to get the class-name of the element, assuming you have an accurate reference to the element from which you want to retrieve the data:
var lastClickedElement = $.lastClicked,
lastClickedElementClassNames = lastClickedElement.className;
This does return the full list of all the classes of the element though.

$('.button').click(function () {
myFuntion(this);
});
function myFunction(ele){
var lastID;
lastID = $(ele).attr("id");
console.log(lastID);
}

First Select all possible DOM Elements
var lastSelectedElement = null
$(document).ready(function(){
$("*").live("click",function(){
lastSelectedElement = $(this);
myFunction($(this));
});
});
function myFunction(element) {
console.log(element);
console.log(element.id);
console.log($(element).attr("class"));
}
than you could play with lastSelectedElement by grabbing it's ID or Class with jQuery .attr("ID OR CLASS");

Hack: Disable click click with jQuery

I'm hacking a gallery plugin where I want to disable the click event for the thumbnail and replace it with a hover event.
This is what I did: http://jsbin.com/enezol/3
$(function() {
var galleries = $('.ad-gallery').adGallery();
$('.ad-thumb-list a').hover(function() {
$(this).click();
});
$('.ad-thumb-list a').click(function() {
return false;
});
});
The plugin doesn't allow me to set event to use. So Instead of changing it from their code, I'll just add a little tweak on top of it.
So I want to disable the click event for the 'thumbnail' and just use 'hover' event instead.
Any got and ideas? I'm also open to other approach as long as it meets my requirement.
Thank You!
Trying to implement Steph Skardal and Nicosunshine suggestion:
var thumbs = $('.ad-thumb-list a'),
oldfunction = thumbs.data("events").click["function () { context.showImage(i); context.slideshow.stop(); return false; }"];
thumbs.unbind("click").hover(oldFunction);
edit: My Solution:
I use return false to restrict it from going to the url but it does not restrict in calling the function. Any alternative ideas?
var galleries = $('.ad-gallery').adGallery();
var thumbs = $('.ad-thumb-list a');
thumbs .hover(
function () {
$(this).click();
},
function () {
}
);
thumbs.click( function () { return false; });

You want to use jQuery's unbind method, to unbind the click event. It will have to be called after the plugin is called. E.g.:
$('.ad-thumb-list a').unbind('click');

You could try to unbind the click method and then bind the original function to the hover.
If you can't get the original function you can get it by seeing what the console returns if you throw:
$('.ad-thumb-list a').data("events").click; //name of the property that has the function
then you grab that function and do:
var thumbs = $('.ad-thumb-list a'),
oldfunction = thumbs.data("events").click["theValueYouGotInTheConsole"];
thumbs.unbind("click")
.hover(oldFunction);
Edit:
Here is an example of what I ment with "theValueYouGotInTheConsole", in the image I'm accessing the click property, and then the "4" is where the function is stored.
If you don't want to hardcode the value you can do:
var dataEvents = thumbs.data("events").click,
oldFunction;
for(var functionEvent in dataEvents) {
oldFunction = dataEvents[functionEvent];
break; //I'm assuming there's only one event
}