-1

我不知道我是否正确地提出了这个问题，但我有一个 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");
  });
4

4 回答 4

2

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

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

#progress-overlay 是指示器的背景，您想要的效果类似于 LightBox2 效果，但在屏幕中间使用进度指示器和小框。

您可以从这里获得动画 gif； http://preloaders.net/

确保您的进度/正在发生的 div 位于文档结构的顶层，因此位于正文顶部的某个位置，在您的任何其他容器 DIV 之前。这样做是为了使#progress-overlay 在 DOM 中呈现在与您网站的顶级元素相同的级别。当您绝对定位#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 回答