0

I am using ajax to retrieve some data from json. When I put script inside the HTML it works just fine, but when I perform ajax request from JS file it doesn't work. Not sure why. I have checked that json file is in the same directory as all other files. Plus my HTML file includes the right path to my JS file. Below is the code with script within html file


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="Project.css">
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src = "Project.js"></script>
</head>
<body>

<div id="div1">
  <strong><p id="loved">Secret code</p></strong>
  <button id="button6">click me</button>
</div>
<script>
  //ajax call to retrieve json file on everydayuse page ( that works fine)
  $("#button6").click(function() {
    $.ajax({
      type:"GET",
      url:"package.json",
      dataType:"json",
      success:function(result) {
        $("#div1").html("");
        $("#div1").append("Use code to receive free shipping:" + "<h3 style='color:deeppink'>"+ result.name+
                "</h3>" + "By:" + "<h3 style='color: deeppink'>"+result.date+ "</h3>");
      }
    });
  });
</script>

</body>

</html>
user2611
  • 1
  • you're probably loading the script file before `button6` exists in the DOM, so that click handler never gets called ... jqueery doesn't even warn you if `$("#button6")` results in NO elements - one of the MANY stupidities of jqueery – Bravo May 05 '22 at 03:52
  • realized that i needed separate js file in order for that call to work – user2611 May 05 '22 at 03:59

0 Answers0