Question

I have all this code. Everything works except for the call to the XML data. I don’t know why. I have a suspicion it’s because of the selector, but I’ve tried everything I think would work.

function addPart() {
  var pn = document.getElementById("pn").value;
  $(this.parentNode).prepend("<div id='part" + pn + "' class='show'><select id='pselect" + pn + "'></select></div>");
  $("pselect" + pn).append(function(){
    $.ajax({
      type: "GET",
      url: "test.xml",
      dataType: "xml",
      success: function(xml) {
        $(xml).find('value').each(function(){
          var value = $(this).text();
          $("#pselect" + pn).append("<option value='" + value + "'>" + value + "</option>");
        });
      }
    });
  });
  $("#part" + pn).append("<span style='font-weight: bold;'>  QTY:  </span><input name='QTY' type='text' style='width: 20px;'>&nbsp; &nbsp;<a href='#' onClick='removeItem(\"#part" + pn + "\")'>Remove</a><p> </p>");
  pn = (pn - 1) + 2;
  document.getElementById("pn").value = pn;
}

function removePart(id) {
  $(id).remove();
}

The XML looks like this:

<?xml version="1.0" encoding="iso-8859-1" ?> 
<test>
  <value>Text1</value>
  <value>Text2</value>
  <value>Text3</value>  
</test>

Answer 1

It looks like there are two issues in the code you provided. The variable pn was used both as an integer and as a string causing some confusion. Also the ajax occured within a duplicate append?

        function addPart() {
            var pn = $("#pn").val();
            var textpn=pn;
            $("pselect + textpn).prepend("<div id='part" + textpn + "' class='show'><select id='pselect" + textpn + "'></select></div>");
            //$("pselect" + pn).append(function(){
                $.ajax({
                    type: "GET",
                    url: "test.xml",
                    dataType: "xml",
                    success: function(xml) {
                        $(xml).find('value').each(function(){
                            var value = $(this).text();
                            $("#pselect" + textpn).append("<option value='" + value + "'>" + value + "</option>");
                        });
                    }
                });
            //});
            $("#part" + textpn).append("<span style='font-weight: bold;'>  QTY:  </span><input name='QTY' type='text' style='width: 20px;'>&nbsp; &nbsp;<a href='#' onClick='removeItem(\"#part" + textpn + "\")'>Remove</a><p> </p>");
            pn++;
            $("#pn").val(pn)
        }

        function removePart(id) {
          $(id).remove();
        }