CODEWITHSUNDEEP
jqueryajax
Tommy
Tommy

Reputation: 719

asynchronous ajax request not working asynchronously

I have the following problem: I'm using jQuery ajax requests to add or delete entries from a server file.

My code works insofar as the entries are added and deleted as expected when clicking on the respective buttons.

However, the action adding entries is not done asynchronously. That is, I have to reload the whole page before the respective action takes effect.

I have not(!!) changed the default settings of the ajax request, i.e. I have not added "Async: false". Still, the code isn't working asynchronously. (I even tried adding "Async: true" to explicitly say that the request is to be made asynchronously ... however, to no avail) .

Here is the ajax method that isn't working as expected:

        $("button").on("click", function(){

            var name = $("#name").val();
            var text = $("#text").val();

            $.post(url, {name: name, text: text});

        });

Why is this request not asynchronous? How can I make it asynchronous?

***************************UPDATE*********************************************

The following screenshot provides some details regarding the server/language:

enter image description here

****************************UPDATE2***********************************************

Here is - for context - the code in its entirety:

<!DOCTYPE html>
<html lang="de-DE">
    <head>
        <meta charset="UTF-8" />
        <style>
            body {
                font: 15px normal Arial, sans-serif;
                color: #000000;
            }
            label {
                width: 5em;
                display: inline-block;
            }
            ul {
                padding: 0;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
        </script>
        <script>
        $(document).ready(function(){

            var url = "https://vsr.informatik.tu-chemnitz.de/edu/2015/evs/exercises/jsajax/guestbook.php";

            $.get(url, function(data){

                var table = document.createElement("table");
                $("body").append(table);
                var tbody = document.createElement("tbody");
                $("table").append(tbody);

                for(var i=0; i<data.length; i++){
                    $("tbody").append("<tr><td>" + data[i]["name"] + "</td><td>" + data[i]["text"] + "</td><td><a id=\"" + data[i]["id"] + "\" href=\"#\">Delete</a></td></tr>");       
                }

            });


            $("body").on("click", "a", function(e){

                e.preventDefault();
                var ID = $(this).attr("id");

                $.ajax({
                    url: url + '?' + $.param({"id": ID}),
                    type: 'DELETE',
                    success: function(){$("#" + ID).closest("tr").remove();},
                    error: function(){alert("error");}          
                });

            });


            $("button").on("click", function(){

                var name = $("#name").val();
                var text = $("#text").val();

                $.post(url, {name: name, text: text});

            });


        });          
        </script>
    </head>
    <body>
        <h1>Guestbook</h1>
        <ul>
            <li><b>TestUser:</b> This is an example entry. <a href="#" alt="Delete entry">(X)</a></li>
            <li><b>TestUser2:</b> This is another example entry. <a href="#" alt="Delete entry">(X)</a></li>
        </ul>
        <hr>
        <form method="POST" action="https://vsr.informatik.tu-chemnitz.de/edu/2015/evs/exercises/jsajax/guestbook.php">
                <label for="name">Name</label> <input id="name" type="text" name="name" placeholder="Name"><br>
                <label for="text">Text</label> <input id="text" type="text" name="text" placeholder="Text"><br>
                <button type="submit">Add entry</button>
        </form>
    </body>
</html>

*********************************UPDATE4*****************************************

After adding something, I'm redirected to a page with containing a message looking similar to the following screenshot:

enter image description here

Upvotes: 0

Views: 2052

Answers (2)

Jared Smith
Jared Smith

Reputation: 21926

Your problem is that you're doing a form submit that takes you to a different page. If you want to stay on the same page then get rid of the form submit and use the jquery post request as you've written it, possibly with a success callback. But don't try to mix the two. If you want to async and then redirect, just do the redirect in JavaScript from the success handler of your jquery post request.

Upvotes: 2

John Hascall
John Hascall

Reputation: 9416

To expand on the comments, this is what they are suggesting:

  $("body").on("click", "a", function(e){

        e.preventDefault();
        var $that = $(this);
        var ID = $that.attr("id");

        $.ajax({
            url: url + '?' + $.param({"id": ID}),
            type: 'DELETE',
            success: function(){$that.closest("tr").remove();},
            error: function(){alert("error");}          
        });

    });

Upvotes: 2

Related Questions