How can I replace script src inside of theme html with another script?

Question

I'm working on a small theme settings panel and need to adjust its settings. The theme have many rickshaw, d3 and flot charts so it's styled inside js scripts, not through css files. The builder swaps overall theme css styles without problem with jQquery, but the problem is in flots and charts that stays unchanged. So I tried to replace script src with another script, but without success.

If any of you knows some simple solution for replacing script src inside html file on specific element click, it would be great. That can be very handy for theme settings panel too... Explanation Video here: https://www.youtube.com/watch?v=6cl9XNYdP7g&feature=youtu.be

Update:

I tried with document.getElementById but without success too .

UPDATED settings.js

var site_settings = '<div class="ts-button">'
        +'<span class="fa fa-cog fa-spin"></span>'
    +'</div>'
    +'<div class="ts-body">'
        +'<div class="ts-title">Options</div>'
        +'<div class="ts-row">'
            +'<label class="check"><input type="checkbox" class="icheckbox" name="st_head_fixed" value="1"/> Fixed Header</label>'
        +'</div>'
        +'<div class="ts-row">'
            +'<label class="check"><input type="checkbox" class="icheckbox" name="st_sb_fixed" value="1" checked/> Fixed Sidebar</label>'
        +'</div>'
        +'<div class="ts-row">'
            +'<label class="check"><input type="checkbox" class="icheckbox" name="st_sb_scroll" value="1"/> Scroll Sidebar</label>'
        +'</div>'
        +'<div class="ts-row">'
            +'<label class="check"><input type="checkbox" class="icheckbox" name="st_sb_right" value="1"/> Right Sidebar</label>'
        +'</div>'
        +'<div class="ts-row">'
            +'<label class="check"><input type="checkbox" class="icheckbox" name="st_sb_custom" value="1"/> Custom Navigation</label>'
        +'</div>'
        +'<div class="ts-row">'
            +'<label class="check"><input type="checkbox" class="icheckbox" name="st_sb_toggled" value="1"/> Toggled Navigation</label>'
        +'</div>'
        +'<div class="ts-title">Layout</div>'
        +'<div class="ts-row">'
            +'<label class="check"><input type="radio" class="iradio" name="st_layout_boxed" value="0" checked/> Full Width</label>'
        +'</div>'
        +'<div class="ts-row">'
            +'<label class="check"><input type="radio" class="iradio" name="st_layout_boxed" value="1"/> Boxed</label>'
        +'</div>'
        +'<div class="ts-title">Themes</div>'
        +'<div class="ts-themes">'
            +'<a href="#" class="active" data-theme="css/theme-goblin.css"><img src="img/themes/green.png"/></a>'            
            +'<a href="#" data-theme="css/theme-forest.css"><img src="img/themes/brown.png"/></a>'
            +'<a href="#" data-theme="css/theme-dark.css"><img src="img/themes/dark.jpg"/></a>'                        
            +'<a href="#" data-theme="css/theme-night.css"><img src="img/themes/night.jpg"/></a>'            
            +'<a href="#" data-theme="css/theme-serenity.css"><img src="img/themes/serenity.jpg"/></a>'




        +'</div>'
    +'</div>';

var settings_block = document.createElement('div');
    settings_block.className = "theme-settings";
    settings_block.innerHTML = site_settings;
    document.body.appendChild(settings_block);

$(document).ready(function(){

    /* Default settings */
    var theme_settings = {
        st_head_fixed: 0,
        st_sb_fixed: 1,
        st_sb_scroll: 1,
        st_sb_right: 0,
        st_sb_custom: 0,
        st_sb_toggled: 0,
        st_layout_boxed: 0
    };
    /* End Default settings */

    set_settings(theme_settings,false);    

    $(".theme-settings input").on("ifClicked",function(){

        var input   = $(this);

        if(input.attr("name") != 'st_layout_boxed'){

            if(!input.prop("checked")){
                theme_settings[input.attr("name")] = input.val();
            }else{            
                theme_settings[input.attr("name")] = 0;
            }

        }else{
            theme_settings[input.attr("name")] = input.val();
        }

        /* Rules */
        if(input.attr("name") === 'st_sb_fixed'){
            if(theme_settings.st_sb_fixed == 1){
                theme_settings.st_sb_scroll = 1;
            }else{
                theme_settings.st_sb_scroll = 0;
            }
        }

        if(input.attr("name") === 'st_sb_scroll'){
            if(theme_settings.st_sb_scroll == 1 && theme_settings.st_layout_boxed == 0){
                theme_settings.st_sb_fixed = 1;
            }else if(theme_settings.st_sb_scroll == 1 && theme_settings.st_layout_boxed == 1){
                theme_settings.st_sb_fixed = -1;
            }else if(theme_settings.st_sb_scroll == 0 && theme_settings.st_layout_boxed == 1){
                theme_settings.st_sb_fixed = -1;
            }else{
                theme_settings.st_sb_fixed = 0;
            }
        }

        if(input.attr("name") === 'st_layout_boxed'){
            if(theme_settings.st_layout_boxed == 1){                
                theme_settings.st_head_fixed    = -1;
                theme_settings.st_sb_fixed      = -1;
                theme_settings.st_sb_scroll     = 1;
            }else{
                theme_settings.st_head_fixed    = 0;
                theme_settings.st_sb_fixed      = 1;
                theme_settings.st_sb_scroll     = 1;
            }
        }
        /* End Rules */

        set_settings(theme_settings,input.attr("name"));
    });

    /* Change CSS Theme */
    $(".ts-themes a").click(function(){
        $(".ts-themes a").removeClass("active");
        $(this).addClass("active");
        $("#theme").attr("href",$(this).data("theme"));
        return false;
    });
    /* END Change CSS Theme */

    /* Change JS Theme */
    $(".ts-themes a").click(function() {
    var theme = $(this).data("theme");
    $("script#graphs-theme").attr("src", theme);
    })
    /* END Change JS Theme */


    /* Open/Hide Settings */
    $(".ts-button").on("click",function(){
        $(".theme-settings").toggleClass("active");
    });


    /* End open/hide settings */
});





