passing javascript attribute to javascript function

Question

I am struggling to figure out how to pass a <div id> to another javascript. For example, at the start of my page I have the following script which creates a div id tag that allows me to dynamically select and change content of the page.

  $(document).ready(function() {

      $("select").change(function() {
          var subFolder = $(this).val();
          $('#folderName').text(subFolder);
          $('#stats').attr('src', '/hardware/' + subFolder + '/stats/usage.txt');
          $('#hostInfo').attr('src', '/hardware/' + subFolder + '/stats/host.txt');
          $('#folderContent').show();
      });

      $.ajax({
          url: 'getFolders.php',
       type: 'GET',
       dataType: 'json',
       success: function(json) {
            var $selectBox = $('#folderList');
            $.each(json, function(i, value) { 
              $selectBox.append($('<option>').text(value).attr('value', value));
            });
            $selectBox.change();
          }
      });

  });

This allows me to do the following - this creates a selector that a particular folder can be selected.

<div class="hidden-print">
<select id='folderList'></select>
</div>

When the folder list is selected above it allows me to change content like the items below:

like the above to another java script.

$(document).ready(function() {
$('#example3').DataTable( {

    "processing": true,
    "ajax": {
        "url" : "../../reports/drives.txt",
        "dataSrc" : ""
    },  
    "columns": [
        { "data": "Hostname.Name" },
        { "data": "Name"}
    ]
} );
} );

When i select a folder above from the selector i would like the folder under the URL under the AJAX to be modified along with it to update it.

UPDATE

After looking at this a bit further I don't think my explanation fit very well.

  $(document).ready(function() {
      $("select").change(function() {
          var subFolder = $(this).val();
     $('#folderName').text(subFolder);
          $('#folderLogo').attr('src', '/server/' + subFolder + '/Logo/hardware.png');
          $('#folderContent').show();
      });

      $.ajax({
          url: 'getFolders.php',
       type: 'GET',
       dataType: 'json',
       success: function(json) {
            var $selectBox = $('#folderList');
            $.each(json, function(i, value) { 
              $selectBox.append($('<option>').text(value).attr('value', value));
            });
            $selectBox.change();
          }
      });

  });
var thisId = $('folderList').attr('id');

I want to take this variable which should be a single folder and use it on a script like the one below.

var subFolder = $(this).val();
     $('#folderName').text(subFolder);
          $('#folderLogo').attr('src', '/server/' + subFolder + '/Logo/hardware.png');

I would like to take the "subfolder" and use it something like the following:

$(document).ready(function() {
$('#example3').DataTable( {

    "processing": true,
    "ajax": {
        "url" : "/server/" +  subfolder + "/Stats/Map.txt",
        "dataSrc" : ""
    },  
    "columns": [
        { "data": "Hostname.Name" },
        { "data": "Name"}
    ]
} );
} );

I tried to get the method below to get a div id conversion and it doesn't have any data when i try it that way. I should have stated i want to use the variable in the sub folder in the script above... I tried a window.variable name i have tried the global variable and still nothing seems to be working correctly. My guess is that the way the variable is being processed is not carrying over.

if the js scripts resides on the same folder you can add a global variable for the id and this is accessible by other js files — Anonymous Duck
– Anonymous Duck, Commented Mar 7, 2016 at 6:43

tempranova · Accepted Answer · 2016-03-07 07:10:25Z

2

You can access the id using $('#folderList').attr('id').

Assign that to a variable and pass it into your function. If you are loading a separate script using $(document).ready(), it may not be available unless it's a global variable.

Something like this might do the trick for you.

var thisId = $('#folderList').attr('id');
$(document).ready(function() {
    $('#'+thisId).append('whatever');
} );

edited Mar 7, 2016 at 7:10

answered Mar 7, 2016 at 6:45

tempranova

9379 silver badges14 bronze badges

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

6 Comments

Jared Over a year ago

i am a bit confused on where you would add this? before the first script getting the folder list... right now i can get the thisId in the path but it shows up with nothing available. 127.0.0.1/hardware/undefined/reports/… Failed to load resource: the server responded with a status of 404 (Not Found)

tempranova Over a year ago

Added a little fix to the code. Maybe this helps you? jsbin.com/lakoyon/edit?html,output

Jared Over a year ago

i still can't seem to get this to work - when i try the jsbin that you put together - it keeps showing undefined value for folder list. It doesn't throw an error other than the URL it states undefined.

tempranova Over a year ago

Is the div on the page programmatically, or do you put that #folderList div on the page with jQuery? It's possible that the javascript runs before the div loads. Can you make a bin with your code all together so I can debug it?

Jared Over a year ago

jsfiddle.net/jtlutgen/cmgd4uo9/2 - let me know what you think. Comments were added inline.

|

Mithun Shreevatsa · Accepted Answer · 2016-03-07 06:50:20Z

0

You can also pass it inside jQuery function using window.variable = value that will be considered as a global variable for that window object.

answered Mar 7, 2016 at 6:50

Mithun Shreevatsa

3,65310 gold badges59 silver badges106 bronze badges

Comments

Jared · Accepted Answer · 2016-03-07 20:25:37Z

With your help i was able to diagnose and find the issue. When the variable is outside of the function it doesn't run. By adding it into the document.ready function it will keep the variable through changes of the dropdown. Then finding that because there are multiple initializations of the data-tables structure - i have to add the "destroy" flag = true. This destroys the old datatables and allows a new one to be created after you change the folder.

 $(document).ready(function() {
      $("select").change(function() {
          var subFolder = $(this).val();
          $('#folderName').text(subFolder);
          $('#folderLogo').attr('src', '/hardware/' + subFolder + '/Logo/hardware.png');
          $('#hdstats').attr('src', '/hardware/' + subFolder + '/hdstats/hdstats.csv');
          $('#folderContent').show();



$('#example3').DataTable( {
    "destroy": true,
    "processing": true,
    "ajax": {
        "url" : "/hardware/" +  subFolder + "/hdstats/stats.txt",
        "dataSrc" : ""
    },  
    "columns": [
        { "data": "Hostname.Name" },
        { "data": "Name"}
    ]
} );
   });

      $.ajax({
          url: 'getFolders.php',
       type: 'GET',
       dataType: 'json',
       success: function(json) {
            var $selectBox = $('#folderList');
            $.each(json, function(i, value) { 
              $selectBox.append($('<option>').text(value).attr('value', value));
            });
            $selectBox.change();
          }
      });

  });

Collectives™ on Stack Overflow

passing javascript attribute to javascript function

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related