Pass parameters to .js file on document ready

Question

I have seen several people ask parts of this question and tried the various solutions but nothing seems to work. I'm not sure if it's the combination or something else in my project that is causing it to not work.

In my project I have various pages that display similar DataTables. I'm wanting to put the initialisation of these tables in one file to save duplication. But I would like to pass in parameters to account for the minor differences between e.g. column headers. Just to complicate it the initialisation is unsurprisingly done on document.ready.

Things I have tried:
Pass vars to JavaScript via the SRC attribute
http://feather.elektrum.org/book/src.html

In the code example below I never hit the second alert. What I want if for it to hit the second and third alerts and for the contents of test_var to be correct:

(cs)html file

<script>
    $(document).ready(function () {
        var test_var = "Hopefully this has worked";
        alert("Pre TestScript");
        $.getScript("TestScript.js"); // Tried different paths to the file here as well
    });
</script>

TestScript.js

alert("In the TestScript");
alert("Test variable is: " + test_var);

Perhaps I'm going about it all wrong and there is a different/simpler way to achieve the passing of parameters to a script (file) during document.ready

I think you would define functions in the `TestScript.js`, and call those functions to pass parameters, if that makes sense? — Zack, Mar 29 '16 at 13:38
https://api.jquery.com/jquery.getscript/ says the script is retrieved and executed, at the global context level, so I'm guessing it doesn't know about the test_var variable which is scoped within the `$(document).ready(function(){ ... })`. — Zack, Mar 29 '16 at 13:40

score 1 · Answer 1 · answered Mar 29 '16 at 13:41

A simplest way to do it would be (Assuming that variable name test_var is not a global variable or built-in property/method already)

<script>
    $(document).ready(function () {
        var test_var = "Hopefully this has worked";
        alert("Pre TestScript");
        window.test_var = "Hopefully this has worked";
        $.getScript("TestScript.js"); // Tried different paths to the file here as well
    });
</script>

Above I assumed that test_var will be defined inside document.ready only. Otherwise, if it was a global variable, then it can be accessed without window.

And in your TestScript.js , simply delete the variable after it has been consumed

alert("In the TestScript");
alert("Test variable is: " + test_var);
delete window.test_var;

score 0 · Answer 2 · answered Mar 29 '16 at 13:42

0

Unfortunately you cannot pass parameters to a JS file through the URL as the request to retrieve the file is not available from within JS code.

Instead you can declare variables before you include the JS file in the page which can then be read in it, something like this:

foo.html

<script>
    var test_var = "Hopefully this has worked";
</script>
<script src="testscript.js"></script>

testscript.js

console.log(test_var); // = "Hopefully this has worked"

answered Mar 29 '16 at 13:42

Rory McCrossan

306,214
37
269
303

Tried this (almost) exactly i.e. didn't worry about the document ready and it didn't work. – B_D Mar 29 '16 at 14:29

score 0 · Answer 3 · answered Mar 29 '16 at 13:45

You need to wrap your code in a function:

function testScript(test_var) {
    alert("In the TestScript");
    alert("Test variable is: " + test_var);
}

And then you can use it like this:

<script>
    $(document).ready(function () {
        var test_var = "Hopefully this has worked";
        alert("Pre TestScript");
        $('<script>')
            .attr('type', 'text/javascript')
            .attr('href', 'TestScript.js')
            .appendTo('head');
        testScript(test_var);
    });
</script>

score 0 · Answer 4 · answered Mar 29 '16 at 13:45

I think this should solve your problem. Include the TestScript.js in the html page.

(cs)html file

<script>
    $(document).ready(function () {
        var test_var = "Hopefully this has worked";
        alert("Pre TestScript");
        executeCommonScript();
    });
</script>

TestScript.js

function executeCommonScript(){
   alert("In the TestScript");
   alert("Test variable is: " + test_var);
}

score 0 · Answer 5 · answered Mar 29 '16 at 13:53

In addition to the other great solutions that have been proposed so far, a different option is to put the variables you need defined somehow in your HTML, e.g. as data-attributes,

Since you're using jQuery anyway something like this would work:

$(document).ready(function() {
  var test_var = $('.data-container').data('test-var');
  alert('Don\'t be alarmed: '+test_var);
});

.data-container {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data-container" data-test-var="This is just a test"></div>

You can access these data-attributes in any file you include, so you wouldn't have to worry about passing variables back and forth.

Of course this solution makes the most sense if you don't add a div just to hold your variables, but add data-attributes to those elements that will actually be affected by the variables

score 0 · Accepted Answer · edited May 23 '17 at 12:31

0

Many people correctly answered my question, thank you all. The problem I was having in getting it to work was that my script file that I was trying to pass parameters in to was in my Views/Shared folder which as outlined here is blocked.

Once I moved my script out of the Views folder it all worked fine. And in addition to the above answers the simplest I found was this

edited May 23 '17 at 12:31

Community

1
1

answered May 06 '16 at 11:54

B_D

195
1
13

score -1 · Answer 7 · edited Mar 29 '16 at 14:06

-1

$(document).ready(function () {
    test_var = "Hopefully this has worked";
    $.getScript("TestScript.js"); // Tried different paths to the file here as well
});

edited Mar 29 '16 at 14:06

John Slegers

38,420
17
182
152

answered Mar 29 '16 at 13:42

Umair Khan

280
3
13

It is not clear what you are trying to show here. It looks just like you copy-pasted part of the question as an answer. – Zack Mar 29 '16 at 13:44
I just removed the alert and the var keyword and update your code with this one and let me know – Umair Khan Mar 29 '16 at 13:45
That doesn't explain why you think this would work (hint, it wont). – Zack Mar 29 '16 at 13:46
This working on my machine and i am updating it to the js fiddle – Umair Khan Mar 29 '16 at 13:47

Pass parameters to .js file on document ready

7 Answers7