使用jQuery对话框时如何阻止基本页面重新加载

Question

I've got the following code on my editRecords.php page. 我的editRecords.php页面上有以下代码。 This page is a table of records and when I cick the view link it opens a dialog box with the displayRecord.php page in it. 该页面是一个记录表，当我单击视图链接时，它将打开一个对话框，其中包含displayRecord.php页面。 The problem is if I open the last record in the table instead of the dialog box opening/closing and the editRecords.php page remaining as is, it appears to reload which takes me back to the top of the page. 问题是，如果我打开表中的最后一条记录而不是打开/关闭对话框，并且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');
         });

      });

});

I have tried using e.preventDefault() but this causes the dialog box to load with focus in the middle instead of the top. 我尝试使用e.preventDefault()但这会导致对话框加载时将焦点放在中间而不是顶部。

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

How can fix/adjust this behaviour? 如何解决/调整这种行为？

Thanks. 谢谢。

CLARIFICATION: e.preventDefault() works but the problem is it causes the dialog to load with the focus in the middle. 澄清： e.preventDefault()可以工作，但问题是它导致对话框加载焦点位于中间的对话框。 I have no problem opening or closing the dialog. 我没有问题打开或关闭对话框。 I just want to stop the base page(editRecords.php) from reloading (or what appears to be like a page reload) so that when I close the dialog I see the record I clicked instead of having to scroll down again. 我只想阻止重新加载基本页面（editRecords.php）（或看起来像重新加载页面），这样当我关闭对话框时，我看到的记录是单击的，而不必再次向下滚动。

Answer 1

Let us see how to load content dynamically inside this Dialog 让我们看看如何在此对话框中动态加载内容

<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>

As you can see, we are creating a div element on the fly and specifying a callback for the open event, which loads the content of the page 'Sample.htm' dynamically. 如您所见，我们正在动态创建一个div元素，并为open事件指定了一个回调，该回调将动态加载页面“ Sample.htm”的内容。

Opening and closing the dialog multiple times will not remove the dialog from the page. 多次打开和关闭对话框不会将对话框从页面中删除。 If you want to implement the close event, use this code in the dialog options (untested code): 如果要实现close事件，请在对话框选项中使用以下代码（未经测试的代码）：

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

That's all! 就这样！

使用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