CODEWITHSUNDEEP
javascriptjqueryhtmlajax
ZenoX
ZenoX

Reputation: 11

Loading Data From A Specific URL Using Ajax

I am new to javascript and ajax and having some serious trouble getting data to be displayed in a HTML document using the correct javascript code. I need to have the data from a specific web address displayed on the HTML document. Can anyone point me in the right direction?

application.js

function load_test(list_item) {
  var list = list_item.find('dl');
  var promise = $.ajax('http://www.ehustudent.co.uk/hallm/cis1007api/student-feedback/test' + list_item.data('id'));
  promise.done(function(data) {
  for(var idx = 0; idx < data.length; idx++) {
  list.append('<dt>' + data[idx].id + '</dt>');
  list.append('<dd>' + data[idx].studentnr + '</dd>');
  list.append('<dd>' + data[idx].name + '</dd>');
  list.append('<dd>' + data[idx].feedback + '</dd>');
    }
  });
}

index.html

<html>
<head>
<link rel="stylesheet" href="style.css"/>
<script src="jquery.min.js"></script>
<script src="application.js"></script>
  </head>
  <body>
    <div class="row">
  <div class="column small-12">
    <h1>Feedback</h2>
      </div>
</div>
<ol class="feedback">
  <li class="row">
        <div class="column small-12 large-10">
      <h2>Student Name Goes Here</h2>
    </div>
    <div class="column small-12 large-2 text-right">
      <a href="#">(delete)</a>
    </div>
    <div class="column small-12">
      <p>Student Feedback Goes Here</p>
    </div>
  </li>
</ol>
    </ol>
<form id="add_feedback" action="#">
  <div class="row">
    <div class="column small-12 large-6">
      <label>Name
        <input type="text" name="name" placeholder="Enter your name here"/>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="column small-12 large-6">
      <label>Feedback
        <textarea name="feedback" placeholder="Please provide some useful and constructive feedback"></textarea>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="column small-12 large-6 text-right">
      <input type="submit" value="Add Feedback"/>
    </div>
  </div>
</form>

Any help would be greatly appreciated. Thanks!

Upvotes: 0

Views: 155

Answers (2)

Basem
Basem

Reputation: 261

You have mistakes in you HTML + Javascript code: HTML: there is must remove it

JavsSctipt:

  1. you don't have [dl] element in your HTML
  2. [list_item.data('id')] this code return undefined value, so your URL not working as well, you must get the correct id.
  3. You didn't call your function [load_test], so you can't see the results

Upvotes: 0

Basem
Basem

Reputation: 261

Try this code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
function load_test(list_item) {
  var list = list_item.find('li');
  var promise = $.ajax('http://www.ehustudent.co.uk/hallm/cis1007api/student-feedback/test' );
  promise.done(function(data) {
    console.log(data);
  for(var idx = 0; idx < data.length; idx++) {
  list.append('<dt>' + data[idx].id + '</dt>');
  list.append('<dd>' + data[idx].studentnr + '</dd>');
  list.append('<dd>' + data[idx].name + '</dd>');
  list.append('<dd>' + data[idx].feedback + '</dd>');
    }
  });
}
$(function(){
  load_test($('.feedback'));
});
</script>
</head>
  <body>
  <div class="row">
  <div class="column small-12">
    <h1>Feedback</h2>
      </div>
</div>
<ol class="feedback">
  <li class="row">
        <div class="column small-12 large-10">
      <h2>Student Name Goes Here</h2>
    </div>
    <div class="column small-12 large-2 text-right">
      <a href="#">(delete)</a>
    </div>
    <div class="column small-12">
      <p>Student Feedback Goes Here</p>
    </div>
  </li>
</ol>
<form id="add_feedback" action="#">
  <div class="row">
    <div class="column small-12 large-6">
      <label>Name
        <input type="text" name="name" placeholder="Enter your name here"/>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="column small-12 large-6">
      <label>Feedback
        <textarea name="feedback" placeholder="Please provide some useful and constructive feedback"></textarea>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="column small-12 large-6 text-right">
      <input type="button" onclick="tex" value="Add Feedback"/>
    </div>
  </div>
</form>
</body>
</html>

Upvotes: 1

Related Questions