1

I have created a datatable where you can add rows if you click the "plus" button. This sends an ajax request to an url with the rowId as a parameter. (The rowId is the row where the plus button was pressed.) Then I want to get a json as a return value so that this json updates my datatable with the new row.

Here is the problem: My ajax request never reaches the success section even though I see it in the network monitor. Does anyone know why?

<table class="table display" id="tabelle_benutzerHead" cellspacing="0" width="100%">
    <thead >
        <tr>
            <th>Uhrzeit</th>
            <th>SpNr</th>
            <th>Platz</th>
            <th>Heimmannschaft</th>
            <th>Gastmannschaft</th>
            <th>Freispiele</th>
        </tr>
    </thead>
    <tbody>
            <tr id="Row1">
                <td>08:00</td>
                <td>134</td>
                <td>Platz 1</td>
                <td>Team 5</td>
                <td>Team 3</td>
                <td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td>
            </tr>
            <tr id="Row2">
                <td>09:00</td>
                <td>76</td>
                <td>Platz 3</td>
                <td>Team 7</td>
                <td>Team 1</td>
                <td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td>
            </tr>
            <tr id="Row3">
                <td>17:30</td>
                <td>45</td>
                <td>Platz 11</td>
                <td>Team 2</td>
                <td>Team 9</td>
                <td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td>
            </tr>
    </tbody>
</table>

var oTable = $('#tabelle_benutzerHead').DataTable({
    responsive: true,
    "bAutoWidth": false,
    "bFilter": false,
    "info": false,
    "scrollCollapse": true,
    "paging": false,
    rowReorder: true
})

oTable.on('row-reorder', function(e, diff, edit) {

    var draggedRow = diff[(diff.length - 1)].node;
    var draggedRowId = $(draggedRow).attr('id');    <!-- dragged and dropped Row -->
    var previousRow = diff[(diff.length - 2)].node;
    var previousRowId = $(previousRow).attr('id');  <!-- the row before the dragged and dropped -->

    $.ajax({
        type: "POST",
        url: "myurl.html",
        data: { 
            draggedRowId,
            previousRowId               
            }
    });                     
});

var uhrzeit;
var spNr;
var platz; 
var heimmannschaft;
var gastmannschaft;

$(function() {

    $('#tabelle_benutzerHead').delegate('button.AddDaten', 'click', function() {
        var row = $(this).closest('tr'); // get the parent row of the clicked button

        var tableRowAppend = '<tr><td>' + uhrzeit + '</td><td>' + spNr + '</td><td>' + platz + '</td><td>'+ heimmannschaft + '</td><td>'+ gastmannschaft + 
                            '</td><td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td></tr>';         

        var rowId = $(row).attr('id'); // clicked RowId

        $.ajax({
            type: "POST",
            url: "myurl.html",
            data: { 
                rowId
            },  
            dataType: 'json',
            contentType: "application/json",
            success: function(data) {
                var dataJson =  [ 
                    "10:30",
                    "77",
                    "Platz 1",
                    "Team 7",
                    "Team 12",
                    "<button class='btn btn-default AddDaten' type='button'><i class='glyphicon glyphicon-plus-sign'></i></button>"
                ];

                $.getJSON(dataJson, function(){             
                    oTable.clear();
                    oTable.rows.add(dataJson);
                    oTable.draw();
                });     
            }
        }); 
    }); 
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Arthur Schwarz
  • 21
  • 3
  • 3
    If it doesn't execute the `success` handler, then why don't you add an `error` handler? – Andreas Dec 10 '16 at 11:39
  • How do you know it doesnt reach your success section and what is going on in your success section? You dont use the data returned, create your own data, and then make another ajax call to your data (not a url)? – Craicerjack Dec 10 '16 at 11:40
  • It's probably not the problem, but you've told the server you're sending it JSON, but not sending it JSON. Either remove the `contentType` option, or send JSON. – T.J. Crowder Dec 10 '16 at 11:41
  • 1
    It's also *possible*, but decidedly odd, to POST to a resource that has the extension `.html`. Normally you post to an endpoint that's handled dynamically by the server, and normally `.html` is static (but of course, you can configure things atypically). – T.J. Crowder Dec 10 '16 at 11:42
  • It is the same even if I remove the contentType. – Arthur Schwarz Dec 10 '16 at 11:43
  • The problem was the Same-Origin-Policy. See this: http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy – Arthur Schwarz Dec 21 '16 at 11:31

1 Answers1

0

.success act as call-back function here. Are you sending back some thing in response? i.e When post to myurl/operationOnData

operationOnData(req,res){ // do something here with req, than res.send("Got it!"); }

Waleed Ashraf
  • 99
  • 7