ロードコールバック後にjQuery UIダイアログのタイトルを変更


111

このUIダイアログでフォームを送信した後、UIダイアログからタイトルを変更したい。だからload私は提案した後のコールバック関数で、私は結果なしで試しグーグルしました。

誰かアイデアはありますか?

回答:


258

ダイアログメソッドの使用:

$('.selectorUsedToCreateTheDialog').dialog('option', 'title', 'My New title');

または直接、ハッキーですが:

$("span.ui-dialog-title").text('My New Title'); 

今後の参考のために、jQueryを使用してgoogleをスキップできます。ほとんどの場合、jQuery APIが質問に答えます。この場合は、ダイアログAPIページです。メインライブラリの場合:http : //api.jquery.com


8
上記の「ハッキー」バージョンでは、ページ上のすべてのダイアログのタイトルが変更されることに注意してください(複数作成した場合)。
camainc 2013

1
複数のオプションを渡すことができますか?
themhz 2013

3
@themis現在のバージョンには、.option()オブジェクトを取得するメソッドもあります。options(options)ここを参照してください:api.jqueryui.com/dialog/#method-option
Nick Craver

$( "#dialog")。dialog({autoOpen:false、show:{effect: "blind"、duration:1000}、hide:{effect: "explode"、duration:1000}、close:function(){; }、title: "test"})。dialog( "open");
WhiteWolfza 2016年

私の答えは今でも多くの注目を集めているので、ここにも投稿します。.stackoverflow.com
Igor L.

14

私はより簡単な解決策を見つけました:

$('#clickToCreate').live('click', function() {
     $('#yourDialogId')
         .dialog({
              title: "Set the title to Create"
         })
         .dialog('open'); 
});


$('#clickToEdit').live('click', function() {
     $('#yourDialogId')
         .dialog({
              title: "Set the title To Edit"
         })
         .dialog('open'); 
});

お役に立てば幸いです。


3

Nick Craverによるハックなアイデアの拡張により、jqueryダイアログタイトルにカスタムHTMLを配置します。

var newtitle= '<b>HTML TITLE</b>';
$(".selectorUsedToCreateTheDialog").parent().find("span.ui-dialog-title").html(newtitle);

必要がないときはハックしない方がいいです。また、jtitleで承認された方法でHTMLタイトルを設定する方法があります。つまり、_titleメソッドをオーバーライドします。:それは、すでにこのSOの答えでカバーされていますstackoverflow.com/questions/14488774/...
cincodenada

2

私はニックの結果を実装しようとしました:

$('.selectorUsedToCreateTheDialog').dialog('option', 'title', 'My New title');

しかし、1ページに複数のダイアログがあったため、それは私にはうまくいきませんでした。このような状況では、タイトルを初めて正しく設定するだけです。コマンドをホチキス止めしようとしてもうまくいきませんでした:

    $("#modal_popup").html(data);
    $("#modal_popup").dialog('option', 'title', 'My New Title');
    $("#modal_popup").dialog({ width: 950, height: 550);

ページの各ダイアログのJavaScript関数の引数にタイトルを追加することで、これを修正しました。

function show_popup1() {
    $("#modal_popup").html(data);
    $("#modal_popup").dialog({ width: 950, height: 550, title: 'Popup Title of my First Dialog'});
}

function show_popup2() {
    $("#modal_popup").html(data);
    $("#modal_popup").dialog({ width: 950, height: 550, title: 'Popup Title of my Other Dialog'});
}

0

さらに良い!

    jQuery( "#dialog" ).attr('title', 'Error');
    jQuery( "#dialog" ).text('You forgot to enter your first name');

最初の行はダイアログのタイトルを変更しません。jQuery UIダイアログにはそのような属性はありません。2つ目はダイアログ自体の内容を変更しますが、それはユーザーが求めていたものではありません。そしてそれはid、よる対話のがであると仮定してい#dialogます。
Pere
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.