We help IT Professionals succeed at work.

jquery, html5, css

ITsolutionWizard
on
285 Views
Last Modified: 2017-11-10
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

Comment
Watch Question

Author

Commented:
any helps?

Author

Commented:
any helps?

Author

Commented:
Any helps?
CERTIFIED EXPERT

Commented:
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

Author

Commented:
It does not work. Can you try to combine your codes and my codes?
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.