-1

質問を適切に行ったかどうかもわかりませんが、バックエンドで持ち上げるコードイグナイター アプリケーションがあります。アプリがコマンド (ajax コマンド) の実行でビジー状態になっている間、ある種のステータス/メッセージ ボックス/div を表示したいと思います。タスクが完了したら、div/box をクリアしたいと考えています。このような解決策を見つけるには、何をグーグルで検索する必要がありますか?

ありがとう。

編集： これは私のjquery / ajax呼び出しが今どのように見えるかです...

  $('#availVLANS').click(function()  {
  $(this).attr("disabled","disabled");
  $.ajax({
    url:"<?php echo site_url('controller/methodABC/');?>",
    type:'POST',
    dataType:'json',
    success: function(returnDataFromController) {
    var htmlstring;
    var submitFormHTML;
    htmlstring = "<br><br><B>To reassign the port to a new vlan, click on a VlanId below and then click on the OK button</B><br><table class='table table-bordered table-striped'>";
    htmlstring = htmlstring + "<th>VlanId</th><th>Name</th>";
    for(i = 0; i < returnDataFromController.length; i++) {
        //alert(returnDataFromController[i].VlanId);
        htmlstring = htmlstring +  "<tr><td><a href=>"+returnDataFromController[i].VlanId+"</a></td><td>"+ returnDataFromController[i].Name+"</td></tr>";   

    }
    submitFormHTML = "<form method='post' accept-charset='utf-8' action='" + BASEPATH + "index.php/switches/changeportvlan/"+ $('#ip').val() +"/" + $('#hardwaremodel').val() +"/" + $('#port').val() + "'><input type='text' name='newVlanID' id='newVlanID' style='width:5em;height:1.5em'/>&nbsp;&nbsp;<button type='submit' class='btn' name='saveVlan' id='saveVlan' style='width:10em;height:2em'>Reassign Vlan</button></form>";
    //alert(submitFormHTML);
    $('#clientajaxcontainer').html(htmlstring);
    $('#newvlanform').html(submitFormHTML);                     

  }
});
$(this).removeAttr("disabled");
  });
4

4 に答える 4

2

ページ全体の上にオーバーレイされた絶対位置のDIVでアニメーションGIF画像を使用するだけです。進行状況ウィンドウの背後にあるインターフェイス要素をクリックしないように、ページ全体の上に非表示のDIVをオーバーレイするようにしてください。このようなもの;

╔════════════════════╗
║  #progress-overlay ║
║ ╔════════════════╗ ║
║ ║ #progress-indicator
║ ╚════════════════╝ ║
╚════════════════════╝

＃progress-overlayはインジケーターの背景であり、目的はLightBox2エフェクトのようなものですが、画面の中央に進行状況インジケーターと小さなボックスを使用します。

ここからアニメーションGIFを取得できます。 http://preloaders.net/

進行状況/何かが起こっているdivがドキュメント構造の最上位にあることを確認してください。つまり、他のコンテナDIVの前に、本文の上部にあることを確認してください。これは、＃progress-overlayがDOMのWebサイトの最上位要素と同じレベルでレンダリングされるようにするために行われます。＃progress-overlayを絶対に配置すると、ページ上の他のすべての上に表示されます。

<html>
<head>
....
</head>
<body>
<div id="progress-overlay">
    <div id="progress-indicator">
        <img src="images/myprogress.gif" /> Please Wait...
    </div>
</div><!--progress-overlay-->
<div id="website-wrapper">
.... web site, layout, content, etc...
</div>
</body>
</html>

＃progress-overlayはデフォルトで非表示になっており、必要に応じて上に表示されます。何かのようなもの;

#progress-overlay{
position: absolute;
width: 100%;
height: 100%;
background: #000;
opacity: 0.2;
}

#progress-indicator{
position: relative;
margin: 0 auto;
top: 40%;
width: 200px;
height: 50px;
}

JQueryを使用すると、これをオンデマンドで簡単に表示できます。

$(document).ready(function(){
    $('#progress-overlay').hide();
    });
function showProgressIndicator()
{
    $('#progress-overlay').show();
}
于 2012-09-10T15:08:59.993 に答える
1

onreadystatechangeイベントを利用できます： http ：//www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp

于 2012-09-10T15:07:17.890 に答える
1

jqueryを介して実行している場合は、メッセージやスピナーを含むdivを表示するだけです。

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  }
});
于 2012-09-10T15:09:19.233 に答える
0

jQuery を使用している場合は、次の解決策を提案します。

jQuery:

$(document).ready(function(){
    $("#the_button").click(function(){
        var url = "the_controller/the_method"
        var data = {the: "data"}
        //before the POST takes place, fade-in the message
        $("#the_message").fadeIn();
        $.post(url, data, function(r){
            if(r.success){
                //when the post is finished, and it was successful, fade-out the message.
                $("#the_message").fadeOut();
            }
            else console.log("something bad happened");
        }, 'json');
    });
});

HTML:

<!-- HIDE IT BY DEFAULT -->
<div id='the_message' style='display:none;'>
    Please wait.
</div>

コントローラー:

class The_controller extends CI_Controller{
    function the_method(){
        $p = $this->input->post();
        the_task($p);
        if(the_task_success) return json_encode(array("success" => true));
        else return json_encode(array("success" => false));
    }
}
于 2012-09-10T16:19:51.663 に答える