0

我创建了一些简单的跟踪应用程序，它使用 Jquery AJAX 从数据库加载数据，我需要一些显示用户的进度条，数据已加载。

我在这里有两个功能；

     function showResult(){
            valobj = $('#search_box').val();
            if(valobj == ""){
                $("#bc_result").show("slow");
                $("#result-table").show().html("<div class='alert alert-error'><button type='button' class='close' data-dismiss='alert'>&times;</button><h4>Error!</h4>Please insert your  Number... </div>");
            } else {
                $.get("ex.php", { bl : valobj }, function(data,status){
                    //getting value to components 
                    $("#result-table").show().html(data);
                    $("#title_search_result").show();
                    $("#bc_result").show("slow");      
                });
            } //end if value empty
        }

和

function progressResult(){
          var progress = setInterval(function() {
          var $bar = $('.bar');

          if ($bar.width()==680) {
             clearInterval(progress);
             $('.progress').removeClass('active');
           } else {
             $bar.width($bar.width()+40);
           }
         }, 800);
       }

如何结合这两种方法，当用户点击按钮时，进度条会工作，完成后显示结果？

无论如何，来自 php 文件的结果是一个放置在 div 内的表

<div id="result-table"></div>

如何结合这两个功能？谢谢。

更新

我在显示结果后放置了一些功能来删除进度条

    function progressResult(){
          var progress = setInterval(function() {
          var $bar = $('.bar');

          if ($bar.width()==680) {
             clearInterval(progress);
             $('.progress').removeClass('active');
           } else {
             $bar.width($bar.width()+40);
           }
         }, 800);
       }

       function removeProgressResult(){
           $('.bar').hide();
           $('.progress').hide();
       }

       function showResult(){
            valobj = $('#search_box').val();
            if(valobj == ""){
                $("#bc_result").show("slow");
                $("#result-table").show().html("<div class='alert alert-error'><button type='button' class='close' data-dismiss='alert'>&times;</button><h4>Error!</h4>Please insert your BL Number... </div>");
            } else {
                progressResult();
                $.get("ex.php", { bl : valobj }, function(data,status){
                    alert(status);
                    if(status == "success"){
                        //getting value to components 
                        $("#result-table").show().html(data);
                        $("#title_search_result").show();
                        $("#bc_result").show("slow");
                        //removeProgressResult();
                    } 
                });
            } //end if value empty
        }

showResult 函数正在调用progressREsult()，而是显示结果、进度条和结果一起出现。

如何解决？

4

1 回答 1

0

Your fist function has to change

so that you will call the progressResult() has to call when ever the showResult() get called dont show the result when ever the ajax return, lets wait untill the progressResult() finish the job

you have to change the second function so that you have to display the result after the unction get finished

function showResult(){
            valobj = $('#search_box').val();
            if(valobj == ""){
                $("#bc_result").show("slow");
                $("#result-table").show().html("<div class='alert alert-error'><button type='button' class='close' data-dismiss='alert'>&times;</button><h4>Error!</h4>Please insert your  Number... </div>");
            } else {

                progressResult();

                $.get("ex.php", { bl : valobj }, function(data,status){
                    //getting value to components 
                    $("#result-table").html(data);
                    $("#title_search_result").show();
                    $("#bc_result").show("slow");      
                });
            } //end if value empty
        }



function progressResult(){
          var progress = setInterval(function() {
          var $bar = $('.bar');

          if ($bar.width()==680) {
             clearInterval(progress);

             $("#result-table").show();


             $('.progress').removeClass('active');
           } else {
             $bar.width($bar.width()+40);
           }
         }, 800);
       }

you should be very careful to finish the progress bar only after ajax get the result

于 2013-06-26T07:32:14.913 回答