0

2つのリンクに従って特定のコントロールを備えたJQueryダイアログを開くためのこのコードがあります。これで、最初の試行で正常に動作します。しかし、2 回目にリンクをクリックして JQuery ダイアログをロードすると、空白のダイアログが開きます。それを閉じてリンクをもう一度クリックすると、正しいダイアログが開きます。試行を繰り返すと、JQuery 1.3.2.js ファイルでエラーが発生します。

以下のコード：

 $('#div1').dialog("destroy");            

 if (criteria1== "L") {
    $("#div1").html("<iframe id='dialogFrame1' src='../WebPages/abc.aspx'        
    Height='100%' Width='100%' frameborder='0'></iframe>");
  }
 else {
    $("#div1").html("<iframe id='dialogFrame2' src='../WebPages/abc1.aspx'    
  Height='100%' Width='100%' frameborder='0'></iframe>");
 }

 $('#div1').dialog(
 {

  height: 220,
  title: "Title",
  width: 500,
  modal: true,
  beforeclose: function (event, ui) {

      $("#div1").html("");
      $("#div1")[0].innerHTML = "";
    }

 });

 $('#div1').parent().appendTo($("form:first"));
 $('#div1').dialog('open');

間違った JQuery ファイルを使用していますか? この問題を修正する方法について何か意見はありますか?

4

2 に答える 2

0

編集：問題を誤解しました、2回目の試み：

問題を再現できません。http：//jsfiddle.net/GYxwG/3/で試してみました。$('#div1').parent().appendTo($("form:first"));ただし、これを実行するとまったく機能しないため、削除する必要がありました。このステートメントは、あなたが思っていることを実行しない可能性があります。divでを呼び出すと.dialog()、divはその位置から移動され、あらゆる種類のダイアログにラップされます。したがって.parent()、ダイアログの内部ラッパーの1つを指します。ダイアログ全体ではなく、元のドキュメントの親要素でもありません。

したがって、ダイアログのdivに最も近い親を移動することはほとんど意味がなく、「不特定の」動作を引き起こします。おそらく、そのエッジケースが見られますか？

于 2010-09-27T12:35:57.470 に答える
0

jsfiddleの作業例 (jquery css/images がありません)

したがって、あなたが与えたコードを破棄することを提案する場合、それは混乱しているように見えますが、代わりに次のようにします。

$(function(){
    var urls = {
        "hackernews" : "http://news.ycombinator.com", 
        "jsfiddle" : "http://jsfiddle.net"
    };

    var dialog = $("<div style='width:50%;height:50%;'>\
                   <iframe id='dialogFrame'\
                   src='#'  frameborder='0'></iframe></div>");


     dialog.dialog({
      height: 220, 
      title: "Title",
      width: 500,
      modal: true,
      autoOpen: false
    });

    $('#btn1, #btn2').click(
        function(){
            var urlIndex = $(this).attr('rel');
            if(!urlIndex) return;
            $('#dialogFrame', dialog).attr('src', urls[urlIndex]);
            dialog.dialog('open');
         }
    );
    $('#btnClose').click(
        function(){
            dialog.dialog('close');
        }
    );

}); </p>

HTML:

<input type="button" id="btn1" rel="jsfiddle" value="dialog1" />
<input type="button" id="btn2" rel="hackernews" value="dialog2" />
<input type="button" id="btnClose" value="Close">​

そのため、ダイアログを切り替えて内部の HTML を変更する代わりに、常に 1 つのダイアログを使用できるようにし、表示するときに iframe の URL を設定してダイアログを表示します。

すべての URL は連想配列に保持され、クリック イベント ハンドラーはクリックされたボタンの rel-属性をチェックして、どの URL を表示するかを決定します。

理にかなっていますか？

明らかに、HTML の URL と属性、dialo プロパティを変更する必要があります。

于 2010-09-28T08:57:18.613 に答える