asked on

Adding data to each table column

myexecute.zip

Above I have two files and the first one is a picture of my UI the problem is all the infromation in my ui is displaying in only one column of my table not in seperate columns. What can I
do to fix this

Leonidas Dosas

I create a tr element outside of the ajax method and then I append it to movies element...Create a new execute js file and paste this code

$("#showMovies").click(function() {
  $('#movies').html(' ');
var trElm=$("<tr>"+
"<td>"+movie.idmovielist+"</td>"+
"<td>"+movie.name+"</td>"+
"<td>"+movie.thumnail_path+"</td>"+
"<td>"+movie.description+"</td>"+
"<td>"+movie.year_released+"</td>"+
"<td>"+movie.language_released+"</td>"+
"</tr>");
$.ajax({
  method:"GET",
  url: "http://localhost:3000/movielist",
  dataType: "json",
  success: function (response) {
       $.each(response, function(i, movie) {
         $('#movies').append(trElm);
       });
      }
  });
});

Open in new window

Adil Ali

ASKER

nothing shows up in my webpge when I click on the all movies button should I do something with my html

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<link href="mystyle.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<script src="mycrud.js"></script>
  <title>My Movies</title>
  <header>
    <h1>Movies</h1>
  </header>
 <form id="newForm">
     <div class="form-group row">
       <label for="idmovielist" class="col-sm-2 col-form-label">idmovielist</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" id="intNum" placeholder="idmovielist">
         </div>
     </div>
     <div class="form-group row">
       <label for="name" class="col-sm-2 col-form-label">name</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" id="name" placeholder="name">
         </div>
     </div>
     <div class="form-group row">
       <label for="thumnail_path" class="col-sm-2 col-form-label">thumnail_path</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" id="thumnail_path" placeholder="thumnail_path">
         </div>
     </div>
     <div class="form-group row">
       <label for="description" class="col-sm-2 col-form-label">description</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" id="description" placeholder="description">
         </div>
     </div>
     <div class="form-group row">
       <label for="year_released" class="col-sm-2 col-form-label">year_released</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" id="year_released" placeholder="year_released">
         </div>
     </div>
     <div class="form-group row">
       <label for="language_released" class="col-sm-2 col-form-label">language_released</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" id="language_released" placeholder="language_released">
         </div>
     </div>
        <button id = "movieAdded" type="button" class="btn btn-primary">Add</button>
   </form>
   <button id = "showMovies" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
     All Movies</button>
  <table id= "movielist" class="table table-bordered table-hover" width="100%">
  <thead style="background-color:#ddd;" class="table-borderless">
      <body>
      <th>idmovielist</th>
      <th>name</th>
      <th>thumnail_path</th>
      <th>description</th>
      <th>year_released</th>
      <th>language_released</th>
      <th>Action</th>
  </thead>
  <tbody id = "movies">
    <tr>
    <td align="center"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
      <td>
    <button button id = "deleteMovie" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
        Delete
      </button>
        <button  button id = "updatedMovie" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
        Edit
        </button>
    </td>
  </tr>
</tbody>
    </table>                <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
         <div class="modal-body">
           ...
         </div>
         <div class="container">
          <form id="newForm">
              <div class="form-group row">
                <label for="idmovielist" class="col-sm-2 col-form-label">idmovielist</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="intNum" placeholder="idmovielist">
                  </div>
              </div>
              <div class="form-group row">
                <label for="name" class="col-sm-2 col-form-label">name</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" placeholder="name">
                  </div>
              </div>
              <div class="form-group row">
                <label for="thumnail_path" class="col-sm-2 col-form-label">thumnail_path</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="thumnail_path" placeholder="thumnail_path">
                  </div>
              </div>
              <div class="form-group row">
                <label for="description" class="col-sm-2 col-form-label">description</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="description" placeholder="description">
                  </div>
              </div>
              <div class="form-group row">
                <label for="year_released" class="col-sm-2 col-form-label">year_released</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="year_released" placeholder="year_released">
                  </div>
              </div>
              <div class="form-group row">
                <label for="language_released" class="col-sm-2 col-form-label">language_released</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="language_released" placeholder="language_released">
                  </div>
              </div>
                <button id = "deleteMovie" type="button" class="btn btn-primary">Delete</button>
                <button id = "updatedMovie" type="button" class="btn btn-secondary">Edit</button>
            </form>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Open in new window

Leonidas Dosas

Try this js code:

$("#showMovies").click(function() {
  $('#movies').html(' ');

$.ajax({
  method:"GET",
  url: "http://localhost:3000/movielist",
  dataType: "json",
  success: function (response) {
       $.each(response, function(i, movie) {
        var trElm=$("<tr>"+
        "<td>"+movie.idmovielist+"</td>"+
        "<td>"+movie.name+"</td>"+
        "<td>"+movie.thumnail_path+"</td>"+
        "<td>"+movie.description+"</td>"+
        "<td>"+movie.year_released+"</td>"+
        "<td>"+movie.language_released+"</td>"+
        "</tr>");
         $('#movies').append(trElm);
       });
      }
  });
});

Open in new window

Lansing Nye-Madden

Hello Adil,

Leonidas has the right idea, but I can see that what he is going to give you will not work exactly the way that you are hoping for.

You are including <br> tags in javascript and javascript doesn't know what to do with them. You are also missing both </td> tags and </tr> tags. I am assuming you would like the buttons to be positioned in the last column of every row in the the table.

