Mit JQuery/AJAX zum füllen eines Dropdown-Menüs mit XML-Datei.

Ich habe ein drop-down-Menü, das ich Auffüllen müssen aus einer XML-Datei.
Hier ist das Skript, das ich versuche zu verwenden:

 $(document).ready(function(){       //load jQuery 1.5
  function loadfail(){
  alert("Error: Failed to read file!");
 }

 function parse(document){
 $(document).find("menuItem").each(function(){
    var optionLabel = $(this).find('text').text();
    var optionValue = $(this).find('value').text();
    $('.opening').append(
   '<option value="'+ optionValue + '">' + optionLabel + '</option>'
    );
 });
 }

 $.ajax({
  url: 'http://ourwebserver/Online%20App/jobTitles.xml',    //name of file with our data - link has been renamed
  dataType: 'xml',    //type of file we will be reading
  success: parse,     //name of function to call when done reading file
  error: loadfail     //name of function to call when failed to read
 });
});

Hier ist ein Beispiel aus der xml-Datei:

<menu>
<menuItem>
    <value>612</value>
    <text>CLERK-CMH HOS HIM</text>
</menuItem>
<menuItem>
    <value>1632</value>
    <text>FAM PRACT-CMH CLN Southside Medical</text>
</menuItem>

Und hier ist der html-code, enthält die drop-down-versuche ich zu füllen:

 <strong>Position(s) Desired</strong>
             <select name="opening" size="5" multiple="multiple" id="opening">
      </select>

Ich bin nicht immer eine Fehlermeldung, aber ich bin auch nicht immer alle Daten zur Einpflege in das Menü.

Ich habe auch versucht den code/Lösung unter diesem link:
Auffüllen einer drop-down-Menü mit xml-Datei
und hatte ein ähnliches Ergebnis, keine Fehler, aber keine Daten.

Dank im Voraus für Eure Hilfe.

InformationsquelleAutor user2087788 | 2013-02-19

0

