Here is some code that I have which converts simple text to a textarea field:
$('.field').on({
mouseenter:
function()
{
title='<?php echo $user_title; ?>';
old_value=$(this).text();
item_id=$(this).attr('id');
item=$(this).parent('td');
height=event.target.offsetHeight;
width=event.target.parentNode.offsetWidth;
new_value=(old_value=='Not translated') ? '' : old_value;
$(this).empty();
var field=(title=='Login') ? "<textarea style='vertical-align: middle; font-family: Helvetica; font-size: 12pt; width: 212px;' id='new_value' name='term'>" + new_value + "</textarea>"
: "<textarea style='vertical-align: middle; font-family: Helvetica; font-size: 12pt; width: 212px;' id='new_value' name='term'>" + new_value + "</textarea><div id='save_button' class='btn btn-primary' href='#'>>></div>";
$(this).html(field);
$("#new_value").height(height);
button_id=item_id.split('/')[0];
button_id=button_id.replace(/([!"#$%&'()*+,./:;<=>?@\[\\\]^`{|}~])/g, "\\$1");
$("#"+button_id).show();
$("#new_value").click(function()
{
if (title=='Login')
window.location.replace('<?php echo $fb_url?>');
});
},
mouseleave:
function()
{
$(this).empty();
$(this).html(old_value);
$("#"+button_id).hide();
alert($(this).html());
}
}
);
Here is the div block for the text:
echo "<td width='250'><div class='field' id='".$record['translate']['label_value']."/".$record['language_id']."'>".
strip_tags($record['translate']['coalesce(loc.language_value)'])."</div>";
Initially, everything was working fine. But now, I need to add an additional div block:
echo "<td width='250'><div class='field' id='".$record['translate']['label_value']."/".$record['language_id']."'><div style='width: 200px;'>".
strip_tags($record['translate']['coalesce(loc.language_value)'])."</div></div>";
After making this change, my code stopped working as expected! It still changes the text to a textarea field, but in the "mouseleave" event, the $(this).empty() function does not work properly. Can someone please help me fix this issue?