Jqueryドロップダウンメニュー - 「クリック」選択で、新しいXMLノードに接続してページを更新するにはどうすればよいですか？

XML、JQuery、HTML動的ドロップダウンメニューが更新されない

XMLドロップダウンメニューの選択を対応するXMLノードに変更し、HTMLページのコンテンツを更新するにはどうすればよいですか？おそらく問題の一部である可能性のあるリンクに正しくdogs_idを渡していないと思います。ありがとうございました！Jqueryドロップダウンメニュー - 「クリック」選択で、新しいXMLノードに接続してページを更新するにはどうすればよいですか？

XMLファイル

<?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ページ

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

出典

2016-06-30 Sylviamc

うわー後にあまりにも長い間、この問題に取り組んで、私は解決策を開発しました。私はこれが本当にばかげた質問だったと確信していますが、私はフォーラムのいずれにも出くわしたことはありません。だから私は私のコードを返すとアップロードすると思った。 jQueryで新しくなったので、あまりにも多くのルールを崩していないことを願って、改善の提案をしてください。

犬のプロフィールのHTMLページ。ユーザーは、「犬の選択」ドロップダウンリスト（XML）から名前を選択します。犬のプロフィールページは、新しい犬のコンテンツで更新され、ページの更新は行われません。 Firefox、Safari、Chromeでテストされています。

シルビア

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

出典

2016-07-22 14:36:55 Sylviamc

Jqueryドロップダウンメニュー - 「クリック」選択で、新しいXMLノードに接続してページを更新するにはどうすればよいですか？

答えて

関連する問題