Sylviamc Sylviamc - 4 months ago 20
HTML Question

Jquery dropdown menu- on "click" selection, how do I connect it to new XML node, and update the page?

XML, JQuery, HTML Dynamic Dropdown Menu Won't Update


How do I get my XML dropdown menu selection to change to the corresponding XML node and update the content on my HTML page? I think I haven't passed the dogs_id correctly in the links possibly that is part of the problem. Thank you!

XML file

<?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 Page

$(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);
});
});
});

Answer

Wow after way too long working on this question, I developed an solution. I'm sure this was a really dumb question, but I never did come across it on any of the forums. So I thought I would give back and upload my code. I'm new at jQuery so I hope I haven't broken too many rules, feel free to make suggestions for improvement.

On the Dog Profile HTML page. A user selects a name from the Select a Dog Dropdown (XML). The Dog Profile page is then updated with the new dogs' content without a page refresh. Tested in Firefox, Safari and 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();
    });
    }
Comments