CODEWITHSUNDEEP
javascripthtmlcssjquery-ui
MJMacarty
MJMacarty

Reputation: 537

jquery ui button not being styled

I have a js function that inserts a form in response to a button click. At the bottom of the form is a button also added by the function. Somehow the new button does not inherit the ui css even if I add the ui-button class. Any help will be appreciated:

var addSite = function(){
var addForm ='<br><input id="site-db" class="manage-sites" type="text" placeholder="Domain" onfocus="this.placeholder=\'\'"  onblur="this.placeholder = \'Domain\'"><br>' +
'<input id="site-table" class="manage-sites" type="text" placeholder="Table" onfocus="this.placeholder=\'\'" onblur="this.placeholder = \'Table\'"><br>' +
'<input id="site-IP" class="manage-sites" type="text" placeholder="IP Address" onfocus="this.placeholder=\'\'" onblur="this.placeholder = \'IP Address\'"><br>' +
'<input id="site-Server" class="manage-sites" type="text" placeholder="Server" onfocus="this.placeholder=\'\'" onblur="this.placeholder = \'Server\'"><br>' +
'<input id="site-password" class="manage-sites" type="text" placeholder="Password" onfocus="this.placeholder=\'\'" onblur="this.placeholder = \'Password\'"><br>' +
'<button class="ui-button">Add to Datasites</button>';
$('#manage-sites').html(addForm);
}

Relevant(?) HTML. These buttons render properly:

<div id="tabs-7">
<!-- Manage Data Sites -->
<h1>Manage Data Sites</h1>
<br><br>
<button id="add-site">Add</button>
<button id="delete-site">Delete</button>
<button id="view-sites">View</button>
<div id="manage-sites" style="margin-top:20px; width:100%">

</div>
<script>
    $('#add-site').click(function(){
        addSite();  
    })

</script>


</div>

Upvotes: 1

Views: 1165

Answers (2)

filoxo
filoxo

Reputation: 8390

jQuery UI styling for a button requires more than just the ui-button class. If you inspect the source for the jQuery buttons on this demo page you'll notice that the buttons also have the following classes: 

ui-widget ui-state-default ui-corner-all

You could tackle this two ways:

1 - Add the classes manually: <button class="ui-button ui-widget ui-state-default ui-corner-all">blah</button>

2 - After the html has been appended, call jQuery UI's button() method on the newly created element (I used .find() here).

$('#manage-sites').html(addForm)
    .find('.ui-button').button();

Full Demo

$(function(){
    var addSite = function(){
        var addForm ='<br><input id="site-db" class="manage-sites" type="text" placeholder="Domain" onfocus="this.placeholder=\'\'"  onblur="this.placeholder = \'Domain\'"><br>' +
        '<input id="site-table" class="manage-sites" type="text" placeholder="Table" onfocus="this.placeholder=\'\'" onblur="this.placeholder = \'Table\'"><br>' +
        '<input id="site-IP" class="manage-sites" type="text" placeholder="IP Address" onfocus="this.placeholder=\'\'" onblur="this.placeholder = \'IP Address\'"><br>' +
        '<input id="site-Server" class="manage-sites" type="text" placeholder="Server" onfocus="this.placeholder=\'\'" onblur="this.placeholder = \'Server\'"><br>' +
        '<input id="site-password" class="manage-sites" type="text" placeholder="Password" onfocus="this.placeholder=\'\'" onblur="this.placeholder = \'Password\'"><br>' +
        '<button class="ui-button">Add to Datasites</button>';
        $('#manage-sites').html(addForm)
        	.find('.ui-button').button();
    };
    
    $('#add-site').click(function(){
        addSite(); 
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<div id="tabs-7">
<!-- Manage Data Sites -->
<h1>Manage Data Sites</h1>
<br><br>
<button id="add-site">Add</button>
<button id="delete-site">Delete</button>
<button id="view-sites">View</button>
<div id="manage-sites" style="margin-top:20px; width:100%">

</div>

Upvotes: 1

ElGavilan
ElGavilan

Reputation: 6924

You are referencing manage-sites as an ID in your div, and as a class in your generated HTML. If manage-sites is defined as an ID (i.e. #manage-sites instead of .manage-sites) in your CSS, then your div will pick up the style but your generated HTML will not.

Assign a different ID to your div, and change manage-sites to a class.

Upvotes: 1

Related Questions