どうやら、Safari は送信イベント中に DOM を再描画しません。送信ハンドラー内に ajax 関数を含むコードがあります。フォームや送信ボタンのアクションを に変更できません<button>
。ajax 関数内で、進行状況バーの幅を計算し、それに応じて div を調整しています。これは Chrome と FF で機能します。サファリにはありません。ブラウザを停止すると、進行状況バーが表示されます。
Safari に ajax 関数内の DOM を強制的に再描画させる方法を知りたいです。次のようになります。
$('#webfileuploadform').bind('submit',function(){
var $progress = $('<div id="upload-progress" class="upload-progress"></div>').appendTo($('#webfileuploadform')).append('<div class="progress-container"><div class="progress-info">uploading 0%</div><div class="progress-bar"></div></div>');
function update_progress_bar(){
$.ajax({
dataType:"json",
async: false,
url: progress_url,
success: function(data){
$progress.show(); // This shows the progress bar. I imagine
// this is where I would want to re-paint the DOM
if(data.status == "uploading"){
var total_progress = parseInt(data.uploaded) / parseInt(data.length);
var width = $progress.find('.progress-container').width();
var progress_width = Math.round(width * total_progress);
var progress_px = progress_width + 'px';
$progress.find('.progress-bar').animate({'width':progress_px});
$progress.find('.progress-info').text('uploading ' + parseInt(total_progress*100) + '%');
} else if (data.status == "not-found") {
$progress.find('.progress-bar').animate({'width':'100%'});
$progress.find('.progress-info').text('uploading 100%');
stop = 'Flag for end-of-file';
} else {
//console.log('Ajax Error');
}
},
error: function(textStatus){
console.log("ERROR: " + textStatus);
}
});
// Check flag to see if user stopped the page to cancel the ajax requests
if(typeof stop == 'undefined'){
// Iterates the ajax requests
setTimeout(function(){update_progress_bar()}, freq);
} else {
setTimeout(function(){
$progress.animate({opacity:0.5},1000);
},freq);
$progress.find('.progress-info').text('Refresh the page to continue.');
}
}
// Initiate the ajax requests
setTimeout(function(){update_progress_bar()}, freq);
});