CODEWITHSUNDEEP
javascriptjqueryajax
onTheInternet
onTheInternet

Reputation: 7253

How do I remove item using AJAX

FIDDLE

I am learning AJAX using

RESTful API by LearnCode.academy

I can easily add new entries using the API that they provided. I want to delete entries now. However, whenever I enter the address that they give me, I get an error.

Here is the dataset I'm working with

http://rest.learncode.academy/api/johnbob/friends

Whenever I post to this, I can see everything just fine. This function adds new records. 

    $('#add-order').on('click', function () {


        $.ajax({
            type: 'POST',
            data: {"id":3, "age": $age.val(), "name":$name.val()},
            url: 'http://rest.learncode.academy/api/johnbob/friends',
            success: function () {
                $.ajax({
                    type: 'GET',
                    url: 'http://rest.learncode.academy/api/johnbob/friends',
                    success: function (data) {
                        $friends.html("");
                        console.log("I have friends!", data);
                        $.each(data, function(i, name){
                            $friends.append('<li>Name: '+ name.name + '<br />' + ' Age:' + name.age +'</li>');
                        })
                    },
                    error: function () {
                        alert("error loading data");
                    }
                });
            },
            error: function () {
                alert("error loading data");
            }
        });
    });

However, whenever I try to remove them using the same thing, I get a 404 error on the data set.

    $('#deleteButton').on('click', function () {
        $.ajax({
            type: 'DELETE',
            data: { "id": 3, "age": $age.val(), "name": $name.val() },
            url: 'http://rest.learncode.academy/api/johnbob/friends',
            success: function () {
                //no data...just a success (200) status code
                console.log('Friend Deleted Successfully!');
            }
        });
    });

Its pulling the age and name from two input boxes that the user types into.

Here is the whole javascript file. 

<script>
$(function () {
    var $friends = $('#friends');
    var $name = $('#name');
    var $age = $('#age');

    $.ajax({
        type: 'GET',
        url: 'http://rest.learncode.academy/api/johnbob/friends',
        success: function (data) {
            console.log("I have friends!", data);
            $.each(data, function(i, name){
                $friends.append('<li>Name: '+ name.name + '<br />' + ' Age:' + name.age +' </li>');
            })
        },
        error: function () {
            alert("error loading data");
        }
    });
    $('#add-order').on('click', function () {


        $.ajax({
            type: 'POST',
            data: {"id":3, "age": $age.val(), "name":$name.val()},
            url: 'http://rest.learncode.academy/api/johnbob/friends',
            success: function () {
                $.ajax({
                    type: 'GET',
                    url: 'http://rest.learncode.academy/api/johnbob/friends',
                    success: function (data) {
                        $friends.html("");
                        console.log("I have friends!", data);
                        $.each(data, function(i, name){
                            $friends.append('<li>Name: '+ name.name + '<br />' + ' Age:' + name.age +'</li>');
                        })
                    },
                    error: function () {
                        alert("error loading data");
                    }
                });
            },
            error: function () {
                alert("error loading data");
            }
        });
    });

    $('#deleteButton').on('click', function () {
        $.ajax({
            type: 'DELETE',
            data: { "id": 3, "age": $age.val(), "name": $name.val() },
            url: 'http://rest.learncode.academy/api/johnbob/friends',
            success: function () {
                //no data...just a success (200) status code
                console.log('Friend Deleted Successfully!');
            }
        });
    });

    });

</script>

And the HTML

