Geek asks and answers

JQueryUI dialectic dialog again after closing it

I have several links on the page and I want to show separate jQuery dialogs for each of them. Here is the markup:

<html>
    <body>
        <div class="container">
            <a href="#" class="delete_link">delete</a> <!-- when this link is clicked, dialog should popup -->
            <div class="dialog_box"> <!-- this is the dialog for jquery UI -->
                 Pleasy specify a reson for your action    
                 <textarea rows="5" cols="60"></textarea>
            </div>
        </div>
        <div class="container">
            <a href="#" class="delete_link">delete</a> <!-- when this link is clicked, dialog should popup -->
            <div class="dialog_box"> <!-- this is the dialog for jquery UI -->
                 Pleasy specify a reson for your action    
                  <textarea rows="5" cols="60"></textarea>
            </div>
        </div>
    </body>
</html>

And Javascript:

$(document).ready(function() {
    $('.delete_link').click(function() {
        alert('about to show jQuery dialog!');
        var d = $(this).closest('DIV.container').find('DIV.dialog_box').dialog({
            autoOpen: false,
            title: 'You are going to delete a div!',
            buttons: {
                "Do delete": function() {
                    alert('You have entered:' + $(this).find('textarea').val());
                    $(this).dialog("close");
                    $(this).closest('DIV.container').hide(); //hiding div (primary action)     
                }
            },
            width: 800
        });
        d.dialog("open");
    });
});

As you can see, the links that trigger the event have a delete_linkclass and the DIVs, which should be jQuery UI dialogs, have a class dialog_box.

Problem: when Dialog opens and the user clicks “close”, it is not possible to open the dialog again.

google SO . , : http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ , - click(), id - .

, :

$(document).ready(function() {
    //initializing
    $('DIV.dialog_box').dialog({
        autoOpen: false,
        title: 'You are going to delete a div!',
        buttons: {
            "Do delete": function() {
                alert('You have entered:' + $(this).find('textarea').val());
                $(this).dialog("close");
                $(this).closest('DIV.container').hide(); //hiding div (primary action)     
            }
        },
        width: 800
    });

    $('.delete_link').click(function() {
        alert('about to show jQuery dialog!');
        $(this).closest('DIV.container').find('DIV.dialog_box').dialog("open");
    });
});

jsFiddle: http://jsfiddle.net/NQmhk/ jQuery UI css, , , .

.

+3
8

( "" ) .

+4

, .

"show-popup-link", .

<a href="#" class="show-popup-link">Click for popup</a>
<div class="hidden-element">Some content for the popup</div>

javascript:

function SetupShowPopupLink() {
   $("a.show-popup-link").click(function () {
      var $link = $(this);
      var dialogClone = $link.next().clone();
      $link.next().dialog({ 
         title: "title", 
         close: function () { $link.after(dialogClone); }
       });
   });
}

, , , ( ).

, , , , , , jquery-ui.

, .

+5

, jQuery div div div html- . , jQuery , , div div div.

, , , , , .

+1

- , :

<div id="dialog_box_1" class="dialog_box">
  ...
</div>

, ( №1, ):

<a href="#1" class="dialog_open">Open</a>

, click, - :

<script type="text/javascript">
    $(function() {
        $('.dialog_box').modal();

        $('.dialog_open').click(function(e) {
             e.preventDefault();
             var id = $(this).attr('href').replace('#', '');
             $('#dialog_box_' + id).dialog('open');
        });
    });
</script>

, jQuery.

, .

+1

"destroy" , . ( DIV), . "" $( "# dialog" ). ( "Destroy" ); .

+1

yes destroy: " :

$('.ui-dialog-titlebar-close').click(function(){

   $("#dialog2").dialog("destroy");

});
0

$(this).dialog("close");


$(this).dialog("destroy");
0

I use C #, MVC Partials and jQuery nested dialogs. I displayed the [second] dialog (MVC Partial) from the already displayed dialog box (MVC Partial). The dialog will be re-displayed a second time, but it will be pushed out because the old dialog container is not destroyed, compensating for the center / vertex calculation.

This deletes the dialog box, leaving the immutable dialog unchanged, and the dialog display is again cleared of previously entered data.

buttons: {
                        "Close": function () {
                            $("#MyDivPlaceholder").dialog("close");
                            $("#MyDivPlaceholder").empty();
                            $("div[aria-describedby='MyDivPlaceholder']").remove();
                        }
                    }
0
source

More articles:


All Articles