今日の役に立たない一言 - Today’s Trifle! -

古い記事ではさまざまなテーマを書いていますが、2007年以降はプログラミング関連の話がほとんどです。

jQueryのダイアログをポップアップするとページ先頭に戻ってしまう

ログ表示画面でログのひとつをクリックすると、その詳細をダイアログで表示するようなUIを作った。画面をスクロールして下の方に表示してるログをクリックすると、ダイアログは表示されるんだけど、ページの先頭までスクロール位置が移動してしまって、ダイアログがスクロールアウトして見えなくなってしまうという問題に遭遇。

ぐぐってみたら、同じ問題で困っている人がいた。

scroll - How do I prevent scrolling to the top of a page when popping up a jQuery UI Dialog? - Stack Overflow

クリックイベントを拾ったところで false を返してやればいいらしい。
Stackoverflowのサイトで出てたコードがこれ。

$('a.closeButton').click( function() {
     $('#dialog').dialog('open');
     return false;
});

<a class='closeButton'>Close</a>

ログを表示してるテーブルの各要素に対してこの方法で実装してやることで、ダイアログを表示しても勝手にスクロールすることはなくなった。

    for (var i = 0; i < json.length; i++) {
        var log = json[i];
        var tr = $('<tr>');
        tr.append($('<td>').text(log.time));
        tr.append($('<td>').text(log.text));
        tr.click(function() {
            showDialog($(this));
            return false;
        });
        $('#log-table').append(tr);
    }