1

Is it possible to dynamicly change location of loaded CSS file? For example:

        <?php 
            require_once "../objects/edit.php";
            $editor = new EDITOR_FACTORY($db);
        ?>
        <script>
            var type = "<?php $editor->call('Type') ?>";
            var theme = "<?php $editor->call('Theme') ?>";
            $('head').append('<link rel="stylesheet" href="../resources/styles/editor_templates/'+type+'_'+theme+'" type="text/css" />');
        </script>

Something like this? I have some CSS file (templates) and I'd like to have an option change the theme without refreshing (change the CSS file source without refreshing page).

The result should be something like 

<link rel="stylesheet" type="text/css" href="../resources/styles/editor_templates/sometype_sometheme.css

Right now it's returning blank variables "type" and "theme", they probably can't take data from the function from editor class (it's working in PHP but with refresh). The thing is I am trying to delete last linked CSS file with JS and link the new one (but different, the one that user wanted, without refreshing page)
Thank you for any tips / suggestions!

Jan Kočvara
  • 81
  • 10
  • Instead of You should provide , or the shorthand = ..vars here .. ?> – Gerrit Luimstra Dec 02 '17 at 21:32
  • You're not echoing the variables inbetween the tags, so PHP doesn't 'display' them. – Gerrit Luimstra Dec 02 '17 at 21:32
  • Any ideas how to delete the link? Like you know, now I load the new CSS file but still I have to delete the one I loaded or used before... – Jan Kočvara Dec 02 '17 at 21:43
  • Here's how to [add a stylesheet using JavaScript](https://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript) and here's [how to disable a ``](https://stackoverflow.com/questions/3182840/removing-or-replacing-a-stylesheet-a-link-with-javascript-jquery) (removing it won't remove the styles from CSSOM, unless you disable them). While not an exact duplicate, your question was already answered on this website and minimal (re)search effort would have got you the answer. – tao Dec 02 '17 at 22:12
  • 1
    Possible duplicate of [Removing or replacing a stylesheet (a ) with JavaScript/jQuery](https://stackoverflow.com/questions/3182840/removing-or-replacing-a-stylesheet-a-link-with-javascript-jquery) – tao Dec 02 '17 at 22:12

1 Answers1

0

The Answer is simple, you create a function and buttons with values (like this button will open CSS file 1, this CSS file 2 etc):

<button class="loadCSS" value="1"> CSS file 1 </button>
<button class="loadCSS" value="2"> CSS file 2 </button>

and here is the magic:

var type = "<?php echo $editor->call('Type') ?>";
var theme = "<?php echo $editor->call('Theme') ?>";
$('head').append('<link id="'+ type+theme +'" rel="stylesheet" href="../resources/styles/editor_templates/'+type+'_'+theme+'.css" type="text/css" />');

$(document.body).on('click', '.loadCSS', function (e) {
   e.preventDefault();
   var buttonTheme = jQuery(this).val();
   $('#'+type+theme).remove(); 
   $('#'+type+buttonTheme).remove(); 
   $('head').append('<link id="'+ type+buttonTheme +'" rel="stylesheet" href="../resources/styles/editor_templates/'+type+'_'+buttonTheme+'.css" type="text/css" />'); 
});
Jan Kočvara
  • 81
  • 10