Bist du mit einem class-Selektor (.opening) anstatt der ID (#opening) zu finden, die <select> element. Mit $('#opening') in Ihrem parse Funktion sollte funktionieren wie erwartet.
- Danke!!! Das war es dann.
- Könnte ich eine txt-Datei, wenn es als xml formatiert? Den Bericht muss ich ziehen Sie die Daten aus, kommt aus einem anderen system und wenn wir das als xml speichern, bekommen wir zusätzliche Zeichen. Ich habe versucht, ändern Sie den Datentyp in txt, jedoch bekomme ich die loadfail Fehler.
- Verlassen Sie den Datentyp als xml, aber die änderung der url-parameter benötigt, um die Datei, die Sie wollen. Funktioniert das?
InformationsquelleAutor Luis
0

Ich denke, du hast den Aufruf der Funktion falsch in Ihrem Erfolgs-callback.

success: parse,

Sollte so etwas wie dieses.

success: function(){parse(data);},

Aber ich könnte falsch sein, da ich nicht viel Erfahrung hier.

InformationsquelleAutor dev
0

Überprüfen, was document ist eigentlich gesetzt, um in Ihr analysieren. Es könnte eine Kollision mit der HTML -document.
```
function parse(document){
   console.log(document)
   $(document).find("menuItem").each(function(){
```
InformationsquelleAutor andyzinsser
0

jQuery docs ist dein bester Freund, http://api.jquery.com/jQuery.ajax/

InformationsquelleAutor gutierrezalex

  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<title></title>
<style>
    body
    {
        width: 610px;
        font-family: calibri;
    }

    .frmDronpDown
    {
        border: 1px solid #7ddaff;
        background-color: #C8EEFD;
        margin: 2px 0px;
        padding: 40px;
        border-radius: 4px;
    }

    .demoInputBox
    {
        padding: 10px;
        border: #bdbdbd 1px solid;
        border-radius: 4px;
        background-color: #FFF;
        width: 50%;
    }

    .row
    {
        padding-bottom: 15px;
    }
</style>

<!--  <script src="jquery-3.2.1.min.js" type="text/javascript"></script>-->
<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#divEnvironment").hide();
        $("#divService").hide();
        $("#divButton").hide();
        getDropDownValue(document.getElementById('sor-list'), '', 'sorid', 
         '');
    });

    function getEnvironment(val) {
        if (val != 0) {
            $("#divEnvironment").show();
            $("#divService").hide();
            $("#divButton").hide();
        }
        else {
            $("#divEnvironment").hide();
            $("#divService").hide();
            $("#divButton").hide();
        }
        $('#environment-list option').remove();
        $('#service-list option').remove();
        $('#service-list').append("<option class='ddindent' value='0'>Please 
       Select</option>");
        getDropDownValue(document.getElementById('environment-list'), 
       'sorid', 'envid', val);
    }

    function getService(val) {
        if (val != 0) {
            $("#divEnvironment").show();
            $("#divService").show();
            $("#divButton").hide();
        }
        else {
            $("#divService").hide();
            $("#divButton").hide();
        }
        $('#service-list option').remove();
        getDropDownValue(document.getElementById('service-list'), 'envid', 
        'servid', val);
    }

    function getSubmit(val) {
        if (val != 0) {
            $("#divButton").show();
        }
        else {
            $("#divButton").hide();
        }
    }
    function getDropDownValue(dropdown, id1, id2, val) {
        $.ajax({
            type: "GET",
            url: "make.xml",
            dataType: "xml",
            success: function (xml) {
                var selectCity = $('#' + dropdown.id);
                selectCity.append("<option class='ddindent' value='0'>Please 
            Select</option>");
                $(xml).find('dropdown').each(function () {
                    $(this).find(dropdown.name).each(function () {
                        if (val != '') {
                            if ($(this).attr(id1) == val) {
                                var value = $(this).attr(id2);
                                var label = $(this).text();
                                selectCity.append("<option class='ddindent' 
         value='" + value + "'>" + label + "</option>");
                            }
                        }
                        else {
                            var value = $(this).attr(id2);
                            var label = $(this).text();
                            selectCity.append("<option class='ddindent' 
        value='" + value + "'>" + label + "</option>");
                        }
                    });
                });
            } //sucess close
        });
    }


</script>
  </head>
 <body>
<div class="frmDronpDown">
    <div class="row">
        <label>SOR:</label><br />
        <select name="sor"
            id="sor-list" class="demoInputBox"
            onchange="getEnvironment(this.value);">
        </select>
    </div>
    <div class="row" id="divEnvironment">
        <label>Environment:</label><br />
        <select name="environment"
            id="environment-list" class="demoInputBox"
            onchange="getService(this.value);">
            <option value="">Select Enviroment</option>
        </select>
    </div>
    <div class="row" id="divService">
        <label>Service:</label><br />
        <select name="service" multiple
            id="service-list" class="demoInputBox" 
       onchange="getSubmit(this.value);">
            <option value="">Select Service</option>
        </select>
    </div>
    <div class="row" id="divButton">
        <label></label>
        <br />
        <button type="button" id="btnSubmit" style="padding: 10px; width: 
       100px;">Submit</button>
    </div>
  </div>
 </body>
 </html>      

 <dropdown>
  <sor sorid="1">sor1</sor>
  <sor sorid="2">sor2</sor>
  <environment envid="1" sorid="1">environment1</environment>
  <environment envid="2" sorid="1">environment2</environment>
  <environment envid="3" sorid="2">environment3</environment>
  <environment envid="4" sorid="2">environment4</environment>
  <service servid="11" envid="1">service11</service>
  <service servid="12" envid="1">service12</service>
  <service servid="21" envid="2">service21</service>
  <service servid="22" envid="3">service22</service>
  </dropdown>

Können Sie erklären, Ihre Antwort?

InformationsquelleAutor Kavita Mahadik

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.