function set_settings(theme_settings,option){

    /* Start Header Fixed */
    if(theme_settings.st_head_fixed == 1)
        $(".page-container").addClass("page-navigation-top-fixed");
    else
        $(".page-container").removeClass("page-navigation-top-fixed");    
    /* END Header Fixed */

    /* Start Sidebar Fixed */
    if(theme_settings.st_sb_fixed == 1){        
        $(".page-sidebar").addClass("page-sidebar-fixed");
    }else
        $(".page-sidebar").removeClass("page-sidebar-fixed");
    /* END Sidebar Fixed */

    /* Start Sidebar Fixed */
    if(theme_settings.st_sb_scroll == 1){          
        $(".page-sidebar").addClass("scroll").mCustomScrollbar("update");        
    }else
        $(".page-sidebar").removeClass("scroll").css("height","").mCustomScrollbar("disable",true);

    /* END Sidebar Fixed */

    /* Start Right Sidebar */
    if(theme_settings.st_sb_right == 1)
        $(".page-container").addClass("page-mode-rtl");
    else
        $(".page-container").removeClass("page-mode-rtl");
    /* END Right Sidebar */

    /* Start Custom Sidebar */
    if(theme_settings.st_sb_custom == 1)
        $(".page-sidebar .x-navigation").addClass("x-navigation-custom");
    else
        $(".page-sidebar .x-navigation").removeClass("x-navigation-custom");
    /* END Custom Sidebar */

    /* Start Custom Sidebar */
    if(option && option === 'st_sb_toggled'){
        if(theme_settings.st_sb_toggled == 1){
            $(".page-container").addClass("page-navigation-toggled");
            $(".x-navigation-minimize").trigger("click");
        }else{          
            $(".page-container").removeClass("page-navigation-toggled");
            $(".x-navigation-minimize").trigger("click");
        }
    }
    /* END Custom Sidebar */

    /* Start Layout Boxed */
    if(theme_settings.st_layout_boxed == 1)
        $("body").addClass("page-container-boxed");
    else
        $("body").removeClass("page-container-boxed");
    /* END Layout Boxed */

    /* Set states for options */
    if(option === false || option === 'st_layout_boxed' || option === 'st_sb_fixed' || option === 'st_sb_scroll'){        
        for(option in theme_settings){
            set_settings_checkbox(option,theme_settings[option]);
        }
    }
    /* End states for options */

    /* Call resize window */
    $(window).resize();
    /* End call resize window */
}

function set_settings_checkbox(name,value){

    if(name == 'st_layout_boxed'){    

        $(".theme-settings").find("input[name="+name+"]").prop("checked",false).parent("div").removeClass("checked");

        var input = $(".theme-settings").find("input[name="+name+"][value="+value+"]");

        input.prop("checked",true);
        input.parent("div").addClass("checked");        

    }else{

        var input = $(".theme-settings").find("input[name="+name+"]");

        input.prop("disabled",false);            
        input.parent("div").removeClass("disabled").parent(".check").removeClass("disabled");        

        if(value === 1){
            input.prop("checked",true);
            input.parent("div").addClass("checked");
        }
        if(value === 0){
            input.prop("checked",false);            
            input.parent("div").removeClass("checked");            
        }
        if(value === -1){
            input.prop("checked",false);            
            input.parent("div").removeClass("checked");
            input.prop("disabled",true);            
            input.parent("div").addClass("disabled").parent(".check").addClass("disabled");
        }        

    }
}

SK. · Answer 1 · 2015-07-03T12:18:53.753

0

Did you try something as below to change the src tag value? Assuming you want to change src attribute value onclick of button.

