使用jQuery對話框時如何阻止基本頁面重新加載

Question

我的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）（或看起來像重新加載頁面），這樣當我關閉對話框時，我看到的記錄是單擊的，而不必再次向下滾動。

Answer 1

讓我們看看如何在此對話框中動態加載內容

<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元素，並為open事件指定了一個回調，該回調將動態加載頁面“ Sample.htm”的內容。

多次打開和關閉對話框不會將對話框從頁面中刪除。 如果要實現close事件，請在對話框選項中使用以下代碼（未經測試的代碼）：

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

就這樣！

使用jQuery對話框時如何阻止基本頁面重新加載

問題描述

1 個解決方案

解決方案1
0 2012-12-28 01:12:19

使用jQuery對話框時如何阻止基本頁面重新加載

問題描述

1 個解決方案

解決方案1 0 2012-12-28 01:12:19

解決方案1
0 2012-12-28 01:12:19