24

The below code works fine for only the first click event. However for any subsequent click nothing happens. I tested this on firefox, ie7 but still the same. Am I missing something?

<script type="text/javascript">
$(document).ready(function() {
    //$('#dialog').dialog();
    $('#dialog_link').click(function() {
        $('#dialog').dialog();
        return false;
    });
});
</script>    
</head><body>
   <div id="dialog" title="Dialog Title" style="display:none"> Some text</div>  
   <p id="dialog_link">Open Dialog</p>  
</body></html>

6 Answers 6

30

try

$(document).ready(function () {
    //$('#dialog').dialog(); 
    $('#dialog_link').click(function () {
        $('#dialog').dialog('open');
        return false;
    });
});

there is a open arg in the last part

3
  • Sorry no luck :( I put an alert("kkh"); before $('#dialog').dialog(); and it comes fine but no window yet.
    – Sumanta
    Jun 8, 2009 at 11:50
  • 2
    check your references on the clientside, i use firebug to check that there are no 404s
    – almog.ori
    Jun 8, 2009 at 11:56
  • 1
    point @user20358 just removed the first $('#dialog').dialog();
    – almog.ori
    Feb 23, 2012 at 18:56
12

Try this

    $(function() {

$('#clickMe').click(function(event) {
    var mytext = $('#myText').val();


    $('<div id="dialog">'+mytext+'</div>').appendTo('body');        
    event.preventDefault();

        $("#dialog").dialog({                   
            width: 600,
            modal: true,
            close: function(event, ui) {
                $("#dialog").remove();
                }
            });
    }); //close click
});

And in HTML

<h3 id="clickMe">Open dialog</h3>
<textarea cols="0" rows="0" id="myText" style="display:none">Some hidden text display none</textarea>
2
  • Great solution - I liked this!
    – Guy
    Jul 6, 2009 at 1:53
  • Yeah, the .remove() function is the answer to my woes. When I was calling .close() it was causing the problem. Jan 21, 2011 at 21:20
5
$(function() {

$('#clickMe').click(function(event) {
    var mytext = $('#myText').val();

    $('<div id="dialog">'+mytext+'</div>').appendTo('body');        
    event.preventDefault();

        $("#dialog").dialog({                   
            width: 600,
            modal: true,
            close: function(event, ui) {
                $("#dialog").hide();
                }
            });
    }); //close click
});

Better to use .hide() instead of .remove(). With .remove() it returns undefined if you have pressed the link once, then close the modal and if you press the modal link again, it returns undefined with .remove.

With .hide() it doesnt and it works like a breeze. Ty for the snippet in the first hand!

1
  • If you just hide it then the #dialog div will be appended again and again
    – ymakux
    Dec 18, 2018 at 21:57
2

If you want to put some page in the dialog then you can use these

function Popup()
{
 $("#pop").load('login.html').dialog({
 height: 625,
 width: 600,
 modal:true,
 close: function(event,ui){
     $("pop").dialog('destroy');

        }
 }); 

}

HTML:

<Div id="pop"  style="display:none;">

</Div>
1

May be helpful... :)

$(document).ready(function() {
    $('#buutonId').on('click', function() {
        $('#modalId').modal('open');
    });
});
0

Try adding this line before your dialog line.

$( "#dialog" ).dialog( "open" );

This method worked for me. It seems that the "close" command messes up the dialog opening again with only the .dialog() .

Using your code as an example, it would go in like this (note that you may need to add more to your code for it to make sense):

    <script type="text/javascript">
$(document).ready(function() {
    //$('#dialog').dialog();
    $('#dialog_link').click(function() {
$( "#dialog" ).dialog( "open" );        
$('#dialog').dialog();
        return false;
    });
});
</script>    
</head><body>
   <div id="dialog" title="Dialog Title" style="display:none"> Some text</div>  
   <p id="dialog_link">Open Dialog</p>  
</body></html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.