logo标签列表

如何在选择jQuery对话框时停止ASP.NET页面重新加载？

c#javascriptjqueryhtmlasp.net
3

dialog

我使用jquery ui对话框来显示各种表单，如客户、产品等。这是通过在另一个div中显示包含aspx页面的iframe，并将此div显示为对话框来完成的。下面的结构是动态创建的。

<div id="Div1" runat="server" class="menu">
    <ul>
        <li>
            <a id="customer"></a>
                <div>
                    <iframe id="frame_customer"></iframe>
                </div>
         </li>
        <li>
            <a id="product"> </a>

                <div>
                    <iframe id="frame_product"></iframe>
                </div>
         </li>

    </ul>
</div>

将其显示为弹出窗口的jQuery代码如下：

<script>
    jQuery(function ($) {
        $("a").each(function () {
            $.data(this, 'dialog',
              $(this).next("div").dialog({
                  resizable: false,
                  autoOpen: false,
                  modal: false,
                  title: this.id,
                  width: 900,
                  height: 590,
                  position: ['middle', 150],
                  draggable: true,
                  open: function (event, ui) {
                      $(this).parent().children().children(".ui-dialog-titlebar-close").hide();
                  },

                  buttons: {
                      "Exit": function () {
                          $(this).dialog("close");
                      }
                  },
              })
            );
        }).click(function (event) {
            $.data(this, 'dialog').dialog('open');
            event.preventDefault();
            document.getElementById('frame_' + this.id).src = this.id + '.aspx';
            return false;
        });
    });

    $(document).ready(function () {
        $("iframe").attr("scrolling", "no");
        $("iframe").attr("frameborder", "0");
    });

</script>

现在，我的问题是，每当我通过点击选择另一个对话框时，之前的表单就会刷新，我失去了这个表单上所有的更改和选择。那么，在切换表单时如何停止页面回发？
以下是呈现的HTML：
<!DOCTYPE html>
<html>
<head>
    <title>
        DiaryGold
    </title>
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/jquery-ui.js"></script>
    <link href="Scripts/themes/jquery-ui.css" rel="stylesheet" />
    <link href="Scripts/themes/jquery-ui.min.css" rel="stylesheet" />
    <link href="Scripts/themes/jquery.ui.theme.css" rel="stylesheet" />
    <link href="Scripts/Site.css" rel="stylesheet" />
    <link rel="stylesheet" href="Scripts/style.css" type="text/css" />

    <style>
        body {
            background-image: url('images/AppBG.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-color: #0b0535;
            min-height: 100%;
            width: 99%;
        }

        html {
            height: 100%;
        }


        .header {
            position: relative;
            margin: 0px;
            padding: 0px;
            color: #d8e8ff;
            width: 100%;
        }

            .header h1 {
                margin: 0px;
                padding: 0px 0px 0px 0px;
                color: #BF0413;
                border: none;
                line-height: 42px;
                font-size: 42px;
                display: inline;
            }

        .main {
            padding: 0px 12px;
            margin: 12px 8px 8px 8px;
            min-height: 800px;
        }

        .framestyle {
            width: 100%;
            height: 100%;
            background-color: #d8e8ff;
        }


        #header {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
        }


        .center {
            display: table;
            margin: 0 auto;
            position: relative;
            width: 100%;
            z-index: 10;
        }

        .menu {
            position: relative;
            float: left;
            width: 100%;
            width: 100%;
            height: 32px;
            background-color: #383838;
        }

        div {
            opacity: 0.95;
        }

        .ui-widget-content {
            border: 1px solid darkgray;
            background: none;
            color: #2c4359;
        }

        .ui-front {
            z-index: 1 !important;
        }
    </style>


    <script>


        jQuery(function ($) {
            $("a").each(function () {
                $.data(this, 'dialog',
                  $(this).next("div").dialog({
                      resizable: false,
                      autoOpen: false,
                      modal: false,
                      title: this.id,
                      width: 900,
                      height: 590,

                      position: ['middle', 150],
                      draggable: true,
                      open: function (event, ui) {
                          $(this).parent().children().children(".ui-dialog-titlebar-close").hide();
                      },

                      buttons: {
                          "Exit": function () {
                              $(this).dialog("close");
                          }
                      }
                  })

                );

            }).click(function (event) {
                if (this.id != '#') {
                    $.data(this, 'dialog').dialog('open');
                    document.getElementById('frame_' + this.id).src = this.id + '.aspx';
                    return false;
                }
            });
        });

        $(document).ready(function () {
            $("iframe").attr("scrolling", "no");
            $("iframe").attr("frameborder", "0");
        });

    </script>

</head>

