Question

Have gleaned much help from this site from reading the various posts over the years but am a bit stuck on this one and cannot seem to find an answer:

I’m displaying/replacing a drop down list which depends on the type of ‘table’ selected (via a radio button)

All works great…until I try to display a list that has been displayed before…i.e. when I click on a radio button twice I cannot get it to redisplay the list. I have also tried loading all the DIV HTML into an array and calling that so it must(?) be something to do with the append?

This is the HTML I am using. (The ‘max@times’ in the HTML is where I replace the list with my dynamically generated content – and creates all the various drop down lists in one shot and does not continually fetch them from the server)

<div id="selectarea"></div>
<div id="tables">
 <div id="tables2"><p><select id="select2" class="tables" name="tables2"><option value="">Please Select</option>" & max2times & "</select></p></div>"
 <div id="tables4"><p><select id="select4" class="tables" name="tables4"><option value="">Please Select</option>" & max4times & "</select></p></div>"
 <div id="tables6"><p><select id="select6" class="tables" name="tables6"><option value="">Please Select</option>" & max6times & "</select></p></div>"
 <div id="tables8"><p><select id="select8" class="tables" name="tables8"><option value="">Please Select</option>" & max8times & "</select></p></div>"
 <div id="continue"><p style="text-align:center;"><input type="button" id="now" value="Continue" name="now"></p></div>
</div>

My JQuery looks like this and does function ok (I was using the alert just to check that it was firing and the correct value was being passed!)

$("input:radio[name=tabletype]").live("click",function() {
                var value = $(this).val();
                alert("Button Click " + value);
                $("#selectarea").html("");
                var tblSel = $("#tables"+value);
                $("#selectarea").append(tblSel);
                });

Any help/ideas would be gratefully received!!!

Thanks,

GS

Answer 1

You should append clone of your div. otherwise same element reference will get appended so new div will be created.

$("input:radio[name=tabletype]").live("click",function() {
                  var value = $(this).val();
                     alert("Button Click " + value);
                      $("#selectarea").html("");
                     var tblSel = $("#tables"+value);
                     $("#selectarea").append(tblSel.clone(true).removeAttr("id"));
                });