0

元の画面で処理を終了する前に、複数のモーダル ダイアログを順番に表示するために、複数の方法を試しました。モーダル ダイアログはすべて、フォームが送信された後に開始されます。最初のモーダルには 2 番目のモーダルが必要とする情報が含まれているため、それらは順番に開く必要があります。私が試みたすべての方法 (今のところ以下の単純化されたバージョンを使用) は IE (および Mozilla でも同様) で正常に動作しますが、Safari でテストしようとすると、思いどおりに動作しません。これは、私が本当に目指しているものを単純化/縮小したバージョンです。私は基本的に、アラートが鳴る前に test.html ページがロードされることを確認したいと考えています。IE では、これは以下の両方の方法で期待されるように機能します - ページを modalcontent div にロードし、アラートを表示します。ファイアフォックスでは、最初にアラートが表示され、次に画面が変更/リロードされます。javascript メソッド setInterval および setTimeout を使用してみましたが、firefox では、画面が更新される前にアラートが表示されます。私が行方不明の何かがあるかどうか、何か考えはありますか? 私はこれにすべて間違って近づいていますか？

<TABLE><TR>
<TD ALIGN="center" bgcolor="red" onClick="showNonIEModal('test.html');
alert('alert to show up AFTER load');">CLICK ME</TD>
</TR></TABLE>

<div id="modalcontent"></div>

Ajax メソッド:

<SCRIPT>function showNonIEModal(url)
{
var dsp;
var element = document.getElementById("modalcontent"); 
element.innerHTML = '<p><em>Loading ...</em></p>'; 
if (window.XMLHttpRequest){
    dsp=new XMLHttpRequest();
}
else{
    dsp=new ActiveXObject("Microsoft.XMLHTTP");
}

dsp.onreadystatechange=function(){
    if (dsp.readyState==4 && dsp.status==200){
        element.innerHTML=dsp.responseText;
    }
}
dsp.open("GET",url,true);
dsp.send();
}</SCRIPT>

2番目の方法:

<SCRIPT>function showNonIEModal(url)
{
var element = document.getElementById("modalcontent"); 
element.innerHTML='<'+'iframe id="'+frameName+'" name="'+frameName+'" src="'+url+'" 
FRAMEBORDER="0" height="500px" width= "600px"><\/iframe>';
}</SCRIPT>

何か案は？私はこの問題に数え切れないほどの時間を費やしてきました。これはSafariの問題のようです。答えを探していると、JQueryの使用に関する多くの回答が見つかりましたが、それは私にとって選択肢ではありません. 任意の考えをいただければ幸いです。

ありがとう！

4

1 に答える 1

0

予想される結果の正確な順序についてはまだ少し曖昧ですが、次のようになると思います。

  1. 「CLICK ME」をクリック
  2. modalcontent div のコンテンツが変更されることを期待する
  3. アラートを表示します。

これが正しければ、ここに問題があります (私はそう思います)。コードの次の行を実行する前に完了するために ajax リクエスト (つまり、非同期のもの) に依存しています。IE があなたのために働いていることは知っていますが、IE はたいしたものではありません。あなたが望むのは、おそらく次のようなものです：

<SCRIPT>function showNonIEModal(url, callback)
{
var dsp;
var element = document.getElementById("modalcontent"); 
element.innerHTML = '<p><em>Loading ...</em></p>'; 
if (window.XMLHttpRequest){
    dsp=new XMLHttpRequest();
}
else{
    dsp=new ActiveXObject("Microsoft.XMLHTTP");
}

dsp.onreadystatechange=function(){
    if (dsp.readyState==4 && dsp.status==200){
        element.innerHTML=dsp.responseText;
        callback && callback(); //This is the part I changed
    }
}
dsp.open("GET",url,true);
dsp.send();
}</SCRIPT>

今、あなたがそれを実行したいとき..

<TABLE><TR>
<TD ALIGN="center" bgcolor="red" onClick="showNonIEModal('test.html', function () {alert('alert to show up AFTER load')});">CLICK ME</TD>
</TR></TABLE>

<div id="modalcontent"></div>

これにより、コンテンツがサーバーから受信されて処理されるまで、アラートが強制的に待機されます。非常に一般的な非同期パターン - X を実行し、完了したら、Y と Z に続くこの関数を実行します。

于 2012-07-30T16:43:49.157 に答える