0

I have a snapshot above and I am trying to execute an put request and nothing is working and I get no error messages I also want to do a delete request on the front end as well but when I click the delete button a the form comes up. Also you may notice that I have two forms in the same pop up I need help on how I can fix that

app.delete('/movielist/:id',(req,res) => {
    mysqlConnection.query("DELETE FROM movielist WHERE idmovielist = ?",[req.params.id],(err,rows,fields) =>{
      if (!err) {
        res.send("Movie is deleted");
      } else {
      console.log(err);
    }
    });
  });
app.put('/movielist/:id',(req,res) =>{
let update = req.body;
mysqlConnection.query("UPDATE movielist SET `year_released` WHERE = '"+update.idmovielist+"'",
(err, results)  => {
    if (!err) {
      res.send("Movie list is updated");
    } else {
      console.log(err);
    }
});
});

Above I have a delete and put requests displayed on my back end and I will show you guys my front end code below

  $(function(){
    $("#showMovies").click(function() {
      $.ajax({
        method:"GET",
        url: "http://localhost:3000/movielist",
        dataType: "json",
        success: function (response) {
          $.each(response, function(i, movie) {
            const 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);
          });
          loadButton();
        }
      });
    });
    $("#movieAdded").click(function(a){
      let mydata = {
        idmovielist: $($("#newForm")[0].intNum).val(),
        name:$($("#newForm")[0].name).val(),
        thumnail_path:$($("#newForm")[0].thumnail_path).val(),
        description:$($("#newForm")[0].description).val(),
        year_released:$($("#newForm")[0].year_released).val(),
        language_released:$($("#newForm")[0].language_released).val(),
      }
      displayMovie(mydata);
           $("#newForm").trigger("reset");
           $("#newForm").toggle();
           a.preventDefault();
    });
    function displayMovie(data) {
      $.ajax({
        method:"POST",
        url: "http://localhost:3000/movielist/addMovie",
        dataType: "json",
        data: data,
        success: function (data) {
              console.log(data);
        }
    });
    }
    function getOneMovie(id){
           $.ajax({
               url: 'http://localhost:3000/movielist' + id,
               method: 'get',
               dataType: 'json',
               success: function(data) {
                   $($("#updateForm")[0].intNum).val(data._id);
                   $($("#updateForm")[0].name).val(data.name);
                   $($("#updateForm")[0].thumnail_path).val(data.thumnail_path);
                   $($("#updateForm")[0].description).val(data.description);
                   $($("#updateForm")[0].year_released).val(data.year_released);
                   $($("#updateForm")[0].language_released).val(data.language_released);
                   $("#updateForm").show();
               }
           });
       }
    function loadButton() {
            $(".editMovie").click(function(e){
                getOneMovie($($(this)[0]).data("idmovielist"));
                e.preventDefault();
            });

            $(".deleteMovie").click(function(e){
                deleteTutorial($($(this)[0]).data("idmovielist"));
                e.preventDefault();
            })
        }

        function putTutorial(data){
            $.ajax({
                url: 'http://localhost:3000/movielist/update/3',
                method: 'PUT',
                dataType: 'json',
                data: data,
                success: function(data) {
                    console.log(data);
                    getOneMovie();
                }
            });
        }

        $("#updateMovie").on("click", function(e) {
           let data = {
             idmovielist: $($("#updateForm")[0].intNum).val(),
             name:$($("#updateForm")[0].name).val(),
             thumnail_path:$($("#updataForm")[0].thumnail_path).val(),
             description:$($("#updateForm")[0].description).val(),
             year_released:$($("#updateForm")[0].year_released).val(),
             language_released:$($("#updateForm")[0].language_released).val(),
           }

            putTutorial($($("#updateForm")[0].intNum).val(), data);
            $("#updateForm").trigger("reset");
            $("#updateForm").toggle();
            e.preventDefault();

        });



        function deleteMovie(id){
            $.ajax({
                url: "http://localhost:3000/movielist" + id,
                method: 'DELETE',
                dataType: 'json',
                success: function(data) {
                    console.log(data);
                }
            });
        }

    });

<!-- language: lang-css -->

    body {
      background: #20262E;
      padding: 20px;
      font-family: Helvetica;
    }
    table {
      background-color: lightblue;
    }
    tbody {
      font-family: inherit;
    }
    html {
      background-color: lightblue;
    }

    #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;
    }


<!-- language: lang-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://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="mycrud.js"></script>
    </head>
    <body>
      <title>My Movies</title>
      <header>
        <h1>Movies</h1>
        <button id = "showMovies" type="button" class="btn btn-primary"  data-toggle="modal"
        data-target=#exampleModal>All Movies</button>
      </header>
    <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">
              <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 type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button id = "movieAdded" type="button" class="btn btn-primary" data-toggle="modal"
                data-target=#exampleModal>Add</button>
              </form>
            </div>
         <div class = "modal=body">
        <form id="updateForm">
            <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>
            <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button id = "updataMovie" type="button" class="btn btn-primary" data-toggle="modal"
                    data-target=#exampleModal>Update</button>
                  </div>
               </div>
          </form>
    </div>
          </div>
        </div>
      </div>
    <button id = "movieAdded" type="button" class="btn btn-primary" data-toggle="modal"
    data-target=#exampleModal>Add</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>
    </header>
    </body>
    </html>

I have my put ang delete in the front end as well I also have created a seperated form for my update and I want to delete the item and update a list by idmovielist. I have my get and post working on the front end already could there be something worng on the server side or could it be something on the front end.

Alexander Lallier
  • 485
  • 6
  • 21
Adil Ali
  • 29
  • 1
  • 6
  • Is URL of the client also on `http://localhost:3000`? (I assume it's not, since otherwise you'd do `/movielist/update/3`.) If not, this is a cross-origin request, and you need to have the server send appropriate CORS headers. See https://www.html5rocks.com/en/tutorials/cors/ and https://stackoverflow.com/a/10636765/710446 for some places to start, and https://expressjs.com/en/resources/middleware/cors.html for using CORS in Express speciically – apsillers Apr 18 '19 at 17:46
  • @apsillers but no errors show up on cors and I have Cors request set up on my browser – Adil Ali Apr 18 '19 at 17:58
  • CORS isn't set up on the browser; you have to enable it in your server-side code. Are you using the `cors` module in your Express `app`? (Linked in my last comment) – apsillers Apr 18 '19 at 19:54
  • @apsillers I do have cors set up on my browser – Adil Ali Apr 18 '19 at 20:17
  • @apsillers const express = require('express'); const app = express(); const mysql = require('mysql'); const bodyparser = require('body-parser'); const cors = require('cors'); app.use(bodyparser.json()); app.use(bodyparser.urlencoded({ // to support URL-encoded bodies extended: true })); app.use(express.urlencoded()); app.use(cors()); I have installed cors in my node package manager and I put this in my back end – Adil Ali Apr 18 '19 at 21:28
  • @apsillers is adding cors to my app js going to make my put request work on the front end because my put request is not doing anything and it is not shwoing any errors on the console log of the browsers – Adil Ali Apr 18 '19 at 21:56

0 Answers0