<body>

    <div class="center">

        <div id="menu1" class="menu">
            <ul id="nav">
                <li>
                    <a id="#">Log Samples</a>
                    <div id="#"><iframe class="framestyle" id="frame_#"></iframe> </div>
                    <ul>
                        <li>
                            <a id="#">Commercial</a>
                            <div id="#"><iframe class="framestyle" id="frame_#"></iframe> </div>
                            <ul>
                                <li>
                                    <a id="LogSamples">Log Samples</a>
                                    <div id="LogSamples"><iframe class="framestyle" id="frame_LogSamples"></iframe> </div>
                                </li>
                                <li>
                                    <a id="Customers">Customers</a>
                                    <div id="Customers"><iframe class="framestyle" id="frame_Customers"></iframe> </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                <li>
                    <a id="#">Admin</a>
                    <div id="#"><iframe class="framestyle" id="frame_#"></iframe> </div>
                    <ul>
                        <li>
                            <a id="LabUsers">Lab Users</a>
                            <div id="LabUsers"><iframe class="framestyle" id="frame_LabUsers"></iframe> </div>
                        </li>
                        <li>
                            <a id="LabRoles">Lab Roles</a>
                            <div id="LabRoles"><iframe class="framestyle" id="frame_LabRoles"></iframe> </div>
                        </li>
                        <li>
                            <a id="ScreenForRoles">ScreenForRoles</a>
                            <div id="ScreenForRoles"><iframe class="framestyle" id="frame_ScreenForRoles"></iframe> </div>
                        </li>
                    </ul>
            </ul>
        </div>

    </div>

    <div id="header">
        <div style="width: 100%;">
            <div class="MainTitle" style="position: relative; float: right;">
                <img src="images/diarygold-logo.gif" height="65" />
            </div>
            <div class="MainTitle" style="position: relative; float: left; vertical-align: central; line-height: 80px; margin-top: 25px;">

                <img alt="" class="auto-style1" src="images/LIMSLogo.png" height="40" />

            </div>
        </div>
    </div>


</body>
</html>
1
你可能在 Page_Load 上调用了清除数据的任何方法。请检查一下 Page_Load。 - Bharadwaj
1
我看到你同时使用了event.preventDefault()和return false。两者都是做同样的事情，所以有点重复了。 - valentin
你的意思是你想打开多个客户对话框吗？ - MikeSmithDev
@Mike 我动态创建iframes并为其赋予动态名称。这意味着将会有frame_customer、frame_products等。 - sony
让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/48818/discussion-between-sony-and-mikesmithdev - sony
显示剩余8条评论
3个回答
1

经过一些研究, 看起来这是jQuery UI库中的一个错误。

请注意在这个第一个演示中，版本是1.10.X（<script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.js"></script> 在右上方窗格），并且会导致您正在经历的相同行为（它不会加载iframe，但您将在浏览器加载图标上看到效果）。

然而，在这个第二个演示中，它使用的是版本1.8.X（fiddle的版本），并且不会导致刷新。

如果您正在使用最新版本，请尝试降级到版本1.8.X，看看是否解决了问题。如果是，请向jQuery团队打开一个jQuery UI错误票。

非常感谢您，那是1.9.1版本中的一个错误。我改用1.8.3版本，现在它运行得非常好。我已经研究了几个星期关于这个问题，最终解决了...我非常感激您。 - sony
0

你的 iframe 在 a 标签内部。这会导致 a 的点击事件被触发。为了解决这个问题，建议将 iframe 放在 a 标签外面。

如果无法这样做，可以通过简单地修改 JS 代码来解决问题...

$("a").each(function () {
    $.data(this, 'dialog',
      $(this).next("div").dialog({
          resizable: false,
          autoOpen: false,
          modal: false,
          title: this.id,
          width: 900,
          height: 590,
          position: ['middle', 150],
          draggable: true,
          open: function (event, ui) {
              $(this).parent().children().children(".ui-dialog-titlebar-close").hide();
          },

          buttons: {
              "Exit": function () {
                  $(this).dialog("close");
              }
          },
       })
    );

    // stop the click event from moving up the chain
    $('#frame_' + this.id).click(function(event) {
        event.stopImmediatePropagation();
    });

}).click(function (event) {
    $.data(this, 'dialog').dialog('open');
    event.preventDefault();
    document.getElementById('frame_' + this.id).src = this.id + '.aspx';
});
实际上，这些框架是在a标签之外的，我在问题中描述错误了...我尝试了第二个选项，但不起作用... - sony
0

你的方法存在一些问题。考虑使用 div 替代 iframe。你可以使用 jQuery 的 load 命令来加载 div：$(this).next("div").load(this.id+".aspx");

当然，你需要将 customer.aspx 和 product.aspx 页面简化成仅包含表单及其内容。

以下是一些示例代码：

$(this).next("div").load(this.id+".aspx", function() {
   // this is now the div
   $('form',this).submit(function(e) {
       // validate here (this is the form)
       e.preventDefault();
       $.ajax($(this).attr("action"),$(this).serialize());
       // close the dialog here
   });
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接