Open an UI Dialog on click of a button in JQuery

Question

My previous qstn in this forum was about assigning text dynamically to buttons in jquery dynamically and I got solution for that here. Now my question is, upon clicking that button, I have to open another UI dialog with 2 buttons. I have written the following code. I am able to open UI Dialog but buttons are not appearing. Pls help me to alter my code.

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    </head>
    <body>
        <div id="selector" title="Pop Up" class = "selector"> <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span> Do u want to save the score?</p> </div>
        <script>
        var monthNames = ["January", "February", "March", "April", "May", "June",                    "July", "August", "September", "October", "November", "December"];
        var today = new Date();
        var month = monthNames[today.getMonth()];
        var nextMonth = monthNames[today.getMonth() + 1];

        $(".selector").dialog({buttons: [
                {
                    text: month,
                    click: function() {
                     $("#opener").dialog({modal: true, height: 590, width: 1005 });
                        $(this).dialog("close");
                    }
                },
                {
                    text: nextMonth,
                    click: function() {
                        $(this).dialog('close');
                    }
                }
            ]});

        </script>
        <script>

          $(".opener").dialog({buttons: [
                {
                    text: "ok",
                    click: function() {
                        $(this).dialog("open");
                    }
                },
                {
                    text: "cancel",
                    click: function() {
                        $(this).dialog('open');
                    }
                }
            ]});

    </script>

    <div id="opener" title="Pop Up" class = "opener" width ="100px"> 
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
    Score will be updated</p> </div>


</body>

@ Tushar --> Since I am new to this IT field, I don't know what is fiddle. What is that? — Sanjay Malhotra
– Sanjay Malhotra, Commented Aug 13, 2013 at 6:16
Manish, After clicking the button dialog is opening. But butttons are not appearing in that dialog. — Sanjay Malhotra
– Sanjay Malhotra, Commented Aug 13, 2013 at 7:01

Dennis · Accepted Answer · 2013-08-13 06:09:35Z

3

Well, you have not specified any buttons to show in this line of code:

$("#opener").dialog({modal: true, height: 590, width: 1005 });

Maybe you wanted to intiliazie it like this, without opening:

  // did you mean to select #opener or .opener??
  $("#opener").dialog({buttons: [
        {
            text: "ok",
            click: function() {
                $(this).dialog("open");
            }
        },
        {
            text: "cancel",
            click: function() {
                $(this).dialog('open');
            }
        },
        autoOpen: false
    ]});

And then just open it in the other line from the other dialog like this:

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

answered Aug 13, 2013 at 6:09

Dennis

14.5k3 gold badges37 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sanjay Malhotra Over a year ago

Hi, I tried using the above code. Changed .opener to #opener and put $("#opener").dialog('open'); . But not working

Dennis Over a year ago

okay, i tried with your complete code in the question. With my suggestion, you need to wrap the second script statement in a $(function() { .... }); statement, so the opener dialog will be initialized on DOM ready. Then, you can open it in the click handler of your first dialog via $('#opener').dialog('open');

Sanjay Malhotra Over a year ago

I tried wrapping the script in a function. But still not working. :-(

Dennis Over a year ago

Could you please have a look at this fiddle and describe, what is not behaving as you would expect it? jsfiddle.net/94cs4

Sanjay Malhotra Over a year ago

Hey thanks a lot. It is working fine..!! I had missed a closing bracket(I didn't opened a bracket before declaring funtion). Since I am new to industry I am not much aware of syntax yet. Thanks a ton..:)

Collectives™ on Stack Overflow

Open an UI Dialog on click of a button in JQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related