function changeScriptSrc() {
    var scripts = document.getElementsByTagName("script");
    for ( var i = 0; i < scripts.length; ++ i ) {
       if ( scripts [i].src = "myfile1.js" ) {
          scripts [i].src = "new js file path";
          break;
       }
    }
}

<button onclick="changeScriptSrc();">Change Script Src</button>

edited Jul 03 '15 at 12:18

answered Jul 03 '15 at 11:04

SK.

4,174
4
30
48

Mike, That will do I think, but I need to fire up on element click – kriky Jul 03 '15 at 11:43
@kriky - on which element you want to call the below code? – SK. Jul 03 '15 at 11:55
@kriky I have updated the answer with `onclick` event. – SK. Jul 03 '15 at 11:58
+'' this part changes the css, so I need to scange on tag – kriky Jul 03 '15 at 12:05
your code is valid and I see now how to do it, i'll try now. – kriky Jul 03 '15 at 12:07
Updated my answer based on the comments here – Hubert Grzeskowiak Jul 03 '15 at 12:08
@kriky Add `onclick` attribute inside `a` tag. – SK. Jul 03 '15 at 12:10
This solution suffers from a few flaws: 1. jQuery's click() is better than onclick (see http://stackoverflow.com/questions/12627443/jquery-click-vs-onclick) 2. you search for a certain src which you need to know beforehand and you set it to a hardcoded value 3. you search through ALL script elements without a break – Hubert Grzeskowiak Jul 03 '15 at 12:15

Hubert Grzeskowiak · Answer 2 · 2015-07-03T12:07:50.293

0

First off, styling in JS is evil. Even more so if you have no functionality to switch it. Changing an element's src attribute can have many side-effects and is a hell to debug.

You can always style things based on CSS properties, even if it's SVG or canvas. In SVG you can simply reference the elements as if they were HTML except you use the attribute names as CSS properties. So for example, there is no "background-color" but "full" and instead of "color" you want to use "stroke-color" or the like in most cases. In worst case you read the right CSS values from within JS manually by creating temporary hidden elements and reading their CSS properties. To update the values you'd repaint the images.

If you still insist on changing an element's src this should do it:

<script src="themes/blue.js" id="graphs-theme"></script>
....
<a href="#" class="themeswitch" data-theme="css/theme-forest.css">Link</a>
<script>
$(".themeswitch").click(function() {
    var theme = $(this).data("theme");
    $("script#graphs-theme").attr("src", theme);
})
</script>

edited Jul 03 '15 at 12:07

answered Jul 03 '15 at 11:54

Hubert Grzeskowiak

15,137
5
57
74

Maybe I didn't explain what I', trying to achieve so here is video https://www.youtube.com/watch?v=6cl9XNYdP7g&feature=youtu.be When I click on links in settings panel that changes only the css styling in html but the charts and maps that are styled through js keeps the same color. So this is the core of the problem. I will update the main question with code... – kriky Jul 03 '15 at 14:18
If you can, target the source of the problem: the imperative styling in JS. In case the JS is not from you and you can't edit it, I'd write a JS function that strips all inline styles from it and apply a nice CSS styling. – Hubert Grzeskowiak Jul 03 '15 at 14:39
Also please don't process JS switching the same way as CSS switching. You should differentiate either the anchors or look for certain anchors in the selector for the onClick event. E.g. $(".themeswitch[data-theme-css]").click(...) – Hubert Grzeskowiak Jul 03 '15 at 14:42
this is the sample how it is styled. The all javascript code is in one single file. This is the excerpt https://jsfiddle.net/bydesigno/dh1tmp41/ – kriky Jul 03 '15 at 15:09
So I thought that it would be simpler to just swap the src with another edited js file – kriky Jul 03 '15 at 15:11
https://jsfiddle.net/bydesigno/xe5fdrvc/ can this be styled through external css stylesheet – kriky Jul 05 '15 at 10:52
Looks like morris is still in early development and therefor supports little to no sane customization. You could however, style the parts of the donut nonetheless using their positions, like e.g. .donut > path:nth-of-type(3) {fill: #f00;} for coloring the 3rd path element. – Hubert Grzeskowiak Jul 14 '15 at 12:20

Arumoy Roy · Answer 3 · 2015-07-03T12:43:08.000

-1

document.getElementById("button").onclick=function(){ 
          document.getElementById("sc").src = "bcd";
            document.getElementById("divs").innerHTML=document.getElementById("sc").src ;
        };

        document.getElementById("divs").innerHTML=document.getElementById("sc").src;

            <html>
            <head>

            <script id="sc" src="abc"></script>

            </head>
            <body>
              <button id ="button"> click to change script src</button>
            <div id="divs"></div>

            </body>

            </html>

edited Jul 03 '15 at 12:43

answered Jul 03 '15 at 11:06

Arumoy Roy

108
12

I have edited my answer for your requirement. Now it is called on button click. please see. – Arumoy Roy Jul 03 '15 at 12:41

How can I replace script src inside of theme html with another script?

3 Answers3