CODEWITHSUNDEEP
jqueryjquery-ui
dsignr
dsignr

Reputation: 2354

Jquery function loops without a loop!

so I have built my own drag and drop shopping cart(very basic) using Jquery UI and Jquery. The function as of now is this - Drag an element on to the "Add items here" and they get appended. A modal window will open allowing you to edit the Item's name. And its when you add two or more items, this problem occurs, the name you set for the current element gets replaced for all the three items that you have added. It seems to me that its kind of looping?

Here's the link to the full code. http://jsbin.com/egosi4/2

Any help at this point is much much appreciated. Thank you.

Upvotes: 1

Views: 187

Answers (1)

Quincy
Quincy

Reputation: 4433

You should not put the change() and click() event in a recallable function as each time you call change() and click(), it will register one more function to the event and that's what the loops u were seeing.

I tried to edit your script and pass the id to the events using the data() function. (And I have removed your alert())

demo here http://jsfiddle.net/42gAn/

full code

    $(function() {
    //Draggable element events
    $( "#catalog li" ).draggable({
      appendTo: "body",
      helper: "clone"
    });
    //---------------------------------
    //Function to generate a unique ID
    var generateuniqueid = function(id){
    unique_id="element"+id;
    return unique_id;
    }
    //---------------------------------
    //function to get content from user - MODAL DIALOG
    var fillcontent = function(id,content){
    //Open up lightbox
      $( "#box:ui-dialog" ).dialog( "destroy" );
      $( "#box" ).dialog({
      height: 140,
      modal: true
      });

      //var id='#'+id;
      $("input.thecontent").data("id",id);

    }
     $("input.thecontent").change(function(){
    var id='#'+ $("input.thecontent").data("id");    
    var usercontent = $("input.thecontent").val();
    $(id).text(usercontent);
    });
    $( ".closemodal" ).click(function() {
    closemodal();
    //id=null;

    });
    //Flush the ID    
    //---------------------------------
    var closemodal=function(){
      $( "#box" ).dialog("close");      
    }
    //---------------------------------
        //---------------------------------
    //Declare the ID to start incrementing from
    universal_id=1;
    //---------------------------------
    $( "#cart div" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function( event, ui ) {
        $( this ).find( ".placeholder" ).remove();
        //Generate unique id
        unique_id=generateuniqueid(universal_id);
        $( "<div></div>" ).html(ui.draggable.html()).appendTo( this ).attr('id', unique_id).attr('class', 'rmg');
        //Get the Content from user and fill it up  
        //unique_id="#"+unique_id;        
        inputcontent=fillcontent(unique_id,'Empty');
        universal_id++;
        unique_id=null;
      }
    }).sortable({
      items: "div:not(.placeholder)",
      sort: function() {
        $( ".rmg" ).dblclick(function() {
        var theid=$(this).attr('id');
        var content=$(this).text();
        fillcontent(theid,content);
        });
        // gets added unintentionally by droppable interacting with sortable
        // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
        //$( this ).removeClass( "ui-state-default" );
      }
    });
  });

Upvotes: 2

Related Questions