Ytukyg

I have a page with the following select box on it:

    <form>

    <select id="themelist">

        <option value="style.less">Style 1</option>

        <option value="style-2.less">Style 2</option>

    </select>

    </form>

and this in the head:

<link rel="stylesheet/less" type="text/css" href="style.less" id="lesslink">

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js"></script>

I also have the following in my script.js:

    $("#themelist").change(function() {

    var newTheme = $("#themelist option:selected").val()

    $("#lesslink").attr({href : newTheme}); 

});

When I choose Style 2 from the dropdown, I get no errors, but it doesn't switch the style of the page. I know I'm getting into the function, and that newTheme is the right value, via alerts.

What am I missing here?

Thanks,

EDIT: After further review, it seems that going from style to style-2 enacts a few small CSS changes that are consistent, but random, and going from style-2 to style does nothing. Which now totally confuses me. This is also with using less.refresh(). Also, no errors are thrown in the console.

I found the answer in another question on SO, but I finally searched a different way and found it.

jQuery and LESS, stylesheet update only works once

had the answer, which was the following:

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 it's not loading properly is because LESS is parsing the
content, finding the existing style block, and not adding it.
Subsequent style blocks are being added at the end of head so I was
getting the 'last in' version of the style.

Once I changed the function to include the following:

$('style[id^="less:"]').remove();

before I reset the href, it worked perfectly!

To be clear, the question was different, but the answer to that question also happened to be the answer to this question in that LESS was adding its own bit of code to the end of the head that was screwing with me.