CODEWITHSUNDEEP
javascriptjqueryhtmljsonajax
Jared
Jared

Reputation: 175

passing javascript attribute to javascript function

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.

Upvotes: 0

Views: 113

Answers (3)

Jared
Jared

Reputation: 175

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();
          }
      });

  });

Upvotes: 0

tempranova
tempranova

Reputation: 937

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');
} );

Upvotes: 2

Mithun Shreevatsa
Mithun Shreevatsa

Reputation: 3609

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

Upvotes: 0

Related Questions