Ajax button test

by AaronLayton

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<table class="table table-striped table-border datatable">
    <thead>
        <tr>
            <td>id</td>
            <td>Title</td>
            <td>Value</td>
            <td>Actions</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Product 1</td>
            <td>Test</td>
            <td><a href="#" class="btn ajaxable" data-ajaxurl="/echo/jsonp/?delete=21">Delete</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Product 2</td>
            <td>Test</td>
            <td><a href="#" class="btn ajaxable" data-ajaxurl="/echo/jsonp/?edit=47">Delete</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Product 3</td>
            <td>Test</td>
            <td><a href="#" class="btn ajaxable" data-ajaxurl="/echo/jsonp/?update=asdas&delete=213">Delete</a></td>
        </tr>
    </tbody>
</table>

JavaScript

// I will setup some javascript that does essentially the same as below


// Anything with the class of "ajaxable"
$('.datatable').on('click','.ajaxable',function(){
    

    $.ajax({
        cache: false,
        dataType: "json",
        url: $(this).data("ajaxurl"),
        success: function(data){
            console.log(data);
            alert("Now refreshes the table");
        },
        error: function(){
            alert("Show a nice error message");
        }
    });
});