Question

我不知道我是否已经正确地提出了这个问题，但是我有一个codeigniter应用程序，在后端有一些提升。当应用程序忙于执行命令（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");
  });

Answer 1

只需在覆盖整个页面顶部的绝对定位的DIV中使用动画GIF图像。只需确保在整个页面的顶部覆盖一个不可见的DIV，以防止点击进度窗口后面的界面元素。像这样的东西;

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

＃progress-overlay是指标的背景，你想要的是LightBox2效果，但在屏幕中间使用进度指示器和小方框。

你可以从这里获得GIF动画; http://preloaders.net/

确保您的进度/正在发生的事情div位于文档结构的顶层，因此位于正文顶部的某个位置，位于任何其他容器DIV之前。这样做是为了让＃progress-overlay在DOM中与网站的顶级元素呈现在同一级别。当您完全定位＃progress-overlay时，页面上的其他内容将显示为 overop 。

<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默认隐藏，然后在需要时显示为topop。喜欢的东西;

#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();
}

Answer 2

您可以使用onreadystatechange事件： http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp

Answer 3

如果您是通过jquery进行的，只需显示带有消息和/或微调器的div。

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  }
});

Answer 4

如果您正在使用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));
    }
}

如何在任务完成时显示友好消息

4 个答案:

jQuery：

HTML：

控制器：