Custom close button for jQuery dialog?

javascript jquery html asp.net

14,873

Solution 1

The problem is as Irvin says, each element must have a unique id attribute.

When you call $("#LabUsers").dialog('close');, $("#LabUsers") refers to the a, not the div, and your dialog is associated with the div not the a.

Example:

<a id="apple" data-fruit="apple">aaaaa</a>
<div id="apple" data-fruit="orange">bbbbb</div>

var fruit = $('#apple').data('fruit');
console.log(fruit); // returns 'apple'

http://jsfiddle.net/R5Kht/

Update

It's a bit difficult to determine what your ultimate goal is, but here is an example that uses generic event handlers. I tried to comment it enough to make it understandable. http://jsfiddle.net/Hsn76/3/

HTML

<!-- the data-target attribute defines the selector for the element that will host the dialog -->
<a class="openDialog" href="javascript:;" data-target="#apple">Apple</a> 

<a class="openDialog" href="javascript:;" data-target="#banana">Banana</a>

<div id="apple" class="hidden">
    <a class="closeButton" href="javascript:;">Close Dialog</a>
    <!-- the data-src attribute defines the iframe's source, but the contents are not actually loaded until the dialog 'open' event occurs -->
    <iframe class="dialog-iframe" data-src="http://blog.jsfiddle.net/"></iframe>
</div>

<div id="banana" class="hidden">
    <a class="closeButton" href="javascript:;">Close Dialog</a>
    <iframe class="dialog-iframe" data-src="http://doc.jsfiddle.net/"></iframe>
</div>

JS

// generic handler to open a dialog
$(document).on('click', '.openDialog', function(e) {   
    var target = $(this).data('target');
    $(target).dialog('open');
});


// generic event handler to close any dialog containing
// an element decorated with the closeButton class
$(document).on('click','.closeButton', function(e) {
    // find the dialog that contains this .closeButton
    var $dialog = $(this).parents('.ui-dialog-content');
    $dialog.dialog('close');
});

// create the dialogs
$('#apple,#banana').dialog({    
        // http://api.jqueryui.com/dialog/
        // the close button can be hidden via CSS & dialogClass setting 
    dialogClass: 'no-close', 
    resizable: false,
    autoOpen: false,
    modal: false,
    width: 'auto',
    height: 'auto',    
    draggable: true,
    beforeClose: function( event, ui ) {
       // call your code that triggers your save
       // if you need to interact with the iframe, maybe try this:
       // http://stackoverflow.com/a/3407632/740639
       alert('saving data...');        
    },    
    open: function (event, ui) {       
        // load the iframe's src when the dialog is opened
        var $iframe = $(this).children('iframe');
       if(!$iframe.attr('src')) {
          var src = $iframe.data('src');
          $iframe.attr('src', src);
       }
    }
});

Solution 2

add this event when you intialize the dialog

beforeClose:function(event,ui){ }

example:

$(this).next("div").dialog({
   ...
   beforeClose:function(event,ui){ 
        //your code to save data
   }
});

Solution 3

I guess you are asking for a way to add a close button to your jQuery dialog box dynamically and then attach a click event such that they close your dialog box.

Give an attribute data-id to your <a> element and give the same data-id to the element to which your close event is delegated.

HTML:

......
.....
<a data-id="#LabUsers">Lab Users</a>
<div id="LabUsers">
     <iframe class="framestyle" id="frame_LabUsers"></iframe> 
</div>
......
.....

JS:

$("a").each(function () {
  var data_id = $(this).data('id');
  $.data(this, 'dialog',
    $(this).next("div").dialog({
     ....

     create: function (event, ui) {
        $('.ui-dialog-titlebar').css({'background':'none','border':'none'});
        $(".ui-dialog-titlebar").html('<a href="#" role="button"><span class="myCloseIcon" data-id="'+data_id+'">close</span></a>');
     },
         .....
         .....

 });
    //Event handler to close dialog
    $("span.myCloseIcon").click(function() {
        $($(this).data('id')).dialog( "close" ); //$('#LabUsers').dialog('close') for data-id #LabUsers
    });
});

14,873

Author by

sony

Updated on June 05, 2022

Comments

sony almost 2 years

I am using jQuery daialog for showing the forms in an ASP.net application.

Screenshot of application

Everything is working fine. I need to place a custom close button on each form so that when they click this button, I can save the record from code behind. I don't want to use the jQuery built in Exit button. The code for creating the dialog is below:

jQuery(function (e) {
            $("a").each(function () {
                e.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 != '#') {
                    document.getElementById('frame_' + this.id).src = this.id + '.aspx';
                    e.data(this, 'dialog').dialog('open');                    
                    return false;
                }
            });        

        });

