play framework - ajax call

Question

I am facing issue to make an ajax call. Javascript method del is getting called, but no ajax call is happening. Here is my code:

list.scala.html

@(products: List[Product])
@main("Products catalogue") {
    <h2>All products</h2>
    <script>
    function del(urlToDelete) {
        alert("In Ajax");
        $.ajax({
            url: urlToDelete,
            type: 'DELETE',
            success: function(results) {
                // Refresh the page
                //location.reload();
            },
            error : function(results) {
                alert('Make call failed');
            }
        });
        alert("End Ajax");
    }
    </script>
    <table class="table table-striped">
    <thead>
        <tr>
            <th>EAN</th>
            <th>Name</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        @for(product <- products) {
            <tr>
                <td><a href="@routes.Products.details(product.ean)">
                    @product.ean
                </a></td>
                <td><a href="@routes.Products.details(product.ean)">
                    @product.name</a></td>
                <td>
                <ahref="@routes.Products.details(product.ean)">@product.name</i></a>
                <button onclick="del('@routes.Products.delete(product.ean)')" >del</button>
                </td>
            </tr>
        }
    </tbody>
    </table>
}

routes

# Routes
# This file defines all application routes (Higher priority routes first)
# ~~~~

# An example controller showing a sample home page
GET     /                           controllers.HomeController.index
# An example controller showing how to use dependency injection
GET     /count                      controllers.CountController.count
# An example controller showing how to write asynchronous code
GET     /message                    controllers.AsyncController.message

# Map static resources from the /public folder to the /assets URL path
GET     /assets/*file                controllers.Assets.versioned(path="/public", file: Asset)

GET     /hello                      controllers.HomeController.hello(name: String)

GET     /products                   controllers.Products.list()
GET     /products/new               controllers.Products.newProduct()
GET     /products/:ean              controllers.Products.details(ean: String)
POST    /products                   controllers.Products.save()

DELETE /products/:ean               controllers.Products.delete(ean: String)

Controller Products.java

public class Products extends Controller {
...
public Result delete(String ean) {
    logger.info("delete product");
    final Product product = Product.findByEan(ean);
    if(product == null) {
        return notFound(String.format("Product %s does not exists.", ean));
    }
    Product.remove(product);
    return redirect(routes.Products.list());
}
...
}

I am not getting any error, and my browser is not showing any error. first alert("In Ajax") in javascript is popping up, not the second alert("End Ajax"), log in controller("Products.java") is not logged(in console or log file). I guess ajax call is not initiated, but i am not sure what I am missing.

Thanks in advance for your time and help.

Do you get an error msg? What's happening in your browser in your developer tools? — Kris, Apr 04 '16 at 10:00
There was a reasonable question "What's happening in your browser in your developer tools?" Did you check that url in del method is correct? Did you find the ajax request on "Network" tab in browser developer tools? — MipH, Apr 08 '16 at 12:16
What browser are you using? There is some old [discussions about such problems](http://stackoverflow.com/questions/2153917/how-to-send-a-put-delete-request-in-jquery). — MipH, Apr 08 '16 at 12:30

score 1 · Answer 1 · answered Mar 10 '17 at 01:55

In my opinion, you need map your ajax call with your delete() method. Like that At your Ajax

 $.ajax({
        url: /urlToDelete,
        type: 'DELETE',
        success: function(results) {
            // Refresh the page
            //location.reload();
        },
        error : function(results) {
            alert('Make call failed');
        }
    });

And in your routes

# Routes
GET     /urlToDelete                           controllers.Products.delete()

So method delete() will be calling. I hope this can help you.

play framework - ajax call

1 Answers1