CODEWITHSUNDEEP
phpjavascriptjqueryhtmlajax
Sanjay Malhotra
Sanjay Malhotra

Reputation: 161

Setting a button text dynamically in jquery

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.

Upvotes: 2

Views: 172

Answers (2)

Manoj Yadav
Manoj Yadav

Reputation: 6612

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>

Upvotes: 1

Tomer
Tomer

Reputation: 17930

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

Upvotes: 1

Related Questions