Nitish Kumar Nitish Kumar - 4 months ago 11
jQuery Question

How to append or add html code to a draggable element in the drop area in Jquery

I'm having a normal html section where I'm dropping some html code. I need them to append after the class

.page-content-wrapper
if there is no item and if there is item I want to append the html code below the very last element and each element is sortable. I'm getting the html code to be appended through ajax in JSON format, while taking it to console.log I get:

Object {htmlcode: "<div>//html code....</div>"}


I want to append to the div with class
.page-content-wrapper
. Following is my JQuery:

var origin= 'sortable';
var nitsbuilder = {
nits_id: $('[data-nitsid]'),
editarea: $('.page-content-wrapper')
};

nitsbuilder.dropeventhandler = function ($item) {
var nits_id = $item.data('nitsid');
$.ajax({
method: 'POST',
url: dropurl,
data: { nits_id: nits_id, _token: token},
dataType: 'json',
success: function (data) {
console.log(data);
nitsbuilder.editarea.html(data);
}
});
}

nitsbuilder.init = function () {
var navmenu= $('ul.nitseditormenu').find('li').find('ul').find('li');
navmenu.draggable({
connectToSortable: "nitsbuilder.editarea",
helper: "clone",
cursor: "move",
start: function () {
origin = 'draggable';
}
});

nitsbuilder.editarea.droppable({
drop: function (event, ui) {
nitsbuilder.dropeventhandler(ui.draggable);
}
}).sortable({
revert: true
});
}();

Answer

I'm getting the html code to be appended through ajax in JSON format, while taking it to console.log I get:

Object {htmlcode: "<div>//html code....</div>"}

Try substituting data.htmlcode for data at nitsbuilder.editarea.html(data.htmlcode)

Comments