title: How to POST data from Vaadin to Vertx using Unirest?
body: <p>I currently have a canvas on my Vaadin page to draw bounding boxes, in which they will be saved as objects into an array containing their width, height, coordinates etc. I also have a Vertx backend that can carry out GET and POST requests from my MariaDB database (using JDBC) that is supposed to contain all the bounding boxes objects from the Vaadin frontend (but they only contain sample created objects for now). I would like to know how do I write a POST request properly on the Vaadin frontend using Unirest, so that I can pass my object from Vaadin to Vertx using a 'Save' button, as my current code in UserService.java right now isn't doing anything.</p>
  
  <p>Vaadin UserService.java:</p>
  
  <pre><code>package com.vaadin.starter.beveragebuddy.service;
  
  import com.mashape.unirest.http.HttpResponse;
  import com.mashape.unirest.http.JsonNode;
  import com.mashape.unirest.http.Unirest;
  import com.mashape.unirest.http.exceptions.UnirestException;
  import com.vaadin.starter.beveragebuddy.ui.components.BoundingBox;
  import com.vaadin.starter.beveragebuddy.ui.components.Canvas;
  import org.json.JSONArray;
  import org.json.JSONObject;
  
  import java.util.ArrayList;
  import java.util.HashMap;
  import java.util.Map;
  
  import static com.helger.commons.mock.CommonsAssert.assertEquals;
  //import static com.sun.xml.internal.ws.spi.db.BindingContextFactory.LOGGER;
  
  public class UserService {
  
      public JSONArray bbJsonArray;
      public JSONObject bbJsonObject;
      public static ArrayList&lt;BoundingBox&gt; bb = Canvas.getArrayBoxes();
  
      public static String createAnnotations(String boxname) throws UnirestException {
  
          Map&lt;String, String&gt; headers = new HashMap&lt;&gt;();
  
              try {
  
                  HttpResponse&lt;JsonNode&gt; jsonResponse = Unirest.post("http://localhost:9080/api/annotations")
                          .header("accept", "application/json")
                          .field("boxname", bb.get(0).boxname)
                          .asJson();
  
                  JSONObject output = jsonResponse.getBody().getObject();
  
                  String status = output.getString("status");
                  System.out.println(jsonResponse.getBody());
                  return status;
  
              } catch (UnirestException e) {
                  return "error";
              }
          }
  
  }
  </code></pre>
  
  <p>Vaadin BoundingBox.java:</p>
  
  <pre><code>package com.vaadin.starter.beveragebuddy.ui.components;
  
  import org.json.JSONObject;
  
  public class BoundingBox {
  
      public double xcoordi = 0;
      public double ycoordi = 0;
      public double boxWidth = 0;
      public double boxHeight = 0;
      public double endX = 0;
      public double endY = 0;
      public String picID;
      public String boxname;
      public String boxcategory;
      public String boxcolour;
  
      public BoundingBox(String picID, String boxname, String boxcategory, String boxcolour, double xcoordi, double ycoordi, double boxWidth, double boxHeight, double endX, double endY) {
          this.picID = picID;
          this.boxname = boxname;
          this.boxcategory = boxcategory;
          this.boxcolour = boxcolour;
          this.xcoordi = xcoordi;
          this.ycoordi = ycoordi;
          this.boxWidth = boxWidth;
          this.boxHeight = boxHeight;
          this.endX = endX;
          this.endY = endY;
      }
  
      public String getPicID() {
          return picID;
      }
  
      public void setPicID(String picID) {
          this.picID = picID;
      }
  
      public String getBoxName() {
          return boxname;
      }
  
      public void setName(String boxname) {
          this.boxname = boxname;
      }
  
      public String getBoxcategory() {
          return boxcategory;
      }
  
      public void setBoxcategory(String boxcategory) {
          this.boxcategory = boxcategory;
      }
  
      public String getBoxcolour() {
          return boxcolour;
      }
  
      public void setBoxcolour(String boxcolour) {
          this.boxcolour = boxcolour;
      }
  
      public double getXcoordi() {
          return xcoordi;
      }
  
      public void setXcoordi(double xcoordi) {
          this.xcoordi = xcoordi;
      }
  
      public double getYcoordi() {
          return ycoordi;
      }
  
      public void setYcoordi(double ycoordi) {
          this.ycoordi = ycoordi;
      }
  
      public double getWidth() {
          return boxWidth;
      }
  
      public void setWidth(double endX, double xcoordi) {
          boxWidth = endX - xcoordi;
      }
  
      public double getHeight() {
          return boxHeight;
      }
  
      public void setHeight(double endY, double ycoordi) {
          boxHeight = endY - ycoordi;
      }
  
      public double getEndX() {  // Bottom-right X coordinate of box
          return endX;
      }
  
      public void setEndX(double endX) {
          this.endX = endX;
      }
  
      public double getEndY() {  // // Bottom-right Y coordinate of box
          return endY;
      }
  
      public void setEndY(double endY) {
          this.endY = endY;
      }
  
      public JSONObject toJSON() {
  
          JSONObject bbJsonObject = new JSONObject();
          bbJsonObject.put("boxname", boxname);
          bbJsonObject.put("boxcategory", boxcategory);
          bbJsonObject.put("boxcolour", boxcolour);
          bbJsonObject.put("xcoordi", xcoordi);
          bbJsonObject.put("ycoordi", ycoordi);
          bbJsonObject.put("boxwidth", boxWidth);
          bbJsonObject.put("boxheight", boxHeight);
  
          return bbJsonObject;
      }
  
      @Override
      public String toString() {
          return "{" +
                  "Name=" + boxname +
                  ", Class=" + boxcategory +
                  ", Colour=" + boxcolour +
                  ", X=" + xcoordi +
                  ", Y=" + ycoordi +
                  ", Width=" + boxWidth +
                  ", Height=" + boxHeight +
                  '}';
      }
  }
  </code></pre>
  
  <p>Vertx MainVerticle.java:</p>
  
  <pre><code>import io.vertx.core.AsyncResult;
  import io.vertx.core.Future;
  import io.vertx.core.Handler;
  import io.vertx.core.http.HttpServer;
  import io.vertx.core.http.HttpServerResponse;
  import io.vertx.core.json.Json;
  import io.vertx.core.json.JsonArray;
  import io.vertx.core.json.JsonObject;
  import io.vertx.ext.jdbc.JDBCClient;
  import io.vertx.ext.sql.ResultSet;
  import io.vertx.ext.sql.SQLClient;
  import io.vertx.ext.web.Router;
  import io.vertx.ext.web.RoutingContext;
  import io.vertx.ext.web.handler.StaticHandler;
  import io.vertx.ext.jdbc.JDBCClient;
  import io.vertx.ext.sql.SQLConnection;
  import io.vertx.ext.sql.UpdateResult;
  import io.vertx.ext.web.handler.BodyHandler;
  import io.vertx.ext.web.handler.StaticHandler;
  import io.vertx.starter.components.BoundingBox;
  import io.vertx.starter.components.Picture;
  
  
  import java.sql.Statement;
  import java.util.LinkedHashMap;
  import java.util.List;
  import java.util.Map;
  import java.util.stream.Collectors;
  
  import org.slf4j.Logger;
  import org.slf4j.LoggerFactory;
  
  public class MainVerticle extends AbstractVerticle {
  
    private JDBCClient jdbc;
    private static final Logger LOGGER = LoggerFactory.getLogger(MainVerticle.class);
    private Future fut;
    private String SQL_GET_ANNOTATION = "SELECT * FROM boundingboxes";
    private String SQL_ADD_ANNOTATION = "INSERT INTO boundingboxes (picID, boxname, boxcategory, boxcolour, xcoordi, ycoordi, boxWidth, boxHeight, endX, endY) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
    private int nextCount = 0;
    private Map&lt;Integer, Picture&gt; pictures = new LinkedHashMap&lt;&gt;();
    private Map&lt;Integer, BoundingBox&gt; annotations = new LinkedHashMap&lt;&gt;();
  
    @Override
    public void start(Future&lt;Void&gt; fut) {
  
      createBBData();
  
      startHttpServer();
  
      dbConnection();
  
  //    Router router = Router.router(vertx);
    }
  
  public Future&lt;Void&gt; dbConnection(){
  
          // Create a JDBC client
      jdbc = JDBCClient.createShared(vertx, new JsonObject()
        .put("url", "jdbc:mariadb://localhost:3306/annotationdb")
        .put("driver_name", "org.mariadb.jdbc.Driver")
        .put("max_pool_size", 5)
        .put("user", "root"));
  
      jdbc.getConnection(ar -&gt; {
        if (ar.failed()) {
          LOGGER.error("Could not open a database connection", ar.cause());
          fut.fail(ar.cause());         // If SQL Connection could not be obtained, then method future is completed to fail.
        } else {
          SQLConnection connection = ar.result(); // else ... SQL connection is established with successful AsyncResult (Use this connection to perform a SQL query)
          connection.query(SQL_GET_ANNOTATION, get -&gt; {
            connection.close();
            if (get.failed()) {            // If SQL Query fails ...
              LOGGER.error("Database operation error", get.cause());  // ...
              fut.fail(get.cause());
  
            } else {
              LOGGER.info("Connection Established");
  //            fut.complete();   // Complete method future object with a success
              System.out.print("Succeed");
  
              ResultSet rs = get.result();
              if (rs.getNumRows() &gt; 0) {
                System.out.println(rs.getResults().toString());
                nextCount++;
              }
            }
          });
        }
      });
      return fut;
    }
  
    public Future&lt;Void&gt; startHttpServer(){
      Future&lt;Void&gt; future = Future.future();
      HttpServer server = vertx.createHttpServer();
  
      Router router = Router.router(vertx);
      router.route("/").handler(routingContext -&gt; {
        HttpServerResponse response = routingContext.response();
        response
          .putHeader("content-type", "text/html")
          .end("&lt;h1&gt;Hello from my first Vert.x 3 application&lt;/h1&gt;");
      });
  
      // Serve static resources from the /assets directory
      router.route("/assets/*").handler(StaticHandler.create("assets"));
      router.route("/api/annotations*").handler(BodyHandler.create());
      router.get("/api/annotations").handler(this::getAll);
  //    router.get("/api/annotations/:bbID").handler(this::getOne);
      router.post("/api/annotations").handler(this::addOne);
      router.put("/api/annotations/:bbID").handler(this::updateOne);
      router.delete("/api/annotations/:bbID").handler(this::deleteOne);
  
      vertx
        .createHttpServer()
        .requestHandler(router::accept)
        .listen(
          // Retrieve the port from the configuration,
          // default to 8080.
          config().getInteger("http.port", 9080)
        );
  
      return future;
  
    }
  
  private void createBBData() {
      BoundingBox annotation1 = new BoundingBox("P1", "sign1", "signs", "Magenta", 340.0, 110.0, 100.0, 200.0, 500.0, 400.0);
      annotations.put(annotation1.getBbID(), annotation1);
      BoundingBox annotation2 = new BoundingBox("P2", "woman1", "people", "Red", 300.0, 150.0, 200.0, 400.0, 600.0, 350.0);
      annotations.put(annotation2.getBbID(), annotation2);
    }
  
    private void getAll(RoutingContext routingContext) {
      jdbc.getConnection(ar -&gt; {
        SQLConnection connection = ar.result();
        connection.query("SELECT * FROM boundingboxes", result -&gt; {
          System.out.println("[GetALL] NUMBER = " + result.result().getNumRows());
          LOGGER.info("LOGGER INFO TEST!!");
          LOGGER.error("LOGGER ERROR TEST!!");
  //        System.out.println("[GetALL] CONTENTS = " + result.result().getResults().get(0).encodePrettily());
  
          List&lt;BoundingBox&gt; annotation = result.result().getRows().stream().map(BoundingBox::new).collect(Collectors.toList());
          routingContext.response()
            .putHeader("content-type", "application/json; charset=utf-8")
            .end(Json.encodePrettily(annotation));
          connection.close();
        });
      });
    }
  
    private void addOne(RoutingContext routingContext) {  // OK
      jdbc.getConnection(ar -&gt; {
        System.out.println("CONNECTION INSERT OK");
  
      final BoundingBox annotation = Json.decodeValue(routingContext.getBodyAsString(),
        BoundingBox.class);
      System.out.println(annotation.getEndX());
      SQLConnection connection = ar.result();
  //    annotations.put(annotation.getBbID(), annotation);
      insert(annotation, connection, (r) -&gt;
  
        routingContext.response()
        .setStatusCode(201)
        .putHeader("content-type", "application/json; charset=utf-8")
        .end(Json.encodePrettily(r.result())));
        connection.close();
      });
    }
  
    private void updateOne(RoutingContext routingContext) {
      final String bbID = routingContext.request().getParam("bbID");
      JsonObject json = routingContext.getBodyAsJson();
      if (bbID == null || json == null) {
        routingContext.response().setStatusCode(400).end();
      } else {
        jdbc.getConnection(ar -&gt;
          update(bbID, json, ar.result(), (annotation) -&gt; {
            if (annotation.failed()) {
              routingContext.response().setStatusCode(404).end();
            } else {
              routingContext.response()
                .putHeader("content-type", "application/json; charset=utf-8")
                .end(Json.encodePrettily(annotation.result()));
            }
            ar.result().close();
          })
        );
      }
    }
  
  private void select(String bbID, SQLConnection connection, Handler&lt;AsyncResult&lt;BoundingBox&gt;&gt; resultHandler) {
      System.out.println("[TEST]  SELECT ONE REQUEST !!!");
      connection.queryWithParams("SELECT * FROM boundingboxes", new JsonArray().add(bbID), ar -&gt; {
        if (ar.failed()) {
          resultHandler.handle(Future.failedFuture("Annotation not found"));
        } else {
          if (ar.result().getNumRows() &gt;= 1) {
            System.out.println(ar.result().getResults().get(0).encodePrettily());
            System.out.println(ar.result().getRows().get(0).fieldNames());
            System.out.println(ar.result().getRows().get(0).encodePrettily());
  
            resultHandler.handle(Future.succeededFuture(new BoundingBox(ar.result().getRows().get(0))));
          } else {
            System.out.println("Annotation is not found!");
            resultHandler.handle(Future.failedFuture("Annotation not found"));
          }
        }
      });
    }
  
      private void insert(BoundingBox annotation, SQLConnection connection, Handler&lt;AsyncResult&lt;BoundingBox&gt;&gt; next) { // OK
        String sql = "INSERT INTO boundingboxes (picID, boxname, boxcategory, boxcolour, xcoordi, ycoordi, boxWidth, boxHeight, endX, endY) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
        JsonArray annotationJson = new JsonArray().add(annotation.getPicID()).add(annotation.getBoxName()).add(annotation.getBoxcategory()).add(annotation.getBoxcolour()).add(annotation.getXcoordi()).add(annotation.getYcoordi()).add(annotation.getWidth()).add(annotation.getHeight()).add(annotation.getEndX()).add(annotation.getEndX());
  //      System.out.println(annotationJson);
        connection.updateWithParams(sql, annotationJson,
          (ar) -&gt; {
            if (ar.failed()) {
              next.handle(Future.failedFuture(ar.cause()));
              connection.close();
              return;
            }
            UpdateResult result = ar.result();
            BoundingBox bb = new BoundingBox(result.getKeys().getInteger(0), annotation.getPicID(), annotation.getBoxName(), annotation.getBoxcategory(), annotation.getBoxcolour(), annotation.getXcoordi(), annotation.getYcoordi(), annotation.getWidth(), annotation.getHeight(), annotation.getEndX(), annotation.getEndY());
            System.out.println(bb);
            next.handle(Future.succeededFuture(bb));
          });
      }
  
    private void update(String bbID, JsonObject content, SQLConnection connection,
                        Handler&lt;AsyncResult&lt;BoundingBox&gt;&gt; resultHandler) {
      String sql = "UPDATE boundingboxes SET picID=?, boxname=?, boxcategory=?, boxcolour=?, xcoordi=?, ycoordi=?, boxWidth=?, boxHeight=?, endX=?, endY=? WHERE bbID=?";
      connection.updateWithParams(sql,
        new JsonArray().add(content.getString("picID")).add(content.getString("boxname")).add(content.getString("boxcategory")).add(content.getString("boxcolour")).add(content.getDouble("xcoordi")).add(content.getDouble("ycoordi")).add(content.getDouble("boxWidth")).add(content.getDouble("boxHeight")).add(content.getDouble("endX")).add(content.getDouble("endY")).add(bbID),
        update -&gt; {
          if (update.failed()) {
            resultHandler.handle(Future.failedFuture("Cannot update the annotation"));
            return;
          }
          if (update.result().getUpdated() == 0) {
            resultHandler.handle(Future.failedFuture("Annotation not found"));
            return;
          }
          resultHandler.handle(
            Future.succeededFuture(new BoundingBox(Integer.valueOf(bbID),
              content.getString("picID"), content.getString("boxname"), content.getString("boxcategory"), content.getString("boxcolour"), content.getDouble("xcoordi"), content.getDouble("ycoordi"), content.getDouble("boxWidth"), content.getDouble("boxHeight"), content.getDouble("endX"), content.getDouble("endY"))));
        });
    }
  
  }
  </code></pre>
  
  <p>Vertx index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;List of Annotations&lt;/title&gt;
  
    &lt;script src="//code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container" role="main"&gt;
    &lt;div class="jumbotron"&gt;
      &lt;h1&gt;List of Annotations&lt;/h1&gt;
  
      &lt;p&gt;Just an example of simple CRUD application developed using Vert.x and Vertx Web.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="page-header"&gt;
      &lt;h1&gt;Annotations&lt;/h1&gt;
      &lt;button class="pull-right btn btn-primary annotation-add" data-action="add" data-toggle="modal"
              data-target="#annotationModal"&gt;
        &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt; Add a new annotation
      &lt;/button&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;table class="table table-striped"&gt;
            &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;bbID&lt;/th&gt;
              &lt;th&gt;picID&lt;/th&gt;
              &lt;th&gt;Box Name&lt;/th&gt;
              &lt;th&gt;Box Category&lt;/th&gt;
              &lt;th&gt;Box Colour&lt;/th&gt;
              &lt;th&gt;X-Coordi&lt;/th&gt;
              &lt;th&gt;Y-Coordi&lt;/th&gt;
              &lt;th&gt;Box Width&lt;/th&gt;
              &lt;th&gt;Box Height&lt;/th&gt;
              &lt;th&gt;End X&lt;/th&gt;
              &lt;th&gt;End Y&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
            &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody id="content"&gt;
            &lt;!-- filled using Ajax --&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      $(function () {
          load();
          initModal();
      });
      function create(picID, boxname, boxcategory, boxcolour, xcoordi, ycoordi, boxWidth, boxHeight, endX, endY) {
          $.post("/api/annotations", JSON.stringify({picID: picID, boxname: boxname, boxcategory: boxcategory, boxcolour: boxcolour, xcoordi: xcoordi, ycoordi: ycoordi, boxWidth: boxWidth, boxHeight: boxHeight, endX: endX, endY: endY}), function () {
              load();
          }, "json");
      }
      function remove(bbID) {
          $.ajax({
              method: "DELETE",
              url: "/api/annotations/" + bbID
          }).done(function () {
              load();
          });
      }
      function update(bbID, picID, boxname, boxcategory, boxcolour, xcoordi, ycoordi, boxWidth, boxHeight, endX, endY) {
          $.ajax({
              method: "PUT",
              url: "/api/annotations/" + bbID,
              data: JSON.stringify({picID: picID, boxname: boxname, boxcategory: boxcategory, boxcolour: boxcolour, xcoordi: xcoordi, ycoordi: ycoordi, boxWidth: boxWidth, boxHeight: boxHeight, endX: endX, endY: endY})
          }).done(function () {
              load();
          });
      }
      function load() {
          $("#content").children().remove();
          $.getJSON("/api/annotations", function (data) {
              $.each(data, function (key, val) {
                  $("&lt;tr&gt;&lt;td&gt;" + val.bbID + "&lt;/td&gt;&lt;td&gt;" + val.picID + "&lt;/td&gt;&lt;td&gt;" + val.boxname + "&lt;/td&gt;&lt;td&gt;" + val.boxcategory + "&lt;/td&gt;&lt;td&gt;" + val.boxcolour + "&lt;/td&gt;&lt;td&gt;" + val.xcoordi + "&lt;/td&gt;&lt;td&gt;" + val.ycoordi + "&lt;/td&gt;&lt;td&gt;" + val.boxWidth + "&lt;/td&gt;&lt;td&gt;" + val.boxHeight + "&lt;/td&gt;&lt;td&gt;" + val.endX + "&lt;/td&gt;&lt;td&gt;" + val.endY + "&lt;/td&gt;" +
                          "&lt;td&gt;" +
                          "&lt;button data-action='edit' class='btn btn-primary btn-sm annotation-edit' " +
                          "data-toggle='modal' " +
                          "data-target='#annotationModal' " +
                          "data-bbID='" + val.bbID + "' " +
                          "data-boxname='" + val.boxname + "' " +
                          "data-boxcategory='" + val.boxcategory + "' " +
                          "data-boxcolour='" + val.boxcolour + "'&gt;" +
                          &lt;!--"data-xcoordi='" + val.xcoordi + "'&gt;" +--&gt;
                          &lt;!--"data-ycoordi='" + val.ycoordi + "'&gt;" +--&gt;
                          &lt;!--"data-boxWidth='" + val.boxWidth + "'&gt;" +--&gt;
                          &lt;!--"data-boxHeight='" + val.boxHeight + "'&gt;" +--&gt;
                          &lt;!--"data-endX='" + val.endX + "'&gt;" +--&gt;
                          &lt;!--"data-endY='" + val.endY + "'&gt;" +--&gt;
                          "&lt;span class='glyphicon glyphicon-pencil'&gt;&lt;/span&gt;" +
                          "&lt;/button&gt;" +
                          "&amp;nbsp;" +
                          "&lt;button class='btn btn-danger btn-sm annotation-delete' data-bbID='" + val.bbID + "'&gt;" +
                          "   &lt;span class='glyphicon glyphicon-minus'&gt;&lt;/span&gt;" +
                          "&lt;/button&gt;" +
                          "&lt;/td&gt;" +
                          "&lt;/tr&gt;").appendTo("#content");
              });
              initCallbacks();
          });
      }
      function initCallbacks() {
          $(".annotation-delete").unbind().click(function() {
             var bbID = $(this).data("bbID");
             remove(bbID);
          });
      }
      function initModal() {
          $("#annotationModal").on('show.bs.modal', function (event) {
              var button = $(event.relatedTarget);
              var action = button.data('action');
              var bbID = button.data('bbID');
              var annotationAction = $("#annotationAction");
              annotationAction.unbind();
              var modal = $(this);
              if (action === "add") {
                  modal.find('.modal-title').text("Add an annotation");
                  modal.find('#annotation-picID').val("");
                  modal.find('#annotation-boxname').val("");
                  modal.find('#annotation-boxcategory').val("");
                  modal.find('#annotation-boxcolour').val("");
                  modal.find('#annotation-xcoordi').val("");
                  modal.find('#annotation-ycoordi').val("");
                  modal.find('#annotation-boxWidth').val("");
                  modal.find('#annotation-boxHeight').val("");
                  modal.find('#annotation-endX').val("");
                  modal.find('#annotation-endY').val("");
                  annotationAction.click(function () {
                      create($("#annotation-picID").val(), $("#annotation-boxname").val(), $("#annotation-boxcategory").val(), $("#annotation-boxcolour").val(), $("#annotation-xcoordi").val(), $("#annotation-ycoordi").val(), $("#annotation-boxWidth").val(), $("#annotation-boxHeight").val(), $("#annotation-endX").val(), $("#annotation-endY").val());
                      $('#annotationModal').modal('toggle');
                  });
              } else {
                  modal.find('.modal-title').text("Edit an annotation");
                  modal.find('#annotation-picID').val(button.data("picID"));
                  modal.find('#annotation-boxname').val(button.data("boxname"));
                  modal.find('#annotation-boxcategory').val(button.data("boxcategory"));
                  modal.find('#annotation-boxcolour').val(button.data("boxcolour"));
                  modal.find('#annotation-xcoordi').val(button.data("xcoordi"));
                  modal.find('#annotation-ycoordi').val(button.data("ycoordi"));
                  modal.find('#annotation-boxWidth').val(button.data("boxWidth"));
                  modal.find('#annotation-boxHeight').val(button.data("boxHeight"));
                  modal.find('#annotation-endX').val(button.data("endX"));
                  modal.find('#annotation-endY').val(button.data("endY"));
                  annotationAction.click(function () {
                      update(id, $("#annotation-picID").val(), $("#annotation-boxname").val(), $("#annotation-boxcategory").val(), $("#annotation-boxcolour").val(), $("#annotation-xcoordi").val(), $("#annotation-ycoordi").val(), $("#annotation-boxWidth").val(), $("#annotation-boxHeight").val(), $("#annotation-endX").val(), $("#annotation-endY").val());
                      $('#annotationModal').modal('toggle');
                  });
              }
          })
      }
  &lt;/script&gt;
  &lt;div class="modal fade" id="annotationModal" tabindex="-1" role="dialog"&gt;
    &lt;div class="modal-dialog" role="dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title" id="annotationModalTitle"&gt;Add an annotation&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;form&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="annotation-picID" class="control-label"&gt;Pic ID:&lt;/label&gt;
              &lt;input type="text" class="form-control" id="annotation-picID"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="annotation-boxname" class="control-label"&gt;Box Name:&lt;/label&gt;
              &lt;input type="text" class="form-control" id="annotation-boxname"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="annotation-boxcategory" class="control-label"&gt;Box Category:&lt;/label&gt;
              &lt;input type="text" class="form-control" id="annotation-boxcategory"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="annotation-boxcolour" class="control-label"&gt;Box Colour:&lt;/label&gt;
              &lt;input type="text" class="form-control" id="annotation-boxcolour"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="annotation-xcoordi" class="control-label"&gt;X-Coordi:&lt;/label&gt;
              &lt;input type="text" class="form-control" id="annotation-xcoordi"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="annotation-ycoordi" class="control-label"&gt;Y-Coordi:&lt;/label&gt;
              &lt;input type="text" class="form-control" id="annotation-ycoordi"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="annotation-boxWidth" class="control-label"&gt;Box Width:&lt;/label&gt;
              &lt;input type="text" class="form-control" id="annotation-boxWidth"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="annotation-boxHeight" class="control-label"&gt;Box Height:&lt;/label&gt;
              &lt;input type="text" class="form-control" id="annotation-boxHeight"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="annotation-endX" class="control-label"&gt;End X:&lt;/label&gt;
              &lt;input type="text" class="form-control" id="annotation-endX"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="annotation-endY" class="control-label"&gt;End Y:&lt;/label&gt;
              &lt;input type="text" class="form-control" id="annotation-endY"&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
          &lt;button type="button" id="annotationAction" class="btn btn-primary"&gt;Save&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help is appreciated, thank you!</p>