Bootstrap-table: Proplem repeat row data when using boostrap modal to confirm

[thanhmabo]

Description :

I created 'data-formatter' for column status, when click button status, i show a modal boostrap alert for user to select "cancel " or "ok", in this modal. When user click "ok", row will be updated and using ajax to update server.
When users click the button ok in modal several times, I see the row data repeat ( in console mode ), i can't update for this row, each time so that updates for all other row

demo: http://plnkr.co/edit/cfczOxSoBkKwT2BaG1Sw?p=preview
( turn on console mode on browser to see khi click status button)

html

<table id="table">
      <thead>
        <tr>
            <th data-field="name">Name</th>
            <th data-field="stargazers_count">Stars</th>
            <th data-field="forks_count">Forks</th>
            <th data-field="status" data-formatter="statusFormatter" data-events="statusEvents">Status</th>
            <th data-field="description">Description</th>
        </tr>
      </thead>
    </table>

    <!-- Modal Alert -->
    <div class="modal fade modal-alert" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-body"></div>
          <div class="modal-footer">
                  <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-sm btn-primary btn-ok">Ok</button>
          </div>
        </div>
      </div>
    </div>

js

// Code goes here

var data = [
    {
        "name": "bootstrap-table",
        "stargazers_count": "526",
        "forks_count": "122",
        "status":1,
        "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
    },
    {
        "name": "multiple-select",
        "stargazers_count": "288",
        "forks_count": "150",
        "status":0,
        "description": "A jQuery plugin to select multiple elements with checkboxes :)"
    },
    {
        "name": "bootstrap-show-password",
        "stargazers_count": "32",
        "forks_count": "11",
        "status":1,
        "description": "Show/hide password plugin for twitter bootstrap."
    },
    {
        "name": "blog",
        "stargazers_count": "13",
        "forks_count": "4",
        "status":0,
        "description": "my blog"
    },
    {
        "name": "scutech-redmine",
        "stargazers_count": "6",
        "forks_count": "3",
        "status":1,
        "description": "Redmine notification tools for chrome extension."
    }
];

window.statusEvents = {
    'click .btn': function (e, value, row, index) {

        $('.modal-alert .modal-body').text($(e.currentTarget).attr('alert_title'))
        $('.modal-alert').modal('show')

        var state = row.status==1 ? 0 : 1

        $('.modal-alert .btn-ok').on('click', function(e){
            console.log(row) // row repeat and add before row
            $('.modal-alert').modal('hide')
            $.ajax({
                url: 'controller/status',
                type: "get",
                data: {id:row.id,status:state},
                success: function(data){
                    $table.bootstrapTable('updateRow',{
                        index: index,
                        row: {
                            status: state
                        }
                    })
                }
            });


        })

    }
}

function statusFormatter(value, row, index){

    var html = '';
    if(value==1){
        html =  '<a class="btn btn-default active" title="unBan" alert_title="Unactive ?"><span class="glyphicon glyphicon-check"></span></a>';
    }else{
        html =  '<a class="btn btn-default" title="Ban"  alert_title="active ?"><span class="glyphicon glyphicon-check"></span></a>';
    }
    return html;
}

$(function () {
    $('#table').bootstrapTable({
        data: data
    });
});

[jackie88558]

There is no response for clicking .btn in your demo.
I'm not very clear about the meaning of this sentences

I see the row data repeat ( in console mode ), i can't update for this row, each time so that updates for all other row

[thanhmabo]

@jackie88558
sorry, I fixed code, now you can test. ( enable console mode on browser )

• When you click .btn , modal open, now you click ok button, console mode will show 1 row data
• Again you click other .btn , modal open, now you click ok button, console mode will show 2 row data
• Third .................. show 3 row data.
• Fourth ................ show 4 row data. !! ???, i just want data of this row, to update ajax.

Please Help me. ( earlier I used datatables.net, but it is the same problem)

[jackie88558]

I've tried a lot to fix your bug, but it didn't work. But I found some clues.
I added log for row & index both in .btn click function and .btn-ok click function. Row and index changed somehow between these two times.In .btn click function, values are completely correct. But incorrect in .btn-ok click function.
It's really weird because I couldn't find any code which affacts them between these 2 times.

window.statusEvents = {
    'click .btn': function (e, value, row, index) {

        $('.modal-alert .modal-body').text($(e.currentTarget).attr('alert_title'))
        $('.modal-alert').modal('show')

        var state = row.status==1 ? 0 : 1

        console.log(row);
        console.log(index);

        $('.modal-alert .btn-ok').on('click', function(e){
            console.log(row) // row repeat and add before row
            console.log(index);
            $('.modal-alert').modal('hide')
            $.ajax({
                url: 'controller/status',
                type: "get",
                data: {id:row.id,status:state},
                success: function(data){
                    $table.bootstrapTable('updateRow',{
                        index: index,
                        row: {
                            status: state
                        }
                    })
                }
            });


        })

    }
}

By the way, I used window.operateEvents in my code. I don't know what's the difference between operateEvents and statusEvents. I tried to use operateEvents in your code. But the .btn click function didn't work anymore.

[dabros]

@thanhmabo @jackie88558

Its unclear where this is at the moment, please make it clear what is solved and not, if same issue or 2 different issues, ect.

thanks

[jackie88558]

I didn't find a way to fix his bug, so it's 1 issue.

[wenzhixin]

You need to unregister the click event:

$('.modal-alert .btn-ok').off('click').on('click', ...

[thanhmabo]

@wenzhixin Thanks so much

[wenzhixin]

Let's close this issue.