best way to pass parameters into an external js script

Question

how do i pass parameters into an external jScript using jQ?

i was able to get this working fine:

<script
     id = 'myScript' 
    data-myParm =' my value'
    src = './myScript.js' >
</script>

myScript.js:

document.getElementById('myScript').getAttribute('data-myParm')

but i thought i had seen a very easy (and better) way to do it using jQuery, and not using a script id. also i would prefer not to use anything like

<script src='./myScript.js?myParm=my%value&'> </script>

i tried something like $.data('myParm') and $('script').data('myParm') with no success.

suggestions?

a very easy (and better) way to do it using jQuery ... using jQuery is not necessarily "better" than using vanilla javascript. — JFK
– JFK, Commented Mar 8, 2015 at 19:18
maybe jQuery is not necessarily "better" but it is more fun. — edwardsmarkf
– edwardsmarkf, Commented Mar 8, 2015 at 20:47

JLRishe · Accepted Answer · 2015-03-09 00:48:08Z

1

If your scripts are being loaded synchronously, then each script will be the last script in the DOM at the time that it initially runs.

So you should be able to do this:

var param = $('script').last().data('myparm');

or equivalently:

var scripts = document.getElementsByTagName('script');
var param = scripts[scripts.length - 1].getAttribute('data-myparm');

Note that you would do this outside of any document ready handlers or anything that would execute after the script is initially loaded.

Edit: The HTML5 spec says that data-* attributes should be treated as all lowercase, and it looks like jQuery's .data(...) will only work if the provided string is all lowercase, so I suggest using all lowercase data-* attributes throughout.

edited Mar 9, 2015 at 0:48

answered Mar 8, 2015 at 19:14

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

edwardsmarkf Over a year ago

$('script').last().data('myparm') worked and thank you - i am not sure why it needed to be lowercased. maybe the data-dash requires it?

JLRishe Over a year ago

@edwardsmarkf Yeah, looks like the HTML5 spec says that data-* attributes should be treated as lowercase (link), so you're probably best off using all lowercase for them in both your HTML and your JS. BTW, the answer you accepted is a blatant copy of mine (you can check the timestamps and edit history if you doubt this). If this did indeed answer your question, would you please accept mine?

edwardsmarkf Over a year ago

Sorry - thought i did accept your answer. your answer did come through first. but either way, this is very exciting to have it working. and thank you again for helping me. for some reason, my question itself was voted down, even though i did research this issue quite a bit, and i do think this question is very relevant considering how few <script> examples there are that actually take advantage of html5 data-dash.

guest271314 · Accepted Answer · 2015-03-08 20:57:26Z

1

Try

var data = $("script").filter(function(i, el) {
   return !!$(el).data().myparm
}).data().myparm || void 0;

console.log(data)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script
    id = 'myScript' 
    data-myParm =' my value'
    src = '' >
</script>

answered Mar 8, 2015 at 20:57

guest271314

1

1 Comment

edwardsmarkf Over a year ago

}).data().myparm || void 0; - - - Uncaught TypeError: Cannot read property 'myparm' of undefined

Collectives™ on Stack Overflow

best way to pass parameters into an external js script

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related