Заполните поле выбора в HTML с помощью AJAX - PullRequest
Новая
       1

Заполните поле выбора в HTML с помощью AJAX

1 голос
/ 03 апреля 2012

Я пытаюсь создать простую страницу html5, чтобы при загрузке страницы объект Select HTML5 заполнялся списком значений, которые хранятся в XML и вызываются с использованием внешнего файла javascript.

HTML: 

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery.js" type="text/javascript"></script>
        <script src="js/main.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body onLoad="javascript:loadXML()">
        <header>
            <h1></h1>
        </header>
        <form name="myForm" method="GET" action="">
            <select id="cbLDAP"></select>
        </form>
        </div>
    </body>
</html>

JS: 

// variables declaration
var XML_PATH = "XML/ou.xml";
var select = $('#cdLDAP');
// load XML file
function loadXML()
{
    $.ajax({
            type: "GET",
            url: XML_PATH,
            dataType: "xml",
            success: function(xml)
            {
                $(xml).find('LDAP').each(function()
                {
                    var ou = $(this).find('OU').text();
                    select.append("<option/><option class='ddheader'>"+ou+"</option>");
                });
                $(this).find('Name').each(function(){
                    var name = $(this).text();
                    select.append("<option class='ddindent' value='"+ name +"'>"+name+"</option>");
                });
            }
    });
}

XML: 

<?xml version= "1.0" encoding="UTF-8"?>
<DropDown>
    <LDAP>
        <OU>1</OU>
        <OU>2</OU>
        <OU>3</OU>
        <OU>4</OU>
        <OU>5</OU>
        <OU>6</OU>
    </LDAP>
</DropDown>

Когда я загружаю свой HTML-файл в Firefox 11, объект Select не заполняется. Что я делаю неправильно? Спасибо.

1 Ответ

1 голос
/ 03 апреля 2012

У вас была опечатка между идентификатором элемента SELECT и кодом добавления jQuery.Кроме того, вы перебирали родительский узел, у которого не было текстовых значений, в отличие от дочерних узлов «OU».

Вот пример кода, который исправляет синтаксический анализ XML и очищает некоторые неправильно названные идентификаторы элементов: 

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"></script>
</head>
<body>
  <header>
      <h1></h1>
  </header>
  <form name="myForm" method="GET" action="">
      <select id="cdLDAP">
        <option/>
      </select>
  </form>
  </div>
  <script type="text/javascript">
    // variables declaration
    var XML_PATH = "XML/ou.xml";   
    // load XML file
    $(function() {
      $.ajax({
        type: "GET",
        url: XML_PATH,
        dataType: "xml",
        success: function(xml) {
          $(xml).find('LDAP').find('OU').each(function(i) {
            var ou = $(this).text();
            $('#cdLDAP').append("<option class='ddheader'>"+ou+"</option>");
          });
          $(this).find('Name').each(function() {
            var name = $(this).text();
            $('#cdLDAP').append("<option class='ddindent' value='"+ name +"'>"+name+"</option>");
          });
        }
      });
    });    
  </script>
</body>    
</html>

Наконец, стоит отметить, что действие onLoad и перенос кода синтаксического анализа в функцию на самом деле не нужны с jQuery;и не забудьте разместить код на стороне клиента на том же сервере, что и XML-файл, иначе вы столкнетесь с политикой того же источника, блокирующей выборку AJAX-данных XML.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...