1

I have a dynamic form that can be cloned, using the SheepIt! plugin to clone my form elements. My form has a dynamic set of dropdown boxes, where the second dropdown box display a set of values based on the selection from the first dropdown box.

My problem is that the dynamic function of the dropdown boxes is not functioning on cloned dropdowns, and only works for the first dropdown on the page.

Any ideas why this is happening?

I created a fiddle so you can see how the SheepIt! plugin works, http://jsfiddle.net/DeJch/1/, but the add/delete functions are not working in fiddle.

Do I have to recall the AJAX after the clone is made?

Maybe something like $('#container_add').live('click', function() { */ */ });?

HTML:

<div>
    <label>Item:</label>
    <select class="item" name="item" id="item"> 
        <option value="">Select</option>
        ...
    </select>
</div>          
<div>
    <label class="label>Options:</label>
    <select class="options" name="options" id="options">
        ...
    /select>
</div>

Javascript: 

$(document).ready(function(){   

    var sheepItForm = $('#clone').sheepIt({
        separator: '',
        allowRemoveLast: true,
        allowRemoveCurrent: true,
        allowAdd: true,
        maxFormsCount: 3,
        minFormsCount: 1,
        iniFormsCount: 1
    });

    $(".item").change(function () { 

      var group_id = $(this).val();
      var self = $(this); // Added line

      var $children = $(this).parent().next().children('select.options')

       $.ajax({
            type: "POST", 
            url: "../../db/groups.php?id=" + group_id, 
            dataType: "json",
            success: function(data){    
                $children.empty()
                $children.append('<option value="">Select</option>');           
                $.each(data, function(i, val){    
                   $children.append('<option value="' + val.group_id + '">' + val.name + '</option>');
                });
                $children.focus();
            },
            beforeSend: function(){
                $children.empty();
                $children.append('<option value="">Loading...</option>');
            },
            error: function(){
                $children.attr('disabled', true);
                $children.empty();
                $children.append('<option value="">No Options</option>');
            }
        })  

    }); 

})
Michael
  • 2,276
  • 15
  • 49
  • 80

2 Answers2

2

Even though you have accepted your answer I thought that I would mention that the SheepIt! plugin provides the following callbacks: beforeClone, afterClone, beforeAdd, afterAdd.

If you specify the afterAdd callback in your options, you can bind additional functionality to the newly created cloned forms.

myCustomSheepitOptions = {
    separator:'',
    allowRemoveLast:false,
    allowRemoveCurrent:true,
    allowRemoveAll:true,
    allowAdd:true,
    allowAddN:false,
    maxFormsCount:10,
    minFormsCount:1,
    iniFormsCount:1,
    afterAdd:function (data) {
        initializeAutotab($('input.autotab', data));
        initializeDatePicker(data);
    }
};

The upside is that the data that is passed to afterAdd is just the new form you created.

The downside to this approach is that if you are using nested forms, you must specify the same afterAdd to the nested options.

Regardless, this is an alternative to using live/on.

edit: also note that you want to use afterAdd instead of afterClone because afterClone seems to be before the content is actually added to the DOM.

jgrowl
  • 2,117
  • 2
  • 17
  • 23
0

Do I have to recall the AJAX after the clone is made?

Maybe something like $('#container_add').live('click', function() { */ */ });?

Pretty much yes, but don't use .live() event as it is now deprecated. Use the on() event instead. Syntax is pretty much the same

$('#container_add').on('click', function() { */ */ });

The on event is much similar to live. Take a look at http://api.jquery.com/live/

Sean H Jenkins
  • 1,770
  • 3
  • 21
  • 29