Dynamically creating ddl and ajax

[raymond_feliciano]

I am very new to ajax and just started to learn jquery also so I hope someone can help me out. I have a form with two ddls and a text box. The first ddl has an ajax call which populates the second ddl depending on user input and it works fine.

I also have a button which allows users to add more sets of ddls and text box should they need them. The issue is if the form is displaying two sets of ddls and the user chooses from the first ddl in the first set I only want it to populate the second ddl within that set but, instead it populates all the second ddl in every set. Here is my ajax call and my button functions

//Ajax call
$(document).ready(function() {
    $(".prescriptions").change(function()	{
        var id=$(this).val();
        var dataString = 'prescription='+id;
        $.ajax ({
type: "POST",
url: "<?php echo base_url(); ?>index.php/patients/dynamic_ddl",
data: dataString,
cache: false,
success: function(html){
    $(".dosage").html(html);
               } 
        });
});

//Add ddl button 
$('#btnAdd').click(function() {
    var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have                 
    var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added                   

    // create the new element via clone(), and manipulate it's ID using newNum value                 
    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);                   

    // manipulate the name/id values of the input inside the new element                 
    newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);                   

    // insert the new element after the last "duplicatable" input field                 
    $('#input' + num).after(newElem);       

    // enable the "remove" button                 
    $('#btnDel').removeAttr('disabled');                   

    // business rule: you can only add 5 names                 
    if (newNum == 10) $('#btnAdd').attr('disabled','disabled');             

});               

$('#btnDel').click(function() {                 
    var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have                 
    $('#input' + num).remove(); // remove the last element                   

     // enable the "add" button                 
     $('#btnAdd').removeAttr('disabled',''); 

    // if only one element remains, disable the "remove" button                 
    if (num-1 == 1) $('#btnDel').attr('disabled','disabled');             
});               

$('#btnDel').attr('disabled','disabled');
});

 

And here is my html markup with my php

<tr id="input1" class="clonedInput">
    <td><label for="prescriptions">Prescriptions Taken</label></td>
    <td width="5%">
        <select class="prescriptions" name="prescriptions">
<option selected="selected">--Select Prescription--</option>
               <?php foreach ($prescriptions_sel as $option):?>
               <option value="<?php echo $option['prescription']; ?>"><?php echo $option['prescription'];?></option>
               <?php endforeach ?>
         </select>
     </td>
     <td>
        Dosage: 
       <select name="dosage" class="dosage">
           <option selected="selected">--Select Dosage--</option>
        </select>
        Add Dosage: <input type="text" name="new_dosage" value="" />
     </td>
</tr>

 

I know the problem is in the naming conventions for the drop down list since they are not change when they are added dynamically they just keep the name of the cloned elements. What do I need to do to get this to work correctly any help is appreciated

[raymond_feliciano]

Ok I made some major changes to my code and shortened it a bit and was able to give each of my dynamic elements unique names. I accomplished this by not cloning the ddl, instead append a new ddl with the unique name. Here is my revised code.

$(document).ready(function() {
   var i = i = $('.clonedInput').length;
   var count = 2;
   $('#prescriptions'+i).change(function() {
      alert(i);
      var value = $(this).val();
      var dataString = 'prescription='+value;
      $.ajax ({
         type: 'POST',
         url: '<?php echo base_url(); ?>index.php/patients/dynamic_ddl',
         data: dataString,
         cache: false,
         success: function(html)	{
            $('#dosage'+i).html(html);
         } 
      });
   });

   $(function(){ 
      $('#btnAdd').click(function(){ 			
         $('#page_properties').append('<tr id="input'+count+'" class="clonedInput">'+
                                        '<td><label for="prescriptions'+count+'">Prescription</label></td>'+
                                        '<td><select id="prescriptions'+count+'" class="prescriptions" name="prescriptions'+count+'">'+
                                        '<option selected="selected">--Select Prescription--</option>'+
                                        '<?php foreach ($prescriptions_sel as $option):?>'+
                                        '<option value="<?php echo $option['prescription']; ?>"><?php echo $option['prescription'];?></option>'+
                                        '<?php endforeach ?></select></td>'+
                                        '<td>Dosage: <select id="dosage'+count+'" name="dosage'+count+'" class="dosage">'+
                                        '<option selected="selected">--Select Dosage--</option>'+
                                        '</select>'+
                                        'Add Dosage: <input type="text" name="new_dosage'+count+'" value="" /></td></tr>');
         
         $('#btnDel').removeAttr('disabled');
         count++;
         i++;
      });
   }); 


   $('#btnDel').click(function() {                 
      var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have                 
      $('#input' + num).remove(); // remove the last element                   

      // enable the "add" button                 
      $('#btnAdd').removeAttr('disabled'); 

      // if only one element remains, disable the "remove" button                 
      if (num-1 == 1) $('#btnDel').attr('disabled','disabled'); 
      count--;
      i--;
   });
   $('#btnDel').attr('disabled','disabled');
});

 

The code I need help with is the first function(ajax part of it). What this code does right now is when the page loads I can select from the first ddl from the first set of ddl and it will populate the second ddl in the first set with the correct values. If I click the add button the second function appends the new set of ddl, now if I select an option from the first(newly appended) ddl in the second(newly appended) set of ddl it will not populate the second ddl(newly appended) with any values but, if I choose an option from the original ddl(first set) the the new ddl does get populated. I hope you guys understand what it is that I am trying to explain here it's just that I am fairly new to the technique and language so I am not so great with the techie talk. I just need to know what I have to change/add to my ajax call function in order to target the ddl which is being changed.

[raymond_feliciano]

never mind i got it working by using the .live function.