Have Geek Brain

Getting the ID of the cloned item

I am using jQuery draggable and droppable. I am cloning a drop widget on the drop of droppable event.

I want to get the ID of the cloned element that will be sent to the application using an AJAX request. I cannot get the ID. console.log returns an empty 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 in the response to the ajax request. How can I specifically change the ID of the cloned event after adding it?

+2


a source to share


2 answers


This is because the jQuery method clone()

does not clone the ID. This would violate valid DOM / HTML rules. You need to set the id yourself, for example:

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);


It should be noted that by default the ID will not be sent to the server with GET or POST (AJAX or standard request). If it is an "input" element, you will also need to set the "name" attribute. If you have custom code that sends IDs in an AJAX request, you can ignore that.

+5


a source


I am not familiar with jQuery's cloning method, however, HTML documents may not have two elements with the same ID. Perhaps jQuery is splitting the ID to avoid problems. I would suggest that you use the original id and assign a new id to the clone.



+2


a source






More articles:


All Articles