ReeseB ReeseB - 19 days ago 11
jQuery Question

Jquery add text between a href tags of td

I have a table of links, these links can be deleted from the table and I can drag and drop the table rows into another div. Once dropped into the div, I disable the table row so it cannot be dragged again and I also remove the link that allows the row from being deleted from the table.

This all works fine. Once in the dropped div, I add a link (font awesome X icon) which allows the item/row to be deleted from the dropped area.

So when the delete link is clicked in the dropped area, the row is deleted and the coorresponding row in the main table is enabled for dragging again.

This all works fine. The only part that is not working is adding back the link to the row in the table. When I initially drag the row from the main table the font awesome icon (fa-times) is removed from the table row, then when the row is deleted from the dropped area, I try to add the icon back to the main table row but no good.

HTML

<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr class="bb">
<th class="artcl_hdr text-center"></th>
<th class="artcl_hdr text-center">Source</th>
<th class="artcl_hdr text-center">Title</th>
<th class="artcl_hdr text-center">Publish Date</th>
<th class="artcl_hdr text-center">Share</th>
</tr>
</thead>
<tbody>
<?php
if(is_array($bookmarks))
{
echo '<tr class="bmkitem" id="'.$bookmark['aid'].'">';
echo '<td class="text-center bkgcol-white"><a href="#" title="Delete bookmark" id="bkm_delete"><i class="fa fa-times fa-lg pomegranate" aria-hidden="true"></i></a></td>';
echo '<td class="text-center"><span id="article_source" class="label '.$label.'">'.$bookmark['name'].'</span></td>';
echo '<td class="bkm-title text-left"><a href="'.$bookmark['link'].'" target="_blank" id="bookmark-link">'.$bookmark['title'].'</a></td>';
echo '<td class="key-title text-center">'.$formatted_date.'</td>';
echo '<td class="artcl_info text-left"><div class="add-this addthis_native_toolbox" data-url="'.$bookmark['link'].'" data-title="'.$bookmark['title'].'"></div></td>';
echo '</tr>';
}
}
?>
</tbody>
</table>
</div>

</div>
<div class="panel-body text-left" id="bkm-dropbox">
<div class="text-center">
<p class="temp-text">Drag Bookmarks Here</p>
</div>
</div>


JQUERY

$(document).ready(function() {

$(".bmkitem").draggable({
helper: "clone",
containment: "document",
cursor: 'move',
revert: 'true',
start: function(event, ui) {
source = $(this).find('#article_source').text()
contents = $(this).find('#bookmark-link').text();
}
});

$('#bkm-dropbox').droppable({
hoverClass: 'hover',
acceptable: '.bmkitem',
containment: 'document',

out: function (event, ui) {
var self = ui;
ui.helper.off('mouseup').on('mouseup', function () {
$(this).remove();
self.draggable.remove();
});
},

drop: function(event, ui) {
$(this).find(".temp-text").remove();

$(this).append('<span><a href="Javascript:void(0)"" id="drop_delete"><i class="fa fa-times fa-lg pomegranate left_pad_push" aria-hidden="true"></i></a>' + source + ' - ' + contents + '</span><br />');
ui.draggable.draggable("disable");
ui.draggable.find("i").remove();

$('#drop_delete').on('click', function () {
$(this).parent('span').remove();
ui.draggable.draggable("enable");
ui.draggable.find("td#bmk_delete").text('<i class="fa fa-times fa-lg pomegranate" aria-hidden="true"></i>');
});
}
});


});

Answer

Resolved, thanks MelanciaUK.

$(document).ready(function() {

$(".bmkitem").draggable({
        helper: "clone",
        containment: "document",
        cursor: 'move',
        revert: 'true',
        start: function(event, ui) {
            source = $(this).find('#article_source').text()
            contents = $(this).find('#bookmark-link').text();
        }
});

$('#bkm-dropbox').droppable({
    hoverClass: 'hover',
    acceptable: '.bmkitem',
    containment: 'document',

    out: function (event, ui) {
        var self = ui;
        ui.helper.off('mouseup').on('mouseup', function () {
            $(this).remove();
            self.draggable.remove();
        });
    },

    drop: function(event, ui) {
        $(this).find(".temp-text").remove();

        $(this).append('<span><a href="Javascript:void(0)"" id="drop_delete"><i class="fa fa-times fa-lg pomegranate left_pad_push" aria-hidden="true"></i></a>' + source + ' - ' + contents + '</span><br />');

        ui.draggable.draggable("disable");
        selected_row = ui.draggable.find("i").hide();

        $('#drop_delete').on('click', function () {
            $(this).parent('span').remove();
            ui.draggable.draggable("enable");
            selected_row.show();
        });
    }
});

});