Personnalisé bouton fermer pour jQuery dialogue?

Je suis à l'aide de jQuery daialog pour l'affichage de la forme dans une ASP.net application.

Tout fonctionne bien. J'ai besoin de placer une coutume bouton de fermeture sur chaque formulaire, de sorte que quand ils cliquent sur ce bouton, je peux l'enregistrer à partir de code derrière. Je ne veux pas utiliser le jQuery intégré dans le bouton de Sortie. Le code pour créer la boîte de dialogue ci-dessous:

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

        });

Le code que j'utilise pour fermer la boîte de dialogue :

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

ne fonctionne pas.

Le code entier de la page parent est ci-dessous:

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

Le code de l'enfant du formulaire ci-dessous:

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

Je pense que c'est lié, mais l'id de l'attribut être unique. Avec le code actuel, vous allez fermer une boîte de dialogue #LabUsers je pense que vous voulez quelque chose de plus générique?
Salut Irvin, j'ai besoin d'appeler une fonction de fermeture de l'enfant, les formes. Oui une fonction générique qui accepte l'id du formulaire enfant à être fermé.
À partir de ce bouton/fonction envisagez-vous d'appeler CloseDialog() la fonction? Pouvez-vous fournir une démo sur jsfiddle?
salut Irvin j'ai mis à jour le code

OriginalL'auteur sony | 2014-04-30

Le problème est que Irvin dit, chaque élément doit être unique id attribut.

Lorsque vous appelez $("#LabUsers").dialog('close');, $("#LabUsers") se réfère à la a, pas la div, et votre dialogue est associée à la div pas le a.

Exemple:

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

Mise à jour

C'est un peu difficile à déterminer ce que votre objectif ultime est, mais voici un exemple qui utilise le générique des gestionnaires d'événements. J'ai essayé de commenter, il suffit à la rendre compréhensible.
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);
}
}
});

Salut Walter, la première partie de la réponse est ce que je suis à la recherche d'.... et que c'était mon problème. J'ai changé l'id de la "une" balise à quelque chose de différent et j'ai pu accomplir ce que je cherche... Merci pour votre réponse

OriginalL'auteur Walter Stabosz

ajouter cet événement lorsque vous initialiser la boîte de dialogue

beforeClose:function(event,ui){ }

exemple:

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

OriginalL'auteur G Ravinder

Je suppose que vous vous demandez quels sont un moyen d'ajouter un close bouton à votre jQuery boîte de dialogue dynamique et alors
joindre un événement de clic, tels qu'ils fermez votre dialog boîte.

Donner un attribut data-id à votre <a> élément et donnent les mêmes data-id à l'élément auquel votre événement close est déléguée.

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

Salut Aditya, votre réponse a également été utile... Merci pour ça. J'ai voulu donner 50 points pour vous et 50 points de Walter Stabosz. Mais malheureusement, ce n'est pas possible de diviser les points de prime. Cependant, je tiens à exprimer ma sincère gratitude pour avoir le temps de donner une bonne réponse...

OriginalL'auteur Aditya

Vous devez vous connecter pour publier un commentaire.