Jquery Dropdown-Menü - bei "Klick" Auswahl, wie verbinde ich es mit neuen XML-Knoten, und aktualisieren Sie die Seite?

XML, JQuery, HTML Dynamisches Dropdown-Menü wird nicht aktualisiert

Wie bekomme ich meine XML-Dropdown-Menüauswahl, um zum entsprechenden XML-Knoten zu wechseln und den Inhalt meiner HTML-Seite zu aktualisieren? Ich denke, ich habe die dogs_id nicht korrekt in den Links übergeben, möglicherweise ist das ein Teil des Problems. Vielen Dank!Jquery Dropdown-Menü - bei "Klick" Auswahl, wie verbinde ich es mit neuen XML-Knoten, und aktualisieren Sie die Seite?

XML-Datei

<?xml version="1.0" encoding="utf-8"?> 
    <breeder> 
    <boys> 
    <dog> 
     <dogs_id>0000</dogs_id> 
     <dogs_breeding_name> </dogs_breeding_name> 
     <dogs_mom> </dogs_mom> 
     <dogs_dad> </dogs_dad>

HTML-Seite

$(document).ready(function() { 
    $.ajax({ 
    type: "GET", 
     dataType: "xml", 
    url: "../xml/dogs.xml", 
    success: xmlParser1 
    }); 
}); 


function xmlParser1(xml) { 
    $(xml).find('boys').each(function() { 
    i = $(this); 
    allDogs = i.find('dog'); 

//this gets the names for the dropdown 
allDogs.each(function() { 
     var liDogName = $(this).find('dogs_breeding_name').html(); 
     var liDogId = $(this).find('dogs_id').text(); 

$("#dropMenuHolderMenu").append('<li><a href="#" class="menu-name">' + liDogName + '</a><span class="hidden">' +liDogId+ '</span></li><br>'); 

$("#dropMenuHolderMenu li, a href, span").click(function() { 
    var clickName = $(this).text(); 
    var dog = allDogs.find("liDogId").text(); 

    dogsBreedingName= dog.find('dogs_breeding_name').text(); 
    dogsMom= dog.find('dogs_mom').text(); 
    dogsDad= dog.find('dogs_dad').text(); 

    $("#breedingNameHolder").replaceWith(dogsBreedingName); 
    $("#dMomHolder").replaceWith(dogsMom); 
    $("#dDadHolder").replaceWith(dogsDad); 
    }); 
    }); 
    });

Quelle

2016-06-30 Sylviamc

Wow nach viel zu lange in dieser Frage arbeiten, ich eine Lösung entwickelt. Ich bin mir sicher, das war eine wirklich dumme Frage, aber ich habe sie nie in einem der Foren gefunden. Also dachte ich, ich würde zurückgeben und meinen Code hochladen. Ich bin neu bei jQuery, also hoffe ich, dass ich nicht zu viele Regeln gebrochen habe, fühle mich frei, Verbesserungsvorschläge zu machen.

Auf der Dog Profile HTML-Seite. Ein Benutzer wählt einen Namen aus der Dropdown-Liste "Hund auswählen" (XML) aus. Die Seite Hundeprofil wird dann mit dem Inhalt der neuen Hunde aktualisiert, ohne dass die Seite aktualisiert wird. Getestet in Firefox, Safari und Chrome.

Sylvia

XML

<?xml version="1.0" encoding="utf-8"?> 
     <breeder> 
     <boys> 
     <dog> 
     <dogs_id></dogs_id> 
     <url></url> 
     <dogs_breeding_name></dogs_breeding_name> 
     <dogs_given_name></dogs_given_name>   
    </dog>

HTML

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <!-- Bootstrap --> 
    <link rel="stylesheet" type="text/css"  href="../css/bootstrap.css" > 
    <script src="../js/bootstrap.js"></script> 
    <script type="text/javascript"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 

    $(document).ready(function() { 
    $.ajax({ 
    type: "GET", 
    dataType: "xml", 
    url: "../xml/dogs.xml", 
    success: loadDefaultPage 
    }); 

    }); 

    function loadDefaultPage(xml) { 
    $(xml).find('boys').each(function() { 
     myXml = $(this); 
     var x = myXml.find('dog:first'); 
     loadDefaultContent(x); 

     myXml.find('dog').each(function() {  
      var dogId = $(this).find('dogs_id').text(); 
      var liDog = $(this).find('dogs_breeding_name').html(); 
      //code for Select a Dad dropdown 
      $(".dropdown-menu").append('<li value="' + dogId + '"><a href="#" class="menu-name">' + liDog + '</a></li>'); 
     }); 

     $(".dropdown-menu li").click(function(e) { 
      e.preventDefault(); 
      var i = $(e.currentTarget).index();// 
      var x = myXml.find('dog')[i-1]; 
      loadDefaultContent(x) 
      }); 
     }); 
     } 
function loadDefaultContent(x){ 
     myXml.find(x).each(function(){ 
      var x = $(this); 
      var dogsBreedingName= x.find('dogs_breeding_name').text(); 
      var dogsMom= x.find('dogs_mom').text(); 
      var dogsDad= x.find('dogs_dad').text(); 
    }); 
    }

Quelle

2016-07-22 14:36:55 Sylviamc

Jquery Dropdown-Menü - bei "Klick" Auswahl, wie verbinde ich es mit neuen XML-Knoten, und aktualisieren Sie die Seite?

Antwort

Verwandte Themen