0

editRecords.php ページに次のコードがあります。このページはレコードのテーブルであり、ビュー リンクをクリックすると、displayRecord.php ページを含むダイアログ ボックスが開きます。問題は、ダイアログ ボックスを開いたり閉じたりして、editRecords.php ページをそのままにしておく代わりに、テーブルの最後のレコードを開くと、リロードされてページの先頭に戻るように見えることです。

$(document).ready(function() { 

     //creating a dialog box
     var dlg=$('#ticketDetails').dialog({
        title: 'Ticket Details',
        resizable: false,
        autoOpen:false,
        modal: true,
        hide: 'fade',
        width: 1300

     });

    //loading dialog box with record
    $('a.view').click(

    function(e) 
    {
         dlg.load('displayRecord.php?id='+this.id, function(){ 
         dlg.dialog('open');
         });

      });

});

使用してみe.preventDefault()ましたが、これにより、ダイアログ ボックスの上部ではなく中央にフォーカスが置かれます。

function(e) 
        {
                 //tested here e.preventDefault();
             dlg.load('displayRecord.php?id='+this.id, function(){ 
             dlg.dialog('open');
             });
         //tested here e.preventDefault();

この動作を修正/調整するにはどうすればよいですか?

ありがとう。

明確化: e.preventDefault()動作しますが、問題はダイアログが中央にフォーカスを置いて読み込まれることです。ダイアログを開いたり閉じたりしても問題ありません。ベースページ（editRecords.php）のリロード（またはページのリロードのように見えるもの）を停止して、ダイアログを閉じたときに、もう一度下にスクロールする代わりにクリックしたレコードが表示されるようにしたいだけです。

4

1 に答える 1

0

このダイアログ内でコンテンツを動的にロードする方法を見てみましょう

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Load Page Dynamically inside a jQuery UI Dialog</title>
<link rel="Stylesheet" type="text/css" href="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css
" />
<script  type="text/javascript" src="
http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>
<script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js">
</script>

<script type="text/javascript">
    $(function ()    {
        $('<div>').dialog({
            modal: true,
            open: function ()
            {
                $(this).load('Sample.htm');
            },         
            height: 400,
            width: 400,
            title: 'Dynamically Loaded Page'
        });
    });
</script>
</head>
<body>

</body>
</html>

ご覧のとおり、div 要素をオンザフライで作成し、「Sample.htm」ページのコンテンツを動的にロードする open イベントのコールバックを指定しています。

ダイアログを複数回開いて閉じても、ダイアログはページから削除されません。close イベントを実装する場合は、ダイアログ オプションで次のコードを使用します (テストされていないコード)。

close: function(e, i) { $(this).close(); }

それで全部です！

于 2012-12-28T01:12:19.740 に答える