The code I use for closing the dialog :

  function CloseDialog()
    {
        $("#LabUsers").dialog('close');
    }

is not working.

The entire code for parent page is below:

    <!DOCTYPE html>
<html>
<head>
    <title>

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


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

function CloseDialog(id)
    {
        $(id).dialog('close');
    }


    </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;">
                           </div>
            <div class="MainTitle" style="position: relative; float: left; vertical-align: central; line-height: 80px; margin-top: 25px;">

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

</body>
</html>

The code for the child form is below:

    <%@ Page Title="About Us" Language="C#" AutoEventWireup="true" CodeBehind="LabRoles.aspx.cs" Inherits="Company.LabRoles" %>
<!doctype html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8">
    <title></title>

    <script src="../View/Content/JScript/jquery-1.7.2.js"></script>
    <script src="../View/Content/JScript/jquery-ui.js"></script>
    <link href="../View/Content/themes/jquery-ui.css" rel="stylesheet" />
    <link href="../View/Content/Styles/Site.css" rel="stylesheet" />
    <link href="../View/Content/themes/jquery.ui.theme.css" rel="stylesheet" /> 


    <script>

        function CloseThisForm()
        {
            parent.CloseDialog("#LabRoles");
        }

    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div style="height: 510px; margin: 16px;">
            <div style="height: 450px; background: none;">
                <div style="text-align: left;">
                    <asp:TextBox ID="txtSearch" runat="server" />
                    <asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" CssClass="button" />
                    <asp:HiddenField ID="hdnvalue" runat="server" ClientIDMode="Static" />
                </div>
                <br />
                <asp:GridView ID="gvRoles" runat="server" AutoGenerateColumns="False" BackColor="#d8e8ff" Width="100%"
                    RowStyle-Height="20" OnPageIndexChanging="gvRoles_PageIndexChanging" DataKeyNames="WM_RoleId"
                    EmptyDataText="There are no data records to display." OnRowDataBound="gvRoles_RowDataBound"
                    AllowPaging="true" ForeColor="Black"
                    OnSelectedIndexChanged="gvRoles_SelectedIndexChanged" PageSize="15">

                    <Columns>
                        <asp:BoundField DataField="WM_RoleName" HeaderText="Role Name" HeaderStyle-HorizontalAlign="Center"
                            ItemStyle-HorizontalAlign="Left" ItemStyle-Width="100">
                            <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
                        </asp:BoundField>
                    </Columns>
                </asp:GridView>

            </div>

            <div style="text-align: center; height: 20px;">

                <asp:Button ID="Button1" OnClientClick ="CloseThisForm(); return false;"  runat="server" Text="Close" />
                <asp:Button ID="btnInsert" runat="server" Text="Add New" CssClass="button" />
                <asp:Button ID="BtnDelete" runat="server" Text="Delete" CssClass="button" OnClientClick="return confirm('Do you want to delete this record? Click OK to proceed.');"
                    OnClick="BtnDelete_Click" />
                <asp:Button ID="btnEdit" runat="server" Text="Details" Visible="true"
                    CssClass="button" />

            </div>
        </div>
    </form>
</body>
</html>

Irvin Dominin about 10 years

I think it's related, but id attribute must be unique. With the current code you'll close only one dialog #LabUsers I think you want something more generic?
sony about 10 years

Hi Irvin, I need to call a close function from the child forms. Yes a generic function which accepts the id of the child form to be closed.
Irvin Dominin about 10 years

From what button/function do you plan to call CloseDialog() function? Can you provide a demo on jsfiddle?
sony about 10 years

hi Irvin I have updated the code

sony about 10 years

Hi Walter, the first portion of the answer is what I am looking for.... and that was my problem. I changed the id of the "a" tag to something different and I could accomplish what I am looking for... Thanks for your answer
sony about 10 years

Hi Aditya, your answer was also helpful... Thanks for that. I wished to give 50 points to you and 50 points to Walter Stabosz. But unfortunately its not possible to split the bounty points. However, I express my sincere gratitude for taking time to give a good answer...