2013-11-07 4 views
0

Я работаю над проектом, и я не уверен, что делать дальше. Моя цель - заполнить выпадающее меню с помощью xml-файла. Меню основано на 4 шагах. «Филке» «Коммуне» «Категори» «Дато». Прямо сейчас я получаю xml для подачи данных в «Fylke» с примером ниже. Следующий шаг - заполнить «Kommune» Halden, когда пользователь выбирает Akershus из меню «Fylke».AJAX, заполнение выпадающего меню из файла XML

Вот XML:

<arrangement> 
    <fylke name="Akershus"> 
    <kommune name="Halden"> 
    <arrangement id="570215856"> 
    <kategori>Moro</kategori> 
    <dato>2013-10-10</dato> 
</arrangement> 

Вот скрипт: (. Это кормление "Fylke" в меню на данный момент)

$(document).ready(function() { 
arrangementer(); 
fetch(); 
}); 

/*function fetch() { 

setTimeout(function() { 
    arrangementer(); 
    fetch(); 
    }, 100); 

    }*/ 

    function arrangementer() { 

    $.ajax({ 

    url: "arrangementer.xml", 
    dataType: "xml", 
    success: function(data) { 

     $('ul').children().remove(); 

     $(data).find("arrangement fylke").each(function() { 

      var info = '<a href="#">'+$(this).attr("name")+'</a>'; 

      $('ul').append(info); 

     }); 

    }, 
    error: function() { $('ul').children().remove(); 
     $('ul').append("<li>There was an error!</li>"); } 
}); 
} 

ответ

0

не уверен, если я получил вашу проблему правильно, но надеюсь, что это помогает:

$(xml).find("arrangement fylke").each(function(i) { 
    var info = '<a href="#" nodeno="'+i+'" >'+$(this).attr("name")+'</a>'; //attribute nodeno added, carries the number of the node you will need later 
    $('ul').append(info); 
}); 

$('ul').on("click", function(e){ //when clicked on one of those elements 
    var nodeno = $(e.target).attr("nodeno"); //get nodeno attribute from clicked object 
    $(xml)[nodeno].find("arrangement kommune").each(function(i){ //get the node by id and... 
     var info = '<a href="#" nodeno="'+i+'" >'+$(this).attr("name")+'</a>'; 
     $('#menuitem2').append(info); //...populate your submenu with the kommune object 
    }); 
}); 

EDIT: небольшое объяснение

это приведет Fylke ссылки как:

<a href="#" nodeno="0">Fylke 1</a> 
<a href="#" nodeno="1">Fylke 2</a> 

, когда один из них щелкнут, вы просто читаете атрибут nodeno из элемента clicked и используете его для получения соответствующего узла из вашего xml. то вы используете только kommune из этого одного узла для заполнения следующего уровня меню.

надеюсь, что у меня возникли проблемы, и это помогает

+0

Хорошо, спасибо большое. Но я не уверен, где разместить свой пример в моем коде? – user2926446

+0

У меня есть пример для работы, но я делаю то же, что и у меня, когда я нажимаю на элемент внутри «Fylke», ничего не происходит. – user2926446

+0

Теперь его вид работы, но только если я удалю [nodeno] из $ (xml) [nodeno] .find. И затем он подает все имена «Kommune» в меню. Не те, что находятся внутри узла fylke в xml. Firebug говорит, что nodeno не является функцией. Я запутался. Но почти там :) – user2926446

0

вы используете JQuery?

если так вам нужно прикрепить событие щелчка к наружному ул, что может быть сделано в готовой функции

$("ul li").click(function() { 
    alert("Handler for .click() called."); 
}); 

http://api.jquery.com/click/

Вы не добавляя элементы Li в вашем ул настоящее время jQuery: how to add <li> in an existing <ul>?

Вам действительно нужно дать идентификаторы для элементов, которые вы хотите обновить, так что вы можете использует

$(" #myid li ").append(info); 

В противном случае вы будете добавлять информацию для всех ул элементов на форме http://api.jquery.com/id-selector/

+0

Спасибо, я попробую это. – user2926446

Смежные вопросы