jquery ダイアログは Firefox で正しく動作しませんが、Firebug ではエラーは表示されません。私のダイアログは Chrome で問題なく動作します。
状況: 私のページには、さまざまなイベントで開く複数の jquery ダイアログがあります。1 つの [新しい要素の追加] ダイアログで問題が発生しています。ダイアログが最初に開いたときはうまくいきました。その後、テキスト入力ボックスをクリックしたり、入力したりできませんでした。毎回ダイアログを破棄することで問題を解決したと思いました。その後、開くたびに機能しました。しかし、他のダイアログが開いていて、この「新しい要素の追加」ダイアログが開いている場合、同じことが再び起こります。ボックスに入力できません。
私は困惑しています!!!! どうか、どんな助けでも大歓迎です...私はこのコードを何日も見つめてきました。
jquery ダイアログ コードは次のとおりです。
$(function() {
$( "#dialog-new-osc-el" ).dialog({
resizable: false,
autoOpen: false,
height:300,
width:400,
modal: true,
buttons: {
"Create": function() {
*create button function stuff here* then:
$(this).dialog("destroy");
$( this ).dialog( "close" );
create_new_osc_el_dialog();
},
Cancel: function() {
$(this).dialog("destroy");
$( this ).dialog( "close" );
create_new_osc_el_dialog();
}
},
close: function() {
$(this).dialog("destroy");
$( this ).dialog( "close" );
create_new_osc_el_dialog();
}
});
});
そして、「新しい要素を追加」divをクリックするとダイアログが開きます - divにはonclick関数があります:
<div class="addnewbox" onclick="addneweltoosc();">
この onclick 関数は次のようになります (簡潔にするために一部のコードを削除しています)。
function addneweltoosc(){
$( "#dialog-new-osc-el" ).dialog( "open" );
}
ダイアログの実際の HTML はかなり長いですが、重要な点は次のとおりです。
<div id="dialog-new-osc-el" title="Create Element">
<div id="new_osc_el_type" class="pointer">
<ul>
<li onclick="new_osc_el_type_chosen('Branch');">Branch</li>
<li onclick="new_osc_el_type_chosen('Group');">Group</li>
<li onclick="new_osc_el_type_chosen('Division');">Division</li>
<li onclick="new_osc_el_type_chosen('Unit');">Unit</li>
<li onclick="new_osc_el_type_chosen('Strike Team');">Strike Team</li>
<li onclick="new_osc_el_type_chosen('Task Force');">Task Force</li>
<li onclick="new_osc_el_type_chosen('Individual Resource');">Individual Resource</li>
</ul>
</div>
<p><input class="hide" type="text" id="new_osc_el_pos_name" />
</div>
ダイアログは最初にユーザーに選択するリストを提供します。ユーザーがリスト項目をクリックすると、new_osc_el_type_chosen 関数が呼び出されます。この関数はそのリストを非表示にして、「new_osc_el_pos_name」テキスト入力を表示します。これは、ダイアログが最初に開いたときに機能する入力ボックスですが、その後は機能しません。これはコードです：
function new_osc_el_type_chosen(a)
{
$("#new_osc_el_type").addClass("hide");
$("#new_osc_el_pos_name").removeClass("hide");
if (a=="Branch")
{
$("#new_osc_el_pos_name").val("NAME of Branch Director");
}
document.getElementById("new_osc_el_pos_name").setSelectionRange(0,7);
$("#new_osc_el_pos_name").focus();
}
解決しました！
どうやら、モーダルであるすべてのダイアログがそれらの間で競合を引き起こしていた...または何か。実際、理由は100％わかりませんが、 modal:true を modal:false に変更すると問題が解決しました。