0

国を選択するための 4 つのラジオ ボタンがあります。ユーザーがいずれかのラジオ ボタンをクリックすると、Ajax を使用してその国の州を取得します。データを処理していることをエンドユーザーに示すために、ローラー画像 (gif) を使用します。

ユーザーが国のラジオをクリックすると、メソッド (ラジオの onclick イベント) のloadStates()で、表示プロパティを「インライン」に設定してローラー画像を有効にします。次に、Ajax を使用してサーバーに要求を送信します (実際の例を示すために、そのコードを削除し、代わりに「スリープ」を挿入しました。これは、時間がかかることを示すためです)。結果を取得した直後に、表示プロパティを「なし」に戻しました。

しかし、それは機能していません。誰でもそれを修正する方法を教えてもらえますか?

PS : 当面は jQuery を使用したくありません。Javascript のみを使用してください。

<html>
<head>
 <script type="text/javascript">

    window.onload = init;

    function init() {
       countryFunctions();
    }//init

    function countryFunctions() {
       var inputElems = document.forms[0].getElementsByTagName('input');
       for (var i = 0, j = inputElems.length; i < j; i++) {
          var elemName = inputElems[i].name;
          if ( typeof elemName != 'undefined' && elemName === 'country' ) {
             //inputElems[i].onmouseup = showRoller;
             inputElems[i].onclick = loadStates;
          }//if
       }//for
       return;
    }

   function loadStates() {
       var action = 'get_states';
       document.getElementById("fSpinner").style.display = "inline";
       //alert("hi........");
       var result = doLoad(action);
       document.getElementById("countryStates").innerHTML = result;
       document.getElementById("fSpinner").style.display = "none";
   }

   function doLoad(action) {//A dummy function just show what it returns (actually it is Ajax)
      sleep(7000);
      var value = "\
        <p>\
           Which state of the country would you like to go?\
        </p>\
        <select name=\"state\">\
            <option value=\"1362\">Delhi</option>\
            <option value=\"481\">Kerala</option>\
            <option value=\"666\">Punjab</option>\
            <option value=\"668\">Kashmir</option>\
       </select>";
      return(value);
   }

   function sleep(ms) {
      var unixtime_ms = new Date().getTime();
      while(new Date().getTime() < unixtime_ms + ms) {}
   }
 </script>
 <style type="text/css">
   #fSpinner { display:none; }
 </style>
</head>
<body>
  <form>
    <p>What country do you belong to?</p>
    <p>
       <input name="country" value="in" type="radio">&nbsp;India&nbsp;&nbsp;&nbsp;
       <input name="country" value="au" type="radio">&nbsp;Australia&nbsp;&nbsp;&nbsp;
       <input name="country" value="nz" type="radio">&nbsp;New Zealand&nbsp;&nbsp;&nbsp;
       <input name="country" value="my" type="radio">&nbsp;Malaysia&nbsp;&nbsp;&nbsp;
       <span id="fSpinner">
           <img style="vertical-align:text-bottom;" src="http://107.20.148.146/shak/images/roller.gif">
       </span>
    </p>
    <div id="countryStates"></div>
  </form>
</body>
</html>
4

1 に答える 1

0

関数はsleepブラウザを「ブロック」し、関数が戻るまでページは更新されません。

AJAX 呼び出しなどの非同期プロセスをシミュレートするには、setTimeout代わりに次を使用します。

 function loadStates() {
   var action = 'get_states';
   document.getElementById("fSpinner").style.display = "inline";

   setTimeout( function() {
     var value = "\
       <p>\
          Which state of the country would you like to go?\
       </p>\
       <select name=\"state\">\
           <option value=\"1362\">Delhi</option>\
           <option value=\"481\">Kerala</option>\
           <option value=\"666\">Punjab</option>\
           <option value=\"668\">Kashmir</option>\
      </select>";
      document.getElementById("countryStates").innerHTML = value;
      document.getElementById("fSpinner").style.display = "none";
   }, 7000) ;
 }
于 2013-03-03T08:04:12.410 に答える