jQuery and LESS, stylesheet update only works once

Question

Attempting to update a custom CSS href, which works fine the first time, but on subsequent updates no changes occur to the page. I can see the href updating in Chrome debugger, so the event is firing, and LESS is not throwing any errors, but the colors don't update the second time around.

Here's some of the code (concatenated for readability; note I'm using VS 2010, MVC4, thus less.css extension):

<link href="/Content/themes/customizable_default.less.css" id="CustomCSS" rel="stylesheet/less" type="text/css">

        <a class="ToggleButton btn-primary" CssUrl="/Content/themes/customizable_default.less.css">Default CSS</a>
        <a class="ToggleButton btn-primary" CssUrl="/Content/themes/customizable_green.less.css">Green CSS</a>
        <a class="ToggleButton btn-primary" CssUrl="/Content/themes/customizable_gray.less.css">Gray CSS</a>
        <a class="ToggleButton btn-primary" CssUrl="/Content/themes/customizable_blue.less.css">Blue CSS</a>

        <div class="ThemeBox">
            <div class="ThemeCompartment1">
                <h2>This is the title.</h2>
            </div>
            <div class="ThemeCompartment2">
                <p>A bunch of copy goes here.</p>
            </div>
        </div>

<script type="text/javascript" language="javascript">
    $(document).ready(function () {

        // choosing a template
        $('.ToggleButton').click(function (e) {
            $('link#CustomCSS').attr({ href: $(this).attr('CssUrl') });
            localStorage.clear();
            less.refresh();
        });
    });

</script>

Note that the stylesheet link resides in the header, so all markup is semantically correct (with the exception of the CssUrl attribute, of course). If I change the link href, then back again, the new values are not redrawn.

Example:

Click "Green CSS" button -> link href="/Content/themes/customizable_green.less.css" -> ThemeBox turns green.

Click "Red CSS" button -> link href="/Content/themes/customizable_red.less.css" -> ThemeBox turns red.

Click "Green CSS" button -> link href="/Content/themes/customizable_green.less.css" -> ThemeBox stays red.

I suspect this has something to do with .less caching, which is why I've added the localStorage.clear() call, but neither that nor less.refresh(true) have resolved the issue.

Any thoughts?

BTW, adding a random seed to the href doesn't help either. /Content/themes/customizable_blue.less.css?4167=noworky — kmunky, May 02 '12 at 20:07
VS/IIS7 do not play nice with .less extensions. I've added the MIME type, but IIS won't serve them. Moot anyway, .less.css are served with a side of happiness, and LESS seems perfectly content with it. It's not that LESS isn't compiling --it is; it's that I can't change the href and back again. — kmunky, May 02 '12 at 22:02

score 4 · Accepted Answer · answered May 02 '12 at 23:04

4

This is due to the way LESS seems to work. It parses the less file, and then adds a style attribute to the DOM. In practice, these seem to follow the format of the following

<style type='text/css' id='less:<<NAME OF YOUR LESS FILE>>'>
   /*your parsed content*/
</style>

The reason you're not seeing it go back is because LESS is parsing your content, finding the existing style block, and not adding it. Subsequent style blocks are being added at the end of head so you get the 'last in' version of your style.

change your function to the following:

    $('.ToggleButton').click(function (e) {
        $('style[id^="less:"]').remove();
        $('link#CustomCSS').attr({ href: $(this).attr('CssUrl') });
    less.refresh();
    });

and you should see it function the way you want.

answered May 02 '12 at 23:04

Thomas Jones

4,892
26
34

Worked like a charm, Kirean. Curious how you determined the final DOM markup? I monitor in Chrome debugger, and didn't see that at all. Also, how did you determine the LESS lifecycle? I've scoured dotlesscss- and lesscss.org and didn't see that doc anywhere. Muchos gracias. Spared me a few hundred ibuprofen today. – kmunky May 03 '12 at 16:09
@kmunky I created a virtual directory under inetpub/wwwroot and copied your code in there. I monitored the HTML elements tab in Chrome while clicking around. This may or may not hold up indefinitely, but seems to be consistent for now. As you said, it was disturbingly low on documentation. – Thomas Jones May 03 '12 at 16:32
Ah, I see the style tag now! Well played. – kmunky May 03 '12 at 16:33

jQuery and LESS, stylesheet update only works once

1 Answers1

Linked