title: How to stop asp.net page reload when selecting a jquery dialog?
body: <p><img src="https://i.stack.imgur.com/SyQuG.png" alt="dialog"></p>
  
  <p>I use jquery ui dialog to display the various forms like customer, products etc. Its done by displaying the aspx page inside an iframe which is inside another div and showing this div as the dialog. This structure below is created dynamically.</p>
  
  <pre><code>&lt;div id="Div1" runat="server" class="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a id="customer"&gt;&lt;/a&gt;
                  &lt;div&gt;
                      &lt;iframe id="frame_customer"&gt;&lt;/iframe&gt;
                  &lt;/div&gt;
           &lt;/li&gt;
          &lt;li&gt;
              &lt;a id="product"&gt; &lt;/a&gt;
  
                  &lt;div&gt;
                      &lt;iframe id="frame_product"&gt;&lt;/iframe&gt;
                  &lt;/div&gt;
           &lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The jquery for showing it as a pop up is as below:</p>
  
  <pre><code>&lt;script&gt;
      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");
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Now, my problem is that, whenever I select another dialog by clicking, the previous form gets refreshed and I loose all changes and selections on this form. So how can I stop postback when switching between the forms?</p>
  
  <p>The rendered HTML is below:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;
          DiaryGold
      &lt;/title&gt;
      &lt;script src="Scripts/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;link href="Scripts/themes/jquery-ui.css" rel="stylesheet" /&gt;
      &lt;link href="Scripts/themes/jquery-ui.min.css" rel="stylesheet" /&gt;
      &lt;link href="Scripts/themes/jquery.ui.theme.css" rel="stylesheet" /&gt;
      &lt;link href="Scripts/Site.css" rel="stylesheet" /&gt;
      &lt;link rel="stylesheet" href="Scripts/style.css" type="text/css" /&gt;
  
      &lt;style&gt;
          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;
          }
      &lt;/style&gt;
  
  
      &lt;script&gt;
  
  
          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");
          });
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="center"&gt;
  
          &lt;div id="menu1" class="menu"&gt;
              &lt;ul id="nav"&gt;
                  &lt;li&gt;
                      &lt;a id="#"&gt;Log Samples&lt;/a&gt;
                      &lt;div id="#"&gt;&lt;iframe class="framestyle" id="frame_#"&gt;&lt;/iframe&gt; &lt;/div&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;a id="#"&gt;Commercial&lt;/a&gt;
                              &lt;div id="#"&gt;&lt;iframe class="framestyle" id="frame_#"&gt;&lt;/iframe&gt; &lt;/div&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;
                                      &lt;a id="LogSamples"&gt;Log Samples&lt;/a&gt;
                                      &lt;div id="LogSamples"&gt;&lt;iframe class="framestyle" id="frame_LogSamples"&gt;&lt;/iframe&gt; &lt;/div&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a id="Customers"&gt;Customers&lt;/a&gt;
                                      &lt;div id="Customers"&gt;&lt;iframe class="framestyle" id="frame_Customers"&gt;&lt;/iframe&gt; &lt;/div&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;li&gt;
                      &lt;a id="#"&gt;Admin&lt;/a&gt;
                      &lt;div id="#"&gt;&lt;iframe class="framestyle" id="frame_#"&gt;&lt;/iframe&gt; &lt;/div&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;a id="LabUsers"&gt;Lab Users&lt;/a&gt;
                              &lt;div id="LabUsers"&gt;&lt;iframe class="framestyle" id="frame_LabUsers"&gt;&lt;/iframe&gt; &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a id="LabRoles"&gt;Lab Roles&lt;/a&gt;
                              &lt;div id="LabRoles"&gt;&lt;iframe class="framestyle" id="frame_LabRoles"&gt;&lt;/iframe&gt; &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a id="ScreenForRoles"&gt;ScreenForRoles&lt;/a&gt;
                              &lt;div id="ScreenForRoles"&gt;&lt;iframe class="framestyle" id="frame_ScreenForRoles"&gt;&lt;/iframe&gt; &lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div id="header"&gt;
          &lt;div style="width: 100%;"&gt;
              &lt;div class="MainTitle" style="position: relative; float: right;"&gt;
                  &lt;img src="images/diarygold-logo.gif" height="65" /&gt;
              &lt;/div&gt;
              &lt;div class="MainTitle" style="position: relative; float: left; vertical-align: central; line-height: 80px; margin-top: 25px;"&gt;
  
                  &lt;img alt="" class="auto-style1" src="images/LIMSLogo.png" height="40" /&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>