jquery, html5, css

Below codes are working except I am not able to get loop listing  like below. My goal is to just html append to <div>
so the web page will show the UI and our end user can enter information.


 <div class="col-lg-12">
            <Input Type="text" Name="licenseNo" ID="additionalInfo_licenseNo" Onchange="fnSaveSingleData('licenseNo','1')" Placeholder="Enter License No." Class="form-control" Title="License is required!" PrefillValue="No" Required="" />
          </div>



<script> 
function fnGetBondAdditionalInformation() {
    $.ajax({
        url: "http://localhost:5489/BondList.xml",
        success: function (xml) {
            parseSelectXMLBondAdditionalInformation(xml, "test", localStorage.getItem('bondState'), localStorage.getItem('bondName'))
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Status: " + xhr.status);
            alert("Error: " + thrownError);
        }
    });
}
function parseSelectXMLBondAdditionalInformation(xml, selectid, bondState, bondName) {
    var html = "";
    var htmlOption = "";
    var additionalInfo = "";
    var selectedBondName = "";
    $('#' + selectid).prop("disabled", false);
    $(xml).find('Bond').each(function (i, e) {
        {
            if (bondState == $(e).find('GeneralInformation').find('State').text() && bondName == $(e).find('GeneralInformation').find('Name').text()) {
                selectedBondName = $(e).find('GeneralInformation').find('Name').text();
                additionalInformation = $(e).find('AdditionalInformation').find('div').text();
                $('#test').append(selectedBondName + " " + additionalInformation).html();
            }
        }
    });
    alert(selectedBondName);
}
window.onload = function () {
    fnGetBondAdditionalInformation();
}; 
</script>

<div id="test"></div>

<Surety>
  <SuretyLine>
    <Commercial>
      <Bond>
        <GeneralInformation UI="BondInfo">
          <Name ID="bondName" PrefillValue="Yes">Contractor License Bond</Name>
          <State ID="bondState" PrefillValue="Yes">CA</State>                     
        </GeneralInformation>       
        <AddtionalInformation>
          <div class="col-lg-12">
            <Input Type="text" Name="licenseNo" ID="additionalInfo_licenseNo" Onchange="fnSaveSingleData('licenseNo','1')" Placeholder="Enter License No." Class="form-control" Title="License is required!" PrefillValue="No" Required="" />
          </div>
          <div class="col-lg-12">
            <Input Type="text" Name="licenseNo" ID="additionalInfo_licenseNo2" Onchange="fnSaveSingleData('licenseNo2','1')" Placeholder="Enter License No." Class="form-control" Title="License is required!" PrefillValue="No"Required=""/>
          </div>
        </AddtionalInformation>     
      </Bond>  
      <Bond>
        <GeneralInformation UI="BondInfo">
          <Name ID="bondName" PrefillValue="Yes">Contractor License Bond</Name>
          <State ID="bondState" PrefillValue="Yes">FL</State> 
        </GeneralInformation>                   
        <AddtionalInformation>
          <div class="col-lg-12">
            <Input Type="text" Name="additionalInfo_licenseNo" ID="additionalInfo_licenseNo" Onchange="fnSaveSingleData(this.name,'1')" Placeholder="Enter License No." Class="form-control" Title="License is required!" PrefillValue="No" Required="" />
          </div>
        </AddtionalInformation>
   </Bond>        
  </Commercial>
  </SuretyLine>
</Surety>

Open in new window

LVL 1
ITsolutionWizardAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ITsolutionWizardAuthor Commented:
any helps?
0
ITsolutionWizardAuthor Commented:
any helps?
0
ITsolutionWizardAuthor Commented:
Any helps?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Göran AnderssonCommented:
There are three problems with the code.

It's looking for an "AdditionalInformation" element in the XML, but the element is named "AddtionalInformation".
The text() method doesn't get the HTML code from the XML, it only gets the actual text from the HTML code. As there is no text but only an input element, the result will be an empty string.
You are getting the element, then looking for a div inside it. That means that you get only the input element, also that you only get the first input element.

Use this to get the HTML code from the XML:
additionalInformation = $(e).find('AddtionalInformation').html();

Open in new window

0
ITsolutionWizardAuthor Commented:
It does not work. Can you try to combine your codes and my codes?
0
Göran AnderssonCommented:
I just changed that line in the code, and then it works. (I also removed an extra .html() call on the next line that doesn't do anything, but that didn't keep it from working either.)

You can see the code that I tested here:
JsFiddle example
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.