Загрузка последовательных полей выбора при запуске с JavaScript - PullRequest
Новая
       23

Загрузка последовательных полей выбора при запуске с JavaScript

1 голос
/ 03 марта 2010

Я пытаюсь заполнить поля выбора из javascript при запуске, каждое из которых зависит от предыдущего.

В HTML-коде у меня есть 

<body onload="start_up()">  
<span id="FirstList">xxxxxxx</span>  
<span id="SecondList">xxxxxxx</span>

Javascript код 

function start_up()
{
 load_select('','Type1')
 load_select(document.getElementById('select_first').value,'Type2')
}

function load_select(argument,code)
{
   xmlhttp=GetXmlHttpObject();
   if (xmlhttp==null)
       {
          alert ("Browser does not support HTTP Request");
          return;
       }
   var url="getdropdown.php";
   url=url+"?q="+code+argument;
   url=url+"&sid="+Math.random();  // this is needed to make sure its not loading a cached version
 last_http_type=code;
   xmlhttp.onreadystatechange=stateChanged;
   xmlhttp.open("GET",url,true);
   xmlhttp.send(null);
}

function stateChanged()
{
   if (xmlhttp.readyState==4)
    {
             if (last_http_type=="Type1")                      
                document.getElementById("FirstList").innerHTML=xmlhttp.responseText;
             else if (last_http_type=="Type2")
               document.getElementById("SecondList").innerHTML=xmlhttp.responseText;
             else if (last_http_type=="Type3")
               document.getElementById("OutputTable").innerHTML=xmlhttp.responseText;
             else if (last_http_type=="Type4")
               document.getElementById("OutputTable").innerHTML=xmlhttp.responseText;
             last_http_type="cleared";      
        }
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  return new XMLHttpRequest();   // code for IE7+, Firefox, Chrome, Opera, Safari
if (window.ActiveXObject)
  return new ActiveXObject("Microsoft.XMLHTTP");   // code for IE6, IE5
return null;
}

Окна выбора называются select_first и select_second, когда их код генерируется в php.

Это отлично работает для первого, но второй load_select не работает из-за того, что он не знает о select_first. Я предполагал, что это сделано последовательно и, таким образом, к тому времени, когда оно достигает утверждения, должно знать о первом выпадающем списке. (Обратите внимание, что приведенный выше код немного упрощен, чтобы проиллюстрировать проблему, второй аргумент load_select определяет точный вызов SQL, также stateChanged немного сложнее, так как ему нужно знать, какой вызываемый load_select. сами по себе, это множественная загрузка при запуске, которая не удается.)

Ответы [ 2 ]

0 голосов
/ 03 марта 2010

То есть, по сути, вы делаете два последовательных вызова AJAX и пытаетесь связать выполнение второго с результатом первого? Это не работает так, потому что первая буква A в AJAX означает асинхронный, что означает «хорошо, ребята, я пойду за этим URL, но вы можете продолжать без меня». Таким образом, javascript запускает первый запрос, а затем идет дальше, не дожидаясь, пока он что-то вернет.

Если вы хотите запустить второй запрос только после успешного выполнения первого, вам нужно будет использовать обратные вызовы и событие onSuccess().

Чтобы сделать его короче, поместите второй вызов в функцию stateChanged().

0 голосов
/ 03 марта 2010

Вы должны написать свой javascript отдельно от вашего HTML. Таким образом, событие запуска вашей страницы должно быть 

window.onload = function() {
    ....
    }
 or with jquery:
 $(function() { 
  ....
 });

Так что вы можете поместить свои другие функции и код. И здесь было бы отлично использовать JQuery. Посмотрите на пример метод загрузки . Вероятно, это решит ваши проблемы намного быстрее, чем написание ajax с нуля.

...