ID or Class for textarea? - php

Question

I was working on a tooltip from scratch. The code for the tooltip has been added below.
Issue with following code:
The tooltip fades in and out on focussing or blurring on the text-area but the problem is, all the tooltips (tooltips corresponding to all the elements) fade in and out simultaneously.
The second issue is that the value of the text-area is same in all the tooltips which is the value of the first text-area.
PHP
<?php for($j; $j<5; $j++) { ?>
<tr>
<td style="position:relative"><?php echo CHtml::activeTextArea($PackageDeal,"package[$j][1]") ; ?>
<div style="color:#0D776e;font-size:15px;font-family:calibri;padding:1%;margin:0 0.5%;;word-wrap:break-word;display:none;z-index:100;width:200px;mion-height:25px;position:absolute;top:30px;"></div>
</td>
</tr>
<?php }?>
Jquery
<script src="jquery-1.8.3.min.js"></script>
<script>$(document).ready(function(){
$("textarea").focus(function(){
$("td div").fadeIn(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"});
$("td div").html($("textarea").val());
});
$("textarea").blur(function(){
$("td div").fadeOut(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"});
});
$("textarea").keyup(function(){
$("td div").html($("textarea").val());
});
});
</script>
The issue is that I'm using this tooltip in a PHP for loop and I tried variety of ways so that the tooltip is functional. I need to ask whether I should keep an Id / Class for the tooltip (div element) and for the text-areas so that the text shown is different in all and all of them don't show up simultaneously. Also I would like to know whether this is a jquery, php or html related issue. Thanks in Advance!
P.S. the tooltip works fine for single element.

Answer 1

Because your page would have a lot of <td><div></div></td>s from generated HTML (by PHP), and all matches td div, all of them would show if you were to call $('td div').//so on
So you need to specify which one you want to show, and in your case you want the one near to the element that is focused or blurred. jQuery is good at that.
$("textarea").focus(function(){
var targetArea = $(this);
targetArea.siblings('div').fadeIn(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"})
.html(targetArea.val());
});
Also, as per #joeltine answer, you also need to show only the html for that textarea too, so also use the same $(this) in your html call parameter.
For performance, you may want to chain them together and cache $(this) to a variable as above too - the $ constructor is expensive.
And one more thing, you seem to set css when it fades in and fades out, but they are not necessary - when you can set it in a css file instead. Their style can't be seen if you set it beforehand and they are not shown (by display: none) anyway.
$("textarea").focus(function(){
var targetArea = $(this);
targetArea.siblings('div').fadeIn(400).html(targetArea.val());
});
and in CSS:
/* You really want to apply this css to all "td div" for this one! */
td div {
background-color: #E7F1F0;
border: 1px solid #86BBB6;
/* More styles for tooltips, such as display: none; position: relative; etc... */
}

Answer 2

#luiges90 addressed your one issue... and I'll also mention the reason your tooltips are all showing the same value (the value in the first text area on the page) is because your selector $('textarea') is selecting ALL the textareas on the page. When you call .val() on that, by default, it only returns the value of the first element in the collection. So in short, in your focus event just use something like this:
$("textarea").focus(function(){
var $this = $(this);
$this.siblings('div').fadeIn(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"})
.html($this.val());
});

Answer 3

Use a class for your textarea, i.e. myTxtArea and use $(this) like
$("textarea.myTxtArea").focus(function(){
var el=$(this);
el.closest("td").find("div").fadeIn(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"});
el.closest("td").find("div").html(el.val());
});
An Example Here.

Answer 4

This is what I was talking about:
HTML
<table>
<tbody>
<tr>
<td>
<textarea class="editable">This is a texarea.</textarea>
<div class="uneditable"></div>
</td>
</tr>
... More rows ...
<tr>
<td>
<textarea class="editable">This is a texarea.</textarea>
<div class="uneditable"></div>
</td>
</tr>
</tbody>
</table>
jQuery
Note the use of textarea.editable, text.uneditable, $(this).siblings('.uneditable'), and $(this).next('div.uneditable'). The div.uneditable is a little gratuitous here, but I offer it as a demonstration of overselecting (in case there were also a span.uneditable or whatever next in flow with the div.uneditable...).
$(document).ready(function () {
var $editable = $('textarea.editable');
$editable
.focus(focus)
.blur(blur)
.keyup(keyup);
function focus() {
$(this).siblings(".uneditable").fadeIn(400).css({
"background-color": "#E7F1F0",
"border": "1px solid #86BBB6"
})
.html($(this).val());
}
function blur() {
$(this).siblings('.uneditable').fadeOut(400).css({
"background-color": "#E7F1F0",
"border": "1px solid #86BBB6"
});
}
function keyup() {
$(this).next("div.uneditable").html($(this).val());
}
});
http://jsfiddle.net/fuFuT/

Answer 5

The reason why all of them go at the same time, is because you select all of them, $("textarea") returns all matching elements.
To prevent that behaviour, create this (I didn't include the event functions for readability)
// Do things for each matching elements, separately
$("textarea").each(function() {
$(this).focus();
$(this).blur();
$(this).keyup();
});
As for the id / class for the tooltip: it is generally better to keep the CSS external, so in that case, giving the tooltips a CSS class would be better.