Kroneaux Schneider Kroneaux Schneider - 4 months ago 7
jQuery Question

Why does BootstrapTable work just once?

I'm making a webApp and in one screen there are two tables, the first one for the categories I store on a DB and the second for the elements that belong to those categories. Both are BootstrapTable. What I'm trying to do is that when the user clicks on a row of the first table, the items of that category will load in the second table, and I managed to do so but it just works once. If I click on the first table then the second fills up, but if i click again over any other element of the first table nothing happens. I even used console.log to see if the event works and it does, before and after the table "reload".

function getProductos(Categoria) {
var id_cat=Categoria||iSeldCat;
$('div#tableProds').bootstrapTable({
url: '../../../controllers/classproductos?getProductos=-&categoria='+id_cat,
cache: false,
condensed: true,
striped: true,
search: true,
language: 'spanish',
showColumns: false,
showRefresh: false,
columns: [
{
field: 'codigo',
title: 'Código',
width: '15%'
},{
field: 'rutaImg',
title: 'Imagen',
formatter: utils().imagenProductoCRUD,
width: '130px'
}, {
field: 'descripcion',
title: 'Nombre',
width: '35%'
}, {
field: 'precioventa',
title: 'Precio Venta',
formatter: utils().formatPriceTable,
width: '10%'
}, {
field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: '10%'
}
]
});
console.log(id_cat + " Print");
}


When running that code, I get in my console
1 Print
,
3 Print
and son on, but the table just doesn't do anything.

This is the first table, including the event which as I said before, works everytime:

function getCategorias(){
$('div#categoriastab').bootstrapTable({
method: 'post',
url: '../../../controllers/classcategorias?getCategorias=-',
dataType: 'json',
cache: false,
condensed: true,
striped: true,
search: true,
showColumns: false,
showRefresh: false,
idField: 'id_categoria',
columns: [{
field:'id_categoria',
title: 'ID'
},{
field: 'imagencat',
title: 'Imagen',
formatter: utils().imagenCRUD,
align: "left",
width: "15%"
},{
field: 'nombre',
title: 'Categoría',
align: "left",
width: "65%"
}, {field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: "20%;"
}
]
}).on('click-row.bs.table', function (e, row, $element) {
iSeldCat=row.id_categoria;
getProductos(iSeldCat);
});
}


Any idea what it could be?

Answer

This approach of bootstrapping the table again should be avoided. Handle this in the following way.

On document ready

$(document.ready(function() {
    $('div#categoriastab').bootstrapTable({
        method: 'post',
        url: '../../../controllers/classcategorias?getCategorias=-',
        dataType: 'json',
        cache: false,
        condensed: true,
        striped: true,
        search: true,
        showColumns: false,
        showRefresh: false,
        idField: 'id_categoria',
        columns: [{
            field:'id_categoria',
            title: 'ID'
        },{
            field: 'imagencat',
            title: 'Imagen',
            formatter: utils().imagenCRUD,
            align: "left",
            width: "15%"
        },{
            field: 'nombre',
            title: 'Categoría',
            align: "left",
            width: "65%"
        }, {field: '',
            title: 'Acciones',
            formatter: utils().buttonCRUD,
            align: 'center',
            width: "20%;"
            }
        ]
    }).on('click-row.bs.table', function (e, row, $element) {
        iSeldCat=row.id_categoria;
        getProductos(iSeldCat);
    });

    $('div#tableProds').bootstrapTable({
        data: [],
        cache: false,
        condensed: true,
        striped: true,
        search: true,
        language: 'spanish',
        showColumns: false,
        showRefresh: false,
        columns: [
            {
                field: 'codigo',
                title: 'Código',
                width: '15%'
            },{
                field: 'rutaImg',
                title: 'Imagen',
                formatter: utils().imagenProductoCRUD,
                width: '130px'
            }, {
                field: 'descripcion',
                title: 'Nombre',
                width: '35%'
            }, {
                field: 'precioventa',
                title: 'Precio Venta',
                formatter: utils().formatPriceTable,
                width: '10%'
            }, {
                field: '',
                title: 'Acciones',
                formatter: utils().buttonCRUD,
                align: 'center',
                width: '10%'
            }
        ]
    });
}

On selection of item

function getProductos(iSeldCat) {
    $('div#tableProds').bootstrapTable('refresh', {url: "../../../controllers/classproductos?getProductos=-&categoria=" + iSeldCat});
}

I have not tested this code functionality. But this should be the approach. You may refer Bootstrap Table documentation for property and method call details.

Comments