Question

我在更新DIV的html时遇到问题 Div的HTML代码是;

<div id="divforlog" 
     style="z-index:200000; overflow:auto;
     position:fixed; width:400px;
     height:300px; border:solid 2px gray;
     padding:10px; background-color:#F1F1F1">
</div>

单击按钮我调用显示此隐藏div的代码。然后获取一个包含页面ID的字符串数组。对于每个ID，我使用jquery调用“.ashx”页面，并在成功时更新div的html。这一切在Firefox中运行良好，但在其他浏览器（Chrome和IE）中没有。在所有函数的最后，我使用jquery“slideUp”方法隐藏div。这个滑动工作在firefox，IE和chrome中，并在消失之前显示div的所有内部html。所以我的主要问题是div没有显示和更新。在Javascreipt中，还有一个div的参考用于进度条，它也没有在IE和Chrome中显示。

JavaScript代码如下：

var progress = 0;
var totalpages;
var logstring = '';

function getProgressBarValue() {
  var s =
    '<span style="text-align:center;display:block">' +
    Math.round($('#progressbar').progressbar('option', 'value')) +
    '%</span>';
  return s;
}

function UpdateProgressBar(arg) {
  if (arg == 0) {
    var pvalue = (progress / totalpages) * 70;
    $('#progressbar').progressbar('option', 'value', pvalue);
  } else {
    $('#progressbar').progressbar('option', 'value', 100);
  }
}

function getPageName(PageID) {
  return PageName; //string
}

function DisplayLogDiv() {
  $('#divforlog').css('display', '');
  $('#divforlog').css('top', 300);
  $('#divforlog').css('left', 300);
  $('#divforlog').html('');
  $('#divforlog').slideDown();

  $('#progressbar').css('top', 280);
  $('#progressbar').css('left', 300);
  $('#progressbar').show();
  $('#progressbar').progressbar({ value: 0 });
  $('#progressbar').progressbar('option', 'value', 0);
  logstring = '';
  progress = 0;
  totalpages;
}

function AddLog(logstr) {
  $('#divforlog').html(getProgressBarValue() + logstring);
}

$('#mybutton').click(function() {
  DisplayLogDiv();

  $('#CustomerDetails').show();
  var PageIDs; //it is from some hidden field
  PageIDs = PageIDs + ',';
  var pageArray = PageIDs.split(',');
  totalpages = pageArray.length - 1;

  for (var i = 0; i < pageArray.length; i++) {
    //loop start here
    if (pageArray[i] != '') {
      progress = progress + 1;

      $.ajax({
        contentType: 'text/html; charset=utf-8',
        data: somedatatobepassed,
        url: 'PublishIntermediate.ashx',
        dataType: 'html',
        async: false,
        cache: false,
        success: function(data) {}
      });

      UpdateProgressBar(0);
    }
  }

  $.ajax({
    contentType: 'text/html; charset=utf-8',
    data: somedatatobepassed,
    url: 'PublishIntermediate.ashx',
    dataType: 'html',
    async: false,
    cache: false,
    success: function(data) {
      UpdateProgressBar(100);

      AddLog(data);
    }
  });

  $('#CustomerDetails').hide();
  $('#divforlog').slideUp(500);
  $('#progressbar').slideUp(500);

  return false;
});

此致乌尔法特·侯赛因

Answer 1

这些代码

$('#CustomerDetails').hide();
$('#divforlog').slideUp(500);
$('#progressbar').slideUp(500);

在你的ajax成功状态中，

在jquery ajax调用期间，div innerHTML不会更新

1 个答案: