Why have my jQuery UI buttons reverted to outsized and generic?

Question

I've used the jQuery UI before to fancify buttons. But now with this code:

else if (ui.newTab.index() == 3) {
    $('#MediaContent').load('Content/TwainMedia.html');
    $('#MediaContent').css('background-color', '#000000');
    $('button').button();
    $("button:not(:ui-button)").button();
}

...the buttons are outsized and ugly:

enter image description here

The HTML is like so:

<div class="yearBanner">FICTION</div>
<section class="wrapper"><a class="floatLeft" 
href="https://rads.stackoverflow.com/amzn/click/com/1456405721" rel="nofollow noreferrer" target="_blank"><img height="160" 
width="107" src="http://ecx.images-amazon.com/images/I/51AxVB0JilL._SL110_.jpg" alt="The Adventures of 
Huckleberry Finn book cover"></img></a>
    <br/><cite class="nobelTitle">The Adventures of Huckleberry Finn</cite>
    <br/>
    <br/>
    <button><a href="https://rads.stackoverflow.com/amzn/click/com/0448060000" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Hardcover</a>
    </button>
    <button><a href="https://rads.stackoverflow.com/amzn/click/com/1456405721" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Paperback</a>
    </button>
    <br/>
    <br/>
    <button><a href="https://rads.stackoverflow.com/amzn/click/com/B00L4Q7OA8" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Kindle</a>
    </button>
</section>
<section class="wrapper"><a class="floatLeft" 
href="https://rads.stackoverflow.com/amzn/click/com/0486400778" rel="nofollow noreferrer" target="_blank"><img height="160" 
width="107" src="http://ecx.images-amazon.com/images/I/51qa7A+vIsL._SL110_.jpg" alt="The Adventures of 
Tom Sawyer book cover"></img></a>
    <br/><cite class="nobelTitle">The Adventures of Tom Sawyer</cite>
    <br/>
    <br/>
    <button>
        <a href="https://rads.stackoverflow.com/amzn/click/com/0486400778" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Paperback</a>
    </button>
    <br />
    <br />
    <button>
        <a href="https://rads.stackoverflow.com/amzn/click/com/B008TVDBPI" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Kindle</a>
    </button>
    <button><a href="https://rads.stackoverflow.com/amzn/click/com/B00BM7ES7G" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Audible</a>
    </button>
</section>

In _SiteLayout.cshtml, I reference the jQueryUI .js and .css like so:

<link href="~/css/excite-bike/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.3.custom.min.js"></script>

What do I need to do to get back my cool blue smaller jQuery-UI buttons?

Note: The jQuery-UI fancification is working on the tabs, as can be seen in the scream shot (the blue "excite-bike" theme is being applied to the tabs as desired).

UPDATE

My site is now live; however, the buttons on the media tab are still 9X uglier than a bag of butts.

You can see here how they looked in a previous site whose code I cannibalized for this site (in fact, I simply copied the entire site to a new folder and changed what had to be changed):

enter image description here

Again, this is the jQuery that worked in the previous site to beautify the buttons with the excite-bike theme:

$('button').button();

...and am referencing jQueryUI like so:

<link href="~/css/excite-bike/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.3.custom.min.js"></script>

...(changed "custom.min.css" to "custom.css") but it still no longer works. Why would that be?

Is the css file loading in the browser? Are the css files where you actually think they are? ~/ is the application root, which may be different than the web url root. Are the styles applying? Have you inspected what the browse thinks the styles are? — Patrick M
– Patrick M, Commented Mar 27, 2015 at 17:06
The theme is being applied to the tabs, so the CSS is being loaded, it's just not being applied to the buttons for some reason. I dragged the css file from the solution explorer into the _SiteLayout, so there's no possibility of a typo, etc. Besides, it is working in that one area. Maybe the problem is that jQuery is having a hard time working on a dynamically loaded html file. — B. Clay Shannon-B. Crow Raven
– B. Clay Shannon-B. Crow Raven, Commented Mar 27, 2015 at 17:17
Yes, that could certainly be a problem. If your content is being loaded asynchronously and your button creation is happening on document.ready(), there's a good chance that your button markup doesn't exists when the jQuery UI script triggers. Look into the .on() handler, or make a separate function that initializes your buttons and then call it after your dynamic html loader is done. — Patrick M
– Patrick M, Commented Mar 27, 2015 at 17:54

B. Clay Shannon-B. Crow Raven · Accepted Answer · 2015-03-27 20:55:53Z

1

As Jake Cigar noted on the jQuery forum thread, the call to jQuery-UI buttonize the buttons needed to come after the HTML was loaded, so this does the trick:

$('#MediaContent').load('Content/TwainMedia.html',function(){
      $('button').button();
});

answered Mar 27, 2015 at 20:55

B. Clay Shannon-B. Crow Raven

10.7k158 gold badges508 silver badges908 bronze badges

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

Collectives™ on Stack Overflow

Why have my jQuery UI buttons reverted to outsized and generic?

UPDATE

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related