Can't pass variable into ajax url in javascript

Question

I'm basically trying to delete an item in mongodb. But I just can't seem to pass the id into the url in the ajax call. Here's my code:

$(".delete-item").on('click', function(e, id) {
              var deleteName = $('p.nameLink').text();

// Get ID first

             $.ajax({
                type: "GET",
                url: "/items",
                dataType: 'json',
            })
            .done(function(result) { 

            // searches mongodb for the clicked name and saves the result in the var     
             var newResult = $.grep(result, function(e){ return e.name === deleteName; });


              var id = newResult[0]._id;
            })
            .fail(function (jqXHR, error, errorThrown) {
                console.log(jqXHR);
                console.log(error);
                console.log(errorThrown);
            });

// Then delete

            console.log("ID to DELETE:", id);  // I can see id

            function itemDelete(id) {

             $.ajax({
                type: 'DELETE',
                url: '/items/' + id,
                dataType: 'json',
            })
            .done(function(result) {

           console.log("ID to DELETE:", id); // Can't see the id

            })
            .fail(function (jqXHR, error, errorThrown) {
                console.log(jqXHR);
                console.log(error);
                console.log(errorThrown);
            });

            }

            itemDelete(id); // pass the id to the function 
         });

I'm just learning at the moment, so I could be going about this the wrong way. If anyone can help me out, I'd appreciate it.

The error message is:

DELETE https://www.someplace.com/items/undefined 500 (Internal Server Error)

Try to use type:'POST' instead type:DELETE''

Mihai Alexandru-Ionut
– Mihai Alexandru-Ionut

2017-01-08 19:24:21 +00:00
Commented Jan 8, 2017 at 19:24 — Mihai Alexandru-Ionut
– Mihai Alexandru-Ionut, Commented Jan 8, 2017 at 19:24

MazzCris · Accepted Answer · 2017-01-08 19:40:41Z

As ajax calls are asynchronous, you should call itemDelete(id) from inside the first .done callback. Try moving

itemDelete(id);

just after

var id = newResult[0]._id;

This way you will execute your second ajax call only after the first has terminated, and the id variable will be defined.

After the change your code should look like this:

$(".delete-item").on('click', function(e, id) {
    var deleteName = $('p.nameLink').text();

    $.ajax({
        type: "GET",
        url: "/items",
        dataType: 'json',
    })
    .done(function(result) { 
        var newResult = $.grep(result, function(e){ 
            return e.name === deleteName; 
        });

        var id = newResult[0]._id;
        itemDelete(id);
    })
    .fail(function (jqXHR, error, errorThrown) {
        console.log(jqXHR);
        console.log(error);
        console.log(errorThrown);
    });

    function itemDelete(id) {
        $.ajax({
            type: 'DELETE',
            url: '/items/' + id,
                dataType: 'json',
            })
            .done(function(result) {


            })
            .fail(function (jqXHR, error, errorThrown) {
                console.log(jqXHR);
                console.log(error);
                console.log(errorThrown);
        });
    }
 });

user3775217 · Accepted Answer · 2017-01-08 19:30:43Z

This one should work for you.

$(".delete-item").on('click', function(e, id) { var deleteName = $('p.nameLink').text();

// Get ID first

         $.ajax({
            type: "GET",
            url: "/items",
            dataType: 'json',
        })
        .done(function(result) { 

        // searches mongodb for the clicked name and saves the result in the var     
         var newResult = $.grep(result, function(e){ return e.name === deleteName; });


          var id = newResult[0]._id;
          itemDelete(id); // pass the id to the function 
        })
        .fail(function (jqXHR, error, errorThrown) {
            console.log(jqXHR);
            console.log(error);
            console.log(errorThrown);
        });



        console.log("ID to DELETE:", id);  // I can see id

        function itemDelete(id) {

         $.ajax({
            type: 'DELETE',
            url: '/items/' + id,
            dataType: 'json',
        })
        .done(function(result) {

       console.log("ID to DELETE:", id); // Can't see the id

        })
        .fail(function (jqXHR, error, errorThrown) {
            console.log(jqXHR);
            console.log(error);
            console.log(errorThrown);
        });

        }


     });

Thanks

Max Sindwani · Accepted Answer · 2017-01-08 19:30:08Z

0

The undefined in https://www.someplace.com/items/undefined suggests that the id is undefined. Note that the get and delete requests happen asynchronously, so id is not guaranteed to be set when you make the delete request, since it depends on when the request completes. In other words, try deleting after you get the id. This would require you to make the DELETE request in the success callback of the GET request.

answered Jan 8, 2017 at 19:30

Max Sindwani

1,2677 silver badges15 bronze badges

Comments

Dani · Accepted Answer · 2017-01-08 19:39:17Z

Please try This one

 $.ajax({
            type: 'get',
            dataType : 'html',
            url: 'your_url',
            data:{variablname:id,type:'DELETE'}
            dataType: 'json',
        })

In your url page or action get the value as its type is get so the data type will be GET

 if(isset($_GET['variablename'],$_GET['type'])){
     if($_GET['type']=='DELETE')
       delete record from database where id= $_GET['variablename']
}

I hope it will help you Thanks

Collectives™ on Stack Overflow

Can't pass variable into ajax url in javascript

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related