<div class="large-6 columns" id="ajaxContainer">
        <h1>
            AJAX Container
        </h1>
        <h3>Manage Friends</h3>

        <p>
            Name:
            <input type="text" id="name" />
        </p>
        <p>
            Age:
            <input type="text" id="age" />
        </p> 
        <div class="row">
            <div class="large-6 columns">
                <button id="add-order">Submit</button>
            </div>
            <div class="large-6 columns">
                <a href="#" id="deleteButton" class="button [secondary success alert]">Delete Entry</a>

            </div>
        </div>
        <div class="row">
            <div class="large-3 columns">
                <div data-alert class="alert-box success radius">
                    ADDED
                    <a href="#" class="close">&times;</a>
                </div>
            </div>
            <div class="large-3 columns end">
                <div data-alert class="alert-box alert round" id="removeBox">
                    REMOVED
                    <a href="#" class="close">&times;</a>
                </div>
            </div>
        </div>
        <ul id="friends"></ul>
    </div>
    <div class="large-6 columns">
        <div id="clockHolder">
            <h1>Clock</h1>
            <h4>The page will not refresh when data is added</h4>
        <label id="minutes">00</label><label>:</label><label id="seconds">00</label>
        <span id="time"></span>
        <script type="text/javascript">
            var minutesLabel = document.getElementById("minutes");
            var secondsLabel = document.getElementById("seconds");
            var totalSeconds = 0;
            setInterval(setTime, 1000);

            function setTime() {
                ++totalSeconds;
                secondsLabel.innerHTML = pad(totalSeconds % 60);
                minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
            }

            function pad(val) {
                var valString = val + "";
                if (valString.length < 2) {
                    return "0" + valString;
                }
                else {
                    return valString;
                }
            }
        </script>
            <p>
                Quisque in mi sed neque volutpat sollicitudin. Cras mauris nunc, egestas non tristique sed, ultrices facilisis ex. Vestibulum ante enim, auctor vitae convallis nec, blandit ac risus. Nunc nec mi sit amet turpis tempus posuere eget eget dolor. Mauris fermentum velit odio, et sollicitudin velit sollicitudin id. Proin feugiat mauris lorem, a ornare velit mollis at. Quisque in enim feugiat, mattis enim et, congue lorem. Curabitur eu imperdiet nisl. Proin lacinia id ex ut vulputate. Aliquam porta purus elit, eget maximus felis mattis eu. Etiam ornare nibh venenatis, suscipit turpis nec, ullamcorper ligula. Sed iaculis risus eu neque fringilla rutrum.
            </p>
            <p>
                Donec vitae turpis convallis, commodo leo ut, tristique metus. Aliquam id nibh nec ligula suscipit vehicula sit amet non nulla. Nam at orci erat. Mauris viverra, velit quis porttitor malesuada, nunc mauris cursus eros, id commodo sapien arcu malesuada lacus. Donec fringilla vehicula ornare. Nullam accumsan tortor ut varius mattis. Vestibulum volutpat et ipsum scelerisque lobortis. Donec sit amet arcu sed tellus luctus tincidunt
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis risus, consequat elementum laoreet sed, tincidunt in turpis. Morbi malesuada varius risus, sit amet cursus neque faucibus non. Sed sollicitudin turpis eget ligula feugiat, non feugiat urna placerat. Nunc vehicula ligula vitae elementum lobortis. Duis feugiat mattis felis in porta. Pellentesque sit amet odio quis leo condimentum posuere nec id orci. Maecenas mattis sit amet ipsum vitae finibus. Donec ut aliquet justo. Donec ornare sollicitudin enim, a volutpat erat condimentum in. Vivamus consequat eleifend leo, sed finibus est sollicitudin id. Proin ultrices odio at diam sodales, ut egestas neque feugiat.
            </p>
        </div>
    </div>

Upvotes: 0

Views: 83

Answers (1)

ZarX
ZarX

Reputation: 1086

I think I found the problem, you're not supposed to send the id of the post to remove in the data option. Instead your supposed to send it in the URL

Here's an example of deleting a post with id 5

$('#deleteButton').on('click', function () {
   var id = 5;
   $.ajax({
      type: 'DELETE',
      url: 'http://rest.learncode.academy/api/johnbob/friends/' + id ,
      success: function() {
         console.log('Friend Deleted Successfully!');
      }
   });
});

Update Made fiddler with working delete button on a user: http://jsfiddle.net/Sbt75/660/

Upvotes: 1

Related Questions