asked on

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

ITsolutionWizard

ASKER

any helps?

ITsolutionWizard

ASKER

any helps?

ITsolutionWizard

ASKER

Any helps?

Göran Andersson

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

ITsolutionWizard

ASKER

It does not work. Can you try to combine your codes and my codes?

ASKER CERTIFIED SOLUTION

Göran Andersson

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial