Setting a button text dynamically in jquery

Question

I am trying to set the text of a button of a Dialog in jquery. I have 2 variables whose value will change dynamically. These values should be set to Button text. I have written the following code.

 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() { $(this).dialog("close"); }
    },
    {
        text: nextMonth,
        click: function() { $(this).dialog('close'); }
    }
] });

});

But Form Dialog is not loading. Pls help me with your valuable suggestions.

can you post an HTML snippet? My guess is you copied the code from jquery sample and didn't change the selector $( ".selector" ) — Tomer
– Tomer, Commented Aug 7, 2013 at 10:03
@ftom2 Hi.. This is the HTML body I have written. <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> </body> — Sanjay Malhotra
– Sanjay Malhotra, Commented Aug 7, 2013 at 10:47
Please update your question with the code, don't post it in the comment — Tomer
– Tomer, Commented Aug 7, 2013 at 11:19

Manoj Yadav · Accepted Answer · 2013-08-07 16:05:27Z

1

Your code is working fine, make sure you have added jquery and jquery ui reference and have selector class in your html markup, example

<div class="selector"></div>

jsFiddle

Update*

Please add http:// in your js and css reference

One page example

<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() {
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: nextMonth,
                        click: function() {
                            $(this).dialog('close');
                        }
                    }
                ]});
        </script>
    </body>
</html>

edited Aug 7, 2013 at 16:05

answered Aug 7, 2013 at 10:09

Manoj Yadav

6,6121 gold badge25 silver badges21 bronze badges

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

2 Comments

Sanjay Malhotra Over a year ago

I have added the following references Manoj.<link rel="stylesheet" href="code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="code.jquery.com/jquery-1.9.1.js"></script> <script src="code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Manoj Yadav Over a year ago

Please add http:// in your js and css reference, Answer updated with one page example

Tomer · Accepted Answer · 2013-08-07 11:21:35Z

1

Your div have id="selector" but in your jquery you call $('.selector') which is for class. So either change to:

<div class="selector"></div>

Or change your jquery code:

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

answered Aug 7, 2013 at 11:21

Tomer

17.9k16 gold badges82 silver badges139 bronze badges

Collectives™ on Stack Overflow

Setting a button text dynamically in jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related