CODEWITHSUNDEEP
c#javascriptjqueryhtmlasp.net
sony
sony

Reputation: 1503

How to stop asp.net page reload when selecting a jquery dialog?

dialog

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.

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

The jquery for showing it as a pop up is as below:

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

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?

The rendered HTML is below:

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

Upvotes: 3

Views: 1924

Answers (3)

Denis Ali
Denis Ali

Reputation: 1062

After some research, it seems this is a bug on the jQuery UI library.

Notice in this first demo that the version is 1.10.X (<script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.js"></script> on the top right pane) and causes the same behavior you're experiencing (it will not load the iframe, but you'll see the effect on the browser loading icon).

However on this second demo it's using version 1.8.X (fiddle's version) and it's not causing the refresh.

If you're using latest version, try to downgrade to version 1.8.X and see if solves the problem. If it does, open a jQuery UI ticket bug to the guys on jQuery.

Upvotes: 1

B2K
B2K

Reputation: 2611

There are quite a few issues with your approach. Consider just using divs instead of the iframe. You can load the div using jQuery's load command: $(this).next("div").load(this.id+".aspx");

Of course, you'll need to pare your customer.aspx and product.aspx pages down to just the form and it's contents.

Here is some sample code:

$(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
   });
});

Upvotes: 0

Michael Coxon
Michael Coxon

Reputation: 5510

Your iframe's are inside the a's. This will cause the a's click event to fire. To fix this I would suggest putting the iframe's outside of the a's.

If you cannot, a simple addition to your JS should do it...

$("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';
});

Upvotes: 0

Related Questions