Using document.currentScript to append data to divs

Question

I want to append data into divs by passing their id as attributes in a script tag. In this example the first-div should get get 'test1' appended to it, and the second-div should get the 'test2' appended to it.

However, the result it that both 'test1' and 'test2' are appended to second-div. first-div is empty. I'm guessing it has to do with how document.currentScript is functioning. Is there any way to get the result I am looking for?

<div id="first-div"></div>
<div id="second-div"></div>

<script attr1="name1" attr2="name2" to-div="first-div" type="text/javascript">
  var this_script = document.currentScript;
  var attr1 = this_script.getAttribute('attr1');
  var attr2 = this_script.getAttribute('attr2');
  var append_div = this_script.getAttribute('to-div');

  $.ajax({
    url: "/dir?attr1=" + attr1,
    type: 'GET',
    success: function(data) {
      $('#' + append_div).append("test1");
  });
</script>

<script attr1="name3" attr2="name4" to-div="second-div" type="text/javascript">
  var this_script = document.currentScript;
  var attr1 = this_script.getAttribute('attr1');
  var attr2 = this_script.getAttribute('attr2');
  var append_div = this_script.getAttribute('to-div');

  $.ajax({
    url: "/dir?attr1=" + attr1,
    type: 'GET',
    success: function(data) {
      $('#' + append_div).append("test2");
  });
</script>

Also, in the solution, the scripts cannot have id attributes, which is why I am trying to use document.currentScript.

The reason for this is that the code will be hosted on my servers. The code will append information into the divs the user wants, given parameters passed through attributes on the script tag. In the end the user should be able to use:

<script attr1="var1" attr2="var2" to-div="custom-div" src="http://www.myurl.com/assets/script.js" type="text/javascript"></script>

To insert data into their custom-div based on code I run on my servers dependend on the parameters attr1 and attr2 they provide.

Probably best if you just stop with this eerie approach and tell us what you're trying to achieve... — Jonathan, Sep 08 '15 at 20:54
just a question of curiosity: why is it required that you have attributes on your script tag? — indubitablee, Sep 08 '15 at 20:54
@Jonathan I provided more details on why I am trying to do this. Please, let me know if there is a better way. — Senju, Sep 08 '15 at 21:06
your code works fine [here](http://plnkr.co/edit/OcgjGeizysJsqGAbl0Gz?p=preview) — charlietfl, Sep 08 '15 at 21:10
@charlietfl Thanks, for testing the code. You're right, it does work in that instance. I think where it goes wrong is handling ajax within the script. I'll update the main post. — Senju, Sep 08 '15 at 21:22

score 3 · Accepted Answer · edited May 23 '17 at 12:06

Your problem is that var append_div is a global variable and each time a new script tag is encountered it gets overwritten with the new value.

Since ajax is asynchronous , by the time the responses return the other script tags will have been evaluated so append_div will have the value of the last script tag.

You could fix this by creating a function that wraps the ajax

function doAjax(elementId, attr1) {
    $.ajax({
        url: "/dir?attr1=" + attr1,
        type: 'GET',
        success: function (data) {
            $('#' + elementId).append("test2");
        }
    });
}

doAjax(append_div, attr1);

An even better solution as pointed out by @Rhumborl is to use an IIFE

(function( elementId, attr1){
    $.ajax({
        url: "/dir?attr1=" + attr1,
        type: 'GET',
        success: function (data) {
            $('#' + elementId).append("test2");
        }
    });
}(elementId, attr1);

Or wrap all of your code in an IIFE and no arguments would need to be passed in.

(function(){
      var this_script = document.currentScript;
      var attr1 = this_script.getAttribute('attr1');
      var attr2 = this_script.getAttribute('attr2');
      var append_div = this_script.getAttribute('to-div');

      $.ajax({
        url: "/dir?attr1=" + attr1,
        type: 'GET',
        success: function(data) {
          $('#' + append_div).append("test2");
        }
      });
}();

or an IIFE in each script to isolate the variables was gonna be my suggestion — Rhumborl, Sep 08 '15 at 21:39
@Rhumborl yes, that makes even more sense as the function won't get redeclared numerous times — charlietfl, Sep 08 '15 at 21:41
Ah, that makes sense! I'll test it as soon as I get back to my computer. Thanks. — Senju, Sep 08 '15 at 21:51
The IIFE is actually the best choice IMO, avoids re-declaring the same function numerous times — charlietfl, Sep 08 '15 at 21:52

Using document.currentScript to append data to divs

1 Answers1