Read URL From Javascript variable into HTML

Question

I have a card in my web page that reads in Automation Data and displays it in the card my the page. I am about to read in all the needed data except for the URL to the automation test summary.

Here is my code:

function Cox() {
    jQuery.ajax({
        method: "POST",
        dataType: "JSON",
        url: "http://localhost:8080/sanityTestDataCox.php",
        success: function(data) {
            console.log(data);
            var total = data[0];
            var passed = data[1];
            var failed = data[2];
            var time = data[3];
            var url = data[4];
            document.getElementById('coxTotal').innerHTML = "Total tests: " + total;
            document.getElementById('coxFailed').innerHTML = "Failed tests: " + failed;
            document.getElementById('coxPassed').innerHTML = "Passed tests: " + passed;
            document.getElementById('coxRunTime').innerHTML = "Run Time: " + time;
            document.getElementById('coxUrl').innerHTML = "url " + url;
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
<div class="card text-white bg-primary o-hidden h-100">
    <a class="card-header text-white clearfix small z-1" href="#">
        <span class="float-left">COX Sanity Run </span>
    </a>
    <div class="card-body">
        <div class="card-body-icon">
            <i class="fa fa-fw fa-tasks"></i>
        </div>
        <div id="coxTotal" class="mr-5">
            <script type="text/javascript">
                Cox();
            </script>
        </div>
        <div id="coxFailed" class="mr-5">
            <script type="text/javascript">
            Cox();
            </script>
        </div>
        <div id="coxPassed" class="mr-5">
            <script type="text/javascript">
                Cox();
            </script>
        </div>
        <div id="coxRunTime" class="mr-5">
            <script type="text/javascript">
            Cox();
            </script>
        </div>
    </div>

    <a class="card-footer text-white clearfix small z-1" href="#">
        <span class="float-left">View Details</span>
        <span class="float-right">
            <i class="fa fa-angle-right"></i>
        </span>
    </a>
</div>

When I try to load the URL into the HMTL like I did for the other 4 variables it does not seem to work correctly. Any ideas?

UPDATE:

Thank you for the helpful comments on how to clean up my code. I have aded it in and it has made it a lot cleaner. I have also found the following post that has provided a solution to my issue. Thanks

document.getElementById to include href

Putting `Cox();` like that right in your HTML doesn't call the function. As for the URL, there's no element with `id="coxUrl"` that I can see. — , Jul 10 '18 at 16:50
You don't need to try and call `Cox` for each div and in actuality should you do so you are just overwriting the div's each time the call finishes. — scrappedcola, Jul 10 '18 at 16:52

Gowri Shankar Balasubramaniam · Accepted Answer · 2018-07-11T16:46:50.667

You will get the error message as "Uncaught ReferenceError: Cox is not defined" because you are calling 'Cox()' function before define it. DOM will process line by line and during that time, the function does not exist.

I changed your code and mentioned below. it will work as you expected. :)

I called 'Cox()' function after definition. You can change the place where ever you want but after definition.

<html>
 <body>
  <div class="card text-white bg-primary o-hidden h-100">
   <a class="card-header text-white clearfix small z-1" href="#">
    <span class="float-left">COX Sanity Run </span>
   </a>
   <div class="card-body">
    <div class="card-body-icon">
     <i class="fa fa-fw fa-tasks"></i>
    </div>
    <div id="coxTotal" class="mr-5"></div>
    <div id="coxFailed" class="mr-5"></div>
    <div id="coxPassed" class="mr-5"></div>
    <div id="coxRunTime" class="mr-5"></div>
   </div>

   <a class="card-footer text-white clearfix small z-1" href="#">
    <span class="float-left">View Details</span>
    <span class="float-right">
     <i class="fa fa-angle-right"></i>
    </span>
   </a>
 </div> 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript">
  function Cox() 
  { 
   jQuery.ajax({
   method: "POST",
   dataType: "JSON",
   url: "http://localhost:8080/sanityTestDataCox.php",
   success: function (data) {
    console.log(data);
    var total = data[0];
    var passed = data[1];
    var failed = data[2];
    var time = data[3];
    var url = data[4];
    
    document.getElementById('coxTotal').innerHTML = "Total tests: " + total;
    document.getElementById('coxFailed').innerHTML = "Failed tests: " + failed;
    document.getElementById('coxPassed').innerHTML = "Passed tests: " + passed;
    document.getElementById('coxRunTime').innerHTML = "Run Time: " + time;
    document.getElementById('coxUrl').innerHTML = "url " + url;
   }
   });
  }
  Cox();
 </script>
</body>
</html>

score 0 · Answer 2 · answered Jul 10 '18 at 17:22

You should only call Cox() once: when the page loads as it targets all the divs anyway. Also, Cox() is undefined because you call it before you define it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
function Cox() {
     jQuery.ajax({
     method: "POST",
     dataType: "JSON",
     url: "http://localhost:8080/sanityTestDataCox.php",
     success: function(data) {
      console.log(data);
      var total = data[0];
      var passed = data[1];
      var failed = data[2];
      var time = data[3];
      var url = data[4];
      document.getElementById('coxTotal').innerHTML = "Total tests: " + total;
      document.getElementById('coxFailed').innerHTML = "Failed tests: " + failed;
      document.getElementById('coxPassed').innerHTML = "Passed tests: " + passed;
      document.getElementById('coxRunTime').innerHTML = "Run Time: " + time;
      document.getElementById('coxUrl').innerHTML = "url " + url;
    }
    });
    }
    window.onload = function(){
      Cox();
    }
</script>
<div class="card text-white bg-primary o-hidden h-100">
  <a class="card-header text-white clearfix small z-1" href="#">
    <span class="float-left">COX Sanity Run </span>
  </a>
  <div class="card-body">
    <div class="card-body-icon">
      <i class="fa fa-fw fa-tasks"></i>
    </div>
    <div id="coxTotal" class="mr-5">
    </div>
    <div id="coxFailed" class="mr-5">
    </div>
    <div id="coxPassed" class="mr-5">
    </div>
    <div id="coxRunTime" class="mr-5">
    </div>
  </div>

  <a class="card-footer text-white clearfix small z-1" href="#">
    <span class="float-left">View Details</span>
    <span class="float-right">
      <i class="fa fa-angle-right"></i>
    </span>
  </a>
</div>

Read URL From Javascript variable into HTML

2 Answers2