Getting ID of a cloned element

Question

I'm using jQuery draggable and droppable. I'm cloning the draggable widget on drop event of droppable.

I want to fetch the ID of the cloned element which will be sent to the the application with the AJAX request. I'm unable to fetch the ID. console.log returns blank string.

var dropElem = ui.draggable.html();
var clone = $(dropElem).clone();
var widgetType = $(clone).attr('id');
$(this).append(clone);

Also, I want to change the ID of the cloned element on the response event of the ajax request. How do I specially change the ID of the cloned event after it has been appended?

Answer 1

I'm not familiar with jQuery's clone method, however HTML documents may not have two of more elements with the same ID. Maybe jQuery strips the id to avoid problems. I'd suggest you use the id of the original and assign the clone some new id.

Answer 2

This is because jQuery's clone() method does not clone the id. To do so would break valid DOM/HTML rules. You need to set the id yourself, eg:

var dropElem = ui.draggable.html();
var clone = $(dropElem).clone();
var widgetType = 'ClonedElementX'; //whatever you want the id to be
clone.attr('id',widgetType);
$(this).append(clone);

Of note is that by default the id will not be sent to the server with a GET or POST (AJAX or standard request). If it is an "input" type element, you will need to also set the "name" attribute as well. If have custom code which sends ids in the AJAX request you can ignore this.