jquery ajax call is duplicating the url, when making a call in external js-file after modal-view

Question

Sorry about the long post, my question is bit difficult to formulate. I'm facing a strange behavior when trying to make AJAX-call. In my website I have button, which allows user to delete some data from my database using a REST API call. When I make call directly inside <script> tags in my html-file, everything works as expected. Delete-call is made to address http://0.0.0.0:8080/v1/item/id1 as expected

<script>
  $("#removeButton").click(function(e){
    bootbox.confirm("Are you sure?", function(result) {
    if (result == true){
      $.ajax({
        type: "DELETE",
        async: true,
        contentType: "application/json",
        url: "/v1/item/" + itemID,    
            dataType: "json",    
            success:function(result){               
            location.reload()
        },
        error:function(){
          $("#removeButton").notify("Error in removing item", "error");
        }
        }); 
    }
    else{
      console.log("false");
    }
  });
</script>

However, I'm trying get rid of most of the javascript code inside the html-file and put most of the code to external .js-files. When I put that AJAX-call to function inside external js-file, the AJAX url is somehow duplicated. It tries to make a call to address 0.0.0.0:8080/v1/item/http://0.0.0.0:8080/www/item/id1 . Correct url should be 0.0.0.0:8080/v1/item/id1 . HTML-file is located in 0.0.0.0:8080/www/item/id1 . I believe that also this modal-view I'm using ( bootbox.js ) can be source of the problem.

Here is the content of the external js-file buttons.js:

function removeConfirmButtonPressed(){
  $.ajax({
    type: "DELETE",
    async: true,
    contentType: "application/json",
    url: "/v1/items/" + itemID,   
        dataType: "json",    
        success:function(result){               
        location.reload()
    },
    error:function(){
      $("#removeButton").notify("Error in removing item", "error");
    }
  }); 
}

And here is the html-file:

<script>
  $(document).ready(function(){
    //event for clicking remove button
    $("#removeButton").click(function(e){
      bootbox.confirm("Are you sure?", function(result) {
      if (result == true){
        removeConfirmButtonPressed()
      }
      else{
        console.log("false");
      }
      });
    });
  });       
</script>

So my question is what can cause this strange duplication of the url's when making a AJAX-call from external js-file, after user confirms his choice is Bootstrap modal view?

Answer 1

It seems that itemID == "http://0.0.0.0:8080/www/item/id1" . You forgot to get only the text content of the itemID object.