CODEWITHSUNDEEP
javascripthtmljquery-ui
chaypotato
chaypotato

Reputation: 33

Giving unique ID's to cloned elements

I have draggable items that can be cloned. I wanted each clone to be unique so each of them can be inserted into our database (with coordinates, which will be done later on).

 $(document).ready(function() {
    cntb1 = 0;
    cntb2 = 0;
    cntb3 = 0;
 $(".droppable").droppable({
    accept: '#b1, #b2, #b3',        
        drop: function(event, ui) {
        if(ui.draggable.attr('id')=='b1'){
                cntb1++;    //counts clones
                $(this).append($(ui.helper).clone());               
                $(".droppable .drag").addClass("component");
                $(".component").removeClass("drag");
                $(".component").resizable({aspectRatio: 'true' }).parent().draggable({ //parent() -> both draggable & resizable work
                        containment: '.droppable', //cursor: 'move', grid: [3,3]                        
                }).attr('id', 'b1c'+cntb1); //change id
                $("#status1").append('b1c'+cntb1);
            }
        else if(ui.draggable.attr('id')=='b2'){
                cntb2++;    //counts clones
                $(this).append($(ui.helper).clone());               
                $(".droppable .drag").addClass("component");
                $(".component").removeClass("drag");
                $(".component").resizable({aspectRatio: 'true' }).parent().draggable({ //parent() -> both draggable & resizable work
                        containment: '.droppable', //cursor: 'move', grid: [3,3]                        
                }).attr('id', 'b2c'+cntb2); //change id
                $("#status2").append('b2c'+cntb2);
            }
        else if(ui.draggable.attr('id')=='b3'){
                cntb3++;    //counts clones
                $(this).append($(ui.helper).clone());               
                $(".droppable .drag").addClass("component");
                $(".component").removeClass("drag");
                $(".component").resizable({aspectRatio: 'true' }).parent().draggable({ //parent() -> both draggable & resizable work
                        containment: '.droppable', //cursor: 'move', grid: [3,3]                        
                }).attr('id', 'b3c'+cntb3); //change id
                $("#status3").append('b3c'+cntb3);
            }

    }
}); 

$(".drag").draggable({ 
            helper:'clone', 
            appendTo: 'body', //para maka drag padung gawas sa accordion
            cursor: 'move' 
            });
$( "#accordion" ).accordion({                   
            autoHeight: false,                  
            collapsible: true,
            active: false
});
});

But the problem is that whenever i create a new clone the ID of the old clone gets replaced with the ID of the new one. I tested it by styling ID's like this:

        #b1c3{ background:#00FF00; }
        #b1c2{ background:#CCFF00; }

My HTML is like this btw:

    <div id="accordion">
 <h3><a href="#">Buttons</a></h3>   
     <div class="div-table">         
        <div class="div-table-row">
        <div class="div-table-col"><img src="button_final/button_1.gif" id="b1" class="drag"/></div>
        <div class="div-table-col"><img src="button_final/button_2.gif" id="b2" class="drag"/></div>
        <div class="div-table-col"><img src="button_final/button_3.gif" id="b3" class="drag"/></div>
        </div>
          </div>
</div>
<div id="frame" style="border:dotted; height:500px; width:60%; float:left" class="droppable">
<h3 id="status1" style="height:30%;"></h3>
<h3 id="status2" style="height:30%;"></h3>
<h3 id="status3" style="height:30%;"></h3></div>

ps. I assembled everything with the help of people here. I owe you my life!

Upvotes: 2

Views: 2925

Answers (5)

chaypotato
chaypotato

Reputation: 33

thanks everyone for helping! I'm confused as to what I was trying to do in the first place. But anyway if someone else wanted to do this, this might help:

$(".droppable .drag").addClass("component").attr('id', 'b1c'+cntb1); /*basin if ako e change ang id diri */

$("#b1c"+cntb1).removeClass("drag"); //nya ang id name ako e call instead na ang class

$("#b1c"+cntb1).resizable({aspectRatio: 'true' }).parent().draggable({ containment: '.droppable' });

This worked for me. Thank you @Mehul Hingu for the idea. :)

Upvotes: 0

Mehul Hingu
Mehul Hingu

Reputation: 1240

This should work for sure,the change is that u have to assign an id at the time of appending it to droppable,previously u were assigning id to all the elements with component class which is wrong in your case. so the only change will be :

 $(this).append($(ui.helper).clone().attr("id",'b1c'+cntb1));

Upvotes: 2

Mehul Hingu
Mehul Hingu

Reputation: 1240

Here is the solution to your problem ,solution is to assign the id to component before making it resizable.

  $(".component").removeClass("drag").attr('id', 'b1c'+cntb1);
                    $(".component").resizable({aspectRatio: 'true' }).parent().draggable({ //parent() -> both draggable & resizable work
                            containment: '.droppable', //cursor: 'move', grid: [3,3]                        
                    });

Upvotes: 0

jfriend00
jfriend00

Reputation: 707218

The best way to solve this would be to not use ids in the cloned elements, to only use class names. You can use an id on the one parent object if you need to, but keeping ids out of the things that are actually cloned will keep you from having to fix the ids in the cloned elements.

We could help further with fixing the id if you showed us the actual HTML that you are cloning so we know what id values need to be fixed.

Upvotes: 2

epascarello
epascarello

Reputation: 207501

You are selecting everything with the class $(".component") and not just the newly added/cloned element.

You need to limit it to just that one.

One thing you can do is instead of appending the elemtn and finding it, you can store a reference to it

//$(this).append($(ui.helper).clone()); 
var newClone = $(ui.helper).clone();
$(this).append(newClone); 
//than you can manipulate newClone to add/remove classes. Use find(), etc

Upvotes: 0

Related Questions