JavaScript in DNN

Question

I've been trying to add JavaScripts to a website while using DNN (which I've been using for two weeks). I'm currently on version 07.04.00 (353). I've tried to paste my scripts inside the header in Page Settings -> Advanced Settings and the header in the Module Settings -> Advanced Settings, but it doesn't seem to work. I've posted one of the scripts I want to use below.

<script>
    var radiobtnType = "ensidig";
    var radiobtnOrient = "S";
    var radiobtnHeatCap = "100";
    //var tsvfilepath = data/ensidig_S_100.tsv

    $(".btnType").click(function () {
        radiobtnType = $(this).data('id');
        update_box();
        //var idPaaDenButtonDerBlevTrykketPaa = $(this).text() + $(this).data('id')
        //alert(idPaaDenButtonDerBlevTrykketPaa);
    });
    $(".btnOrientation").click(function () {
        radiobtnOrient = $(this).data('id');
        update_box();
    });
    $(".btnHC").click(function () {
        radiobtnHeatCap = $(this).data('id');
        update_box();
    });

    function update_box() {
        document.getElementById("foo2").value = "data/" + radiobtnType + "_" + radiobtnOrient + "_" + radiobtnHeatCap + ".tsv";
        document.getElementById("pwd").value = "data/" + radiobtnType + "_" + radiobtnOrient + "_" + radiobtnHeatCap + ".tsv";
    }
</script>

Answer 1

EDIT:

If you use DNN 4.9.1 or above, jquery is included (http://www.dnnsoftware.com/community-blog/cid/135141/dotnetnuke-tips-and-tricks-11-using-jquery-in-dotnetnuke). Meaning you just need to add document ready wrapping (or $(function() { /* code goes here */ }); as adviced in the dnn link).

--

First make sure your page includes jQuery. If not, include it e.g. by using a cdn:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Second, wrap your code inside jQuery's ready()-function (see https://learn.jquery.com/using-jquery-core/document-ready/).

<script>
$(document).ready(function() {

    var radiobtnType = "ensidig";
    var radiobtnOrient = "S";
    var radiobtnHeatCap = "100";
    //var tsvfilepath = data/ensidig_S_100.tsv

    $(".btnType").click(function () {
        radiobtnType = $(this).data('id');
        update_box();
        //var idPaaDenButtonDerBlevTrykketPaa = $(this).text() + $(this).data('id')
        //alert(idPaaDenButtonDerBlevTrykketPaa);
    });
    $(".btnOrientation").click(function () {
        radiobtnOrient = $(this).data('id');
        update_box();
    });
    $(".btnHC").click(function () {
        radiobtnHeatCap = $(this).data('id');
        update_box();
    });

    function update_box() {
        document.getElementById("foo2").value = "data/" + radiobtnType + "_" + radiobtnOrient + "_" + radiobtnHeatCap + ".tsv";
        document.getElementById("pwd").value = "data/" + radiobtnType + "_" + radiobtnOrient + "_" + radiobtnHeatCap + ".tsv";
    }

});
</script>