I'm having a serious trouble with attaching droppable functionality to dynamically created elements.! I cannot bind droppable when the item is created since there is an ajax call going when the a certain element is dropped! how can I bind the droppable functionality to dynamic elements!
Please respond!
The droppable function :
$('.bill-item-list').droppable({
accept: '.item',
drop: function( event, ui ) {
var clone = bill.clone();
var droppable = $(this);
var jsonObject = 'itemId=' + ui.draggable.attr('id') + '&billId=' + $(this).parent().attr('id');
$.ajax({
url: "/addItemToBill",
type: "POST",
data: jsonObject,
dataType: "json",
beforeSend: function(x) {
if(x && x.overrideMimeType) {
x.overrideMimeType("application/json;charset=UTF-8");
}
},
success: function(result){
if(result.status = true){
clone.find('.bill-item-name-left').html(ui.draggable.find('.item-name').children('h4').html());
clone.find('.bill-item-name-right').html(ui.draggable.find('.item-price').children('h4').html());
clone.find('.bill-item-price').html(ui.draggable.find('.item-price').children('h4').html() + ".00 USD" );
clone.find('.bill-item-amount').html("1");
if(droppable.height() > 300){
droppable.css('overflow-y','scroll');
droppable.css('height', '320px')
}
clone.draggable({
revert : true,
zIndex: 1,
containment: "window",
opacity: 0.5,
cursor: "move",
helper: function() { return $(this).clone().appendTo('body').show(); }
});
clone.insertBefore(droppable.find('.item-drop-point')).hide().fadeIn("slow");
}
}
});
}
});
And the dynamic element creation
function getBillInformation(Status,billingDate,User){
var parent = "";
var status = "";
switch(Status){
case "OPEN":
parent = $('#tab-1');
status = "O";
break;
case "SETTLED":
parent = $('#tab-2');
status = "S";
break;
case "CANCEL":
parent = $('#tab-3');
status = "C";
break;
}
var billList = parent.find('#bill-list').first();
var bill = parent.find('.bill').first();
var billItemList = parent.find('.bill-item-list').first();
var billItem = parent.find('.bill-item').first();
var billPanel = parent.find('#bill-panel').first();
var jsonObject = "billStatus=" + status + "&billingDate=" + billingDate + "&user=" + User;
ajaxCall("/getBillingInformation","POST",jsonObject,function(response){
billPanel.empty();
billItemList.find('.bill-item').each(function(){
$(this).remove();
})
for(var i = 0; i < response.bills.length; i++){
var clone = bill.clone();
clone.attr('id', response.bills[i].billId);
clone.find('.bill-number').html(response.bills[i].billNo);
clone.find('.amount').html(response.bills[i].billTotal + " USD");
clone.find('.room-number').html(response.bills[i].roomNo);
clone.find('.table-name').html(response.bills[i].tableNo);
if(response.bills[i].itemsList.length != 0){
for(var j = 0; j < response.bills[i].itemsList.length; j++){
var billItemClone = billItem.clone();
billItemClone.find('.bill-item-name-right').html(response.bills[i].itemsList[j].amount);
billItemClone.find('.bill-item-amount').html(response.bills[i].itemsList[j].qty);
var total = (response.bills[i].itemsList[j].amount) * (response.bills[i].itemsList[j].qty);
billItemClone.find('.bill-item-price').html(total + ".00 USD");
billItemClone.draggable({
revert : true,
zIndex: 1,
containment: "window",
opacity: 0.5,
cursor: "move",
helper: function() { return $(this).clone().appendTo('body').show(); }
});
clone.find('.bill-item-list').prepend(billItemClone);
}
}
billPanel.prepend(clone);
}
});
}
I'm having a serious trouble with attaching droppable functionality to dynamically created elements.! I cannot bind droppable when the item is created since there is an ajax call going when the a certain element is dropped! how can I bind the droppable functionality to dynamic elements!
Please respond!
The droppable function :
$('.bill-item-list').droppable({
accept: '.item',
drop: function( event, ui ) {
var clone = bill.clone();
var droppable = $(this);
var jsonObject = 'itemId=' + ui.draggable.attr('id') + '&billId=' + $(this).parent().attr('id');
$.ajax({
url: "/addItemToBill",
type: "POST",
data: jsonObject,
dataType: "json",
beforeSend: function(x) {
if(x && x.overrideMimeType) {
x.overrideMimeType("application/json;charset=UTF-8");
}
},
success: function(result){
if(result.status = true){
clone.find('.bill-item-name-left').html(ui.draggable.find('.item-name').children('h4').html());
clone.find('.bill-item-name-right').html(ui.draggable.find('.item-price').children('h4').html());
clone.find('.bill-item-price').html(ui.draggable.find('.item-price').children('h4').html() + ".00 USD" );
clone.find('.bill-item-amount').html("1");
if(droppable.height() > 300){
droppable.css('overflow-y','scroll');
droppable.css('height', '320px')
}
clone.draggable({
revert : true,
zIndex: 1,
containment: "window",
opacity: 0.5,
cursor: "move",
helper: function() { return $(this).clone().appendTo('body').show(); }
});
clone.insertBefore(droppable.find('.item-drop-point')).hide().fadeIn("slow");
}
}
});
}
});
And the dynamic element creation
function getBillInformation(Status,billingDate,User){
var parent = "";
var status = "";
switch(Status){
case "OPEN":
parent = $('#tab-1');
status = "O";
break;
case "SETTLED":
parent = $('#tab-2');
status = "S";
break;
case "CANCEL":
parent = $('#tab-3');
status = "C";
break;
}
var billList = parent.find('#bill-list').first();
var bill = parent.find('.bill').first();
var billItemList = parent.find('.bill-item-list').first();
var billItem = parent.find('.bill-item').first();
var billPanel = parent.find('#bill-panel').first();
var jsonObject = "billStatus=" + status + "&billingDate=" + billingDate + "&user=" + User;
ajaxCall("/getBillingInformation","POST",jsonObject,function(response){
billPanel.empty();
billItemList.find('.bill-item').each(function(){
$(this).remove();
})
for(var i = 0; i < response.bills.length; i++){
var clone = bill.clone();
clone.attr('id', response.bills[i].billId);
clone.find('.bill-number').html(response.bills[i].billNo);
clone.find('.amount').html(response.bills[i].billTotal + " USD");
clone.find('.room-number').html(response.bills[i].roomNo);
clone.find('.table-name').html(response.bills[i].tableNo);
if(response.bills[i].itemsList.length != 0){
for(var j = 0; j < response.bills[i].itemsList.length; j++){
var billItemClone = billItem.clone();
billItemClone.find('.bill-item-name-right').html(response.bills[i].itemsList[j].amount);
billItemClone.find('.bill-item-amount').html(response.bills[i].itemsList[j].qty);
var total = (response.bills[i].itemsList[j].amount) * (response.bills[i].itemsList[j].qty);
billItemClone.find('.bill-item-price').html(total + ".00 USD");
billItemClone.draggable({
revert : true,
zIndex: 1,
containment: "window",
opacity: 0.5,
cursor: "move",
helper: function() { return $(this).clone().appendTo('body').show(); }
});
clone.find('.bill-item-list').prepend(billItemClone);
}
}
billPanel.prepend(clone);
}
});
}
- Show some relevant code. – Adil Shaikh Commented May 9, 2013 at 6:10
- I updated the question with code! – Imesh Chandrasiri Commented May 9, 2013 at 6:22
1 Answer
Reset to default 7Once the elements are added to the dom, you need to initialize droppable widget on them.
Create a function which will turn bill-item-list into droppable
function billItemDroppable(els){
els.droppable({
accept: '.item',
drop: function( event, ui ) {
var clone = bill.clone();
var droppable = $(this);
var jsonObject = 'itemId=' + ui.draggable.attr('id') + '&billId=' + $(this).parent().attr('id');
$.ajax({
url: "/addItemToBill",
type: "POST",
data: jsonObject,
dataType: "json",
beforeSend: function(x) {
if(x && x.overrideMimeType) {
x.overrideMimeType("application/json;charset=UTF-8");
}
},
success: function(result){
if(result.status = true){
clone.find('.bill-item-name-left').html(ui.draggable.find('.item-name').children('h4').html());
clone.find('.bill-item-name-right').html(ui.draggable.find('.item-price').children('h4').html());
clone.find('.bill-item-price').html(ui.draggable.find('.item-price').children('h4').html() + ".00 USD" );
clone.find('.bill-item-amount').html("1");
if(droppable.height() > 300){
droppable.css('overflow-y','scroll');
droppable.css('height', '320px')
}
clone.draggable({
revert : true,
zIndex: 1,
containment: "window",
opacity: 0.5,
cursor: "move",
helper: function() { return $(this).clone().appendTo('body').show(); }
});
clone.insertBefore(droppable.find('.item-drop-point')).hide().fadeIn("slow");
}
}
});
}
});
}
Then call
billItemDroppable($('.bill-item-list'))
Then once the dynamic items are created
billPanel.prepend(clone);
billItemDroppable(clone.find('.bill-item-list'))