$("#showMovies").click(function() {
  $('#movies').html(' ');
$.ajax({
  method:"GET",
  url: "http://localhost:3000/movielist",
  dataType: "json",
  success: function (response) {
       $.each(response, function(i, movie) {
         $('#movies').append($("<tr>")
         .append($("<td>").append(movie.idmovielist))<br>
         .append($("<td>").append(movie.name))<br>
         .append($("<td>").append(movie.thumnail_path))<br>
         .append($("<td>").append(movie.description))<br>
         .append($("<td>").append(movie.year_released))<br>
         .append($("<td>").append(movie.language_released)));
       });
      }
  });
});

Open in new window

I have revised your code to include what you will need. You will need to update your pindex.html to remove the buttons and to have an empty tbody.

execute.js

$("#showMovies").click(function() {
  $('#movies').html('');
  $.ajax({
    method:"GET",
    url: "http://localhost:3000/movielist",
    dataType: "json",
    success: function (response) {
      $.each(response, function(i, movie) {
	    rowText = "<tr>" +
          "<td>" + movie.idmovielist + "</td>" +
          "<td>" + movie.name + "</td>" +
          "<td>" + movie.thumbnail_path + "</td>" +
          "<td>" + movie.description + "</td>" +
          "<td>" + movie.year_released + "</td>" +
          "<td>" + movie.language_released + "</td>" +
          "<td>" + "<button button id = \"deleteMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal\">Delete</button>" + "</td>" +
          "<td>" + "<button button id = \"editMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal\">Edit</button>" + "</td>";
        $("#movies").append(rowText);
      });
    }
  });
});

Open in new window

pindex.html

<table class="table table-bordered table-hover" width="100%">
  <thead style="background-color:#ddd;" class="table-borderless">
    <tr>
      <th>idmovielist</th>
      <th>name</th>
      <th>thumnail_path</th>
      <th>description</th>
      <th>year_released</th>
      <th>language_released</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody id="movies"></tbody>
</table>

Open in new window

I hope that this helps. I can assist you one-on-one if you need. Please let me know if this is what you were looking for.

Thanks,

Lansing N.

Lansing Nye-Madden

You can see this in action here: https://jsfiddle.net/4udLgmp2/

Adil Ali

ASKER

I ran it but nothing showed up

Lansing Nye-Madden

Answered via private session. Duration 00:00:01

Adil Ali

ASKER

what does that mean

Lansing Nye-Madden

I was attempting to initiate a private session with you to assist, would you like to connect in a private session so that we can find a solution to the problem?

Adil Ali

ASKER

yes please

Lansing Nye-Madden

Answered via private session. Duration 00:00:05

Adil Ali

ASKER

could you connect again please it keeps going away

Lansing Nye-Madden

Answered via private session. Duration 00:00:09

Adil Ali

ASKER

I keep getting a message say the expert has left the session

Lansing Nye-Madden

Answered via private session. Duration 00:00:09

Lansing Nye-Madden

I am not sure why the private sessions are continuing to disconnect, it appears that once you join it ends the session.

I will try to work with you here.

Can you use the F12 key while you are looking at your loaded website to open up the developer console, click on the "Console" tab at the bottom of the screen and take a screenshot of it?

Thanks!

Adil Ali

ASKER

Adil Ali

ASKER

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="mystyle.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<script src="mycrud.js"></script>
<title>My Movies</title>
<header>
<h1>Movies</h1>
</header>
<body>
<form id="newForm">
<div class="form-group row">
<label for="idmovielist" class="col-sm-2 col-form-label">idmovielist</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="intNum" placeholder="idmovielist">
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="name">
</div>
</div>
<div class="form-group row">
<label for="thumnail_path" class="col-sm-2 col-form-label">thumnail_path</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="thumnail_path" placeholder="thumnail_path">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-2 col-form-label">description</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="description" placeholder="description">
</div>
</div>
<div class="form-group row">
<label for="year_released" class="col-sm-2 col-form-label">year_released</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="year_released" placeholder="year_released">
</div>
</div>
<div class="form-group row">
<label for="language_released" class="col-sm-2 col-form-label">language_released</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="language_released" placeholder="language_released">
</div>
</div>
<button id = "movieAdded" type="button" class="btn btn-primary">Add</button>
</form>
<button id = "showMovies" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">All Movies</button>
<table class="table table-bordered table-hover" width="100%">
<thead style="background-color:#ddd;" class="table-borderless">
<tr>
<th>idmovielist</th>
<th>name</th>
<th>thumnail_path</th>
<th>description</th>
<th>year_released</th>
<th>language_released</th>
<th>Action</th>
</tr>
</thead>
<tbody id = "movies"></tbody>
</table> 
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="container">

</div>
</div>
</div>
</div>
</body>
</html>
html
css
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}

#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}

button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}

#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}

#banner-message.alt button {
background: #fff;
color: #000;
}
js
$("#showMovies").click(function() {
$('#movies').html('');
$.ajax({
method:"GET",
url: "http://localhost:3000/movielist",
dataType: "json",
success: function (response) {
$.each(response, function(i, movie) {
rowText = "<tr>" +
"<td>" + movie.idmovielist + "</td>" +
"<td>" + movie.name + "</td>" +
"<td>" + movie.thumbnail_path + "</td>" +
"<td>" + movie.description + "</td>" +
"<td>" + movie.year_released + "</td>" +
"<td>" + movie.language_released + "</td>" +
"<td>" + "<button button id = \"deleteMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal\">Delete</button>" + "</td>" +
"<td>" + "<button button id = \"editMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal\">Edit</button>" + "</td>";
$("#movies").append(rowText);
});
}
});
});

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.