Passing values between two javascript in a html

Question

I have a case where i need to load a char based on the input from another javascript. But it doesn't work in my case. I have added the code below:

 <script type="text/javascript">
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart', 'table']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {
      var json = $.ajax({
        url: fileURL, // make this url point to the data file
        dataType: 'json',
        cahce:false,
        async: false
      }).responseText;



      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(json);
      var options = {
        title: graphTitle,
        is3D: 'true',
        width: 800,
        height: 600
      };
      var tableOptions = {
       title: 'App Listing'
     };
      // Instantiate and draw our chart, passing in some options.

      var chart = new       google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);




    }

    </script>  

and I pass the value for graphtitle and fileURL as below:

 <script type="text/javascript">
    $(document).ready(function () {
      var fileURL = "";
      var graphTitle = "";


      function showDiv() {
        if($firstCheck) {
          var selText;
          $("#dd4 li a").show(function () {
            selText = $(this).text();
          });

          if(selText !== "Factor"){
            if(selText == "IA Architecture Usage"){
              fileURL = "get_json.php";
              graphTitle = "IA Architecture Variation";
            }else if(selText ==  "Tablet to Phone"){
              fileURL = "get_tablet_support.php";
              graphTitle = "Tablet Usage Variation";

            }
          document.getElementById('chart_div').style.display = "block";
          }
        }else{
          document.getElementById('chart_div').style.display = "none";
        }



    }

 </script>

Both these javascript are within the same file. I can't pass the fileURL and graphTitle when I used the above code. Any idea how to solve this issue?

Answer 1

How about something a bit more OO oriented (not really OO, but less inline code) ? It's cleaner and easier to read/maintain ..example could still use some work, but i"m sure you get the idea.

function loadChart(title, url) {
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart', 'table']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {
      var json = $.ajax({
        url     : url, // make this url point to the data file
        dataType: 'json',
        cahce   : false,
        async   : false
      });



      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(json);
      var options = {
        title : title,
        is3D  : 'true',
        width : 800,
        height: 600
      };

      var tableOptions = {
       title: 'App Listing'
     };
      // Instantiate and draw our chart, passing in some options.

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
}

$(document).ready(function () {
    var fileURL    = "";
    var graphTitle = "";

    function showDiv() {
        if($firstCheck) {
          var selText;

          $("#dd4 li a").show(function () {
            selText = $(this).text();
          });

          if(selText !== "Factor") {
            if(selText == "IA Architecture Usage"){
              fileURL    = "get_json.php";
              graphTitle = "IA Architecture Variation";

            } else if(selText ==  "Tablet to Phone"){
              fileURL    = "get_tablet_support.php";
              graphTitle = "Tablet Usage Variation";
            }

            document.getElementById('chart_div').style.display = "block";
          }

        } else {
          document.getElementById('chart_div').style.display = "none";
        }

        loadChart(graphTitle, fileURL);
    }
}

---

btw i think you have an error in your code: .responseText seems pretty useless to me, and most likely throws an error in itself. Also i have no idea who is calling showDiv() in the code. From the example, i'd say it never fires.

Answer 2

Use global variables with window. E.g.

$(document).ready(function () {
window.fileURL = "";
window.graphTitle = "";
});

Don't specify "var" or it will only be within the scope of the function.

EDIT: Also make sure that the script in which your variables are assigned initially is before the other one.