Redraw Footable with new data on click on a tab

[JujuPomme]

Hey All,

I've actually this configuration in my HTML for my footable :
<table id="editing-example" class="table" style="visibility: hidden;" data-sort="true" data-editing-show-text='<span class="fooicon fooicon-pencil" aria-hidden="true"></span> Edit rows' data-editing="true" data-editing-always-show="true" data-editing-add-test="Ajouter un nouvel interlocuteur" data-filtering="true" data-editing-edit-text='<span class="fooicon fooicon-pencil" aria-hidden="true"></span>' data-paging="true" ></table>

It's working fine, but I need to reload the data when I click on a tab. But each time, It copy/past the configuration, like I've 2 input text to search something, after 3 input, 4, 5... Each click on my tab, one more configuration is displayed.

How can I fix it?

Thanks, and congrats for ur plugin !

[JujuPomme]

No one can help?...

[steveush]

Hi,

I've managed to replicate the issue locally and will be releasing a fix for this issue in the next version. The issue is that the destroy methods of the various components are not being called when initializing the plugin using the FooTable.init() method. They are being called in the current version if the jQuery constructor is used.

Thanks

[JujuPomme]

Ok so I've to wait the next version?

[steveush]

In short, yes, or change the portion of code to use the jQuery constructor $("#table-id").footable(). I'm currently working on the next version and hope to have it out in the next day or two so the wait shouldn't be very long.

Thanks

[JujuPomme]

To use the jQuery constructor, I have a lot of change to do ?

Thanks for your answers, and congrats again for this plugin !

[steveush]

Hi,

It depends on how you are using FooTable. If you are using the variable returned from FooTable.init() then you have to change a little bit of code. Basically the below outlines the changes:

Using the original FooTable.init():

var ft = FooTable.init({ /* options */ });
// use the ft variable as needed

Using the jQuery constructor $("#table-id").footable():

var ft = $("#table-id").footable({ /* options */ }).data("__FooTable__");
// use the ft variable as needed

Thanks

[JujuPomme]

And theses two codes works in the same way?

[steveush]

Yes, the ft variable would be the same thing, an instance of FooTable.Table. The only difference at the moment is the bug you have encountered using the FooTable.init() method that will be fixed shortly.

[JujuPomme]

Ok so it's working too, thanks for that tips !

One more thing :
When I click on my tab once, it's working. Twice, my table is hidden, I've only the options displayed. If I click one more time (so the third click) my table is displayed again. So you understand that one time, it's hidden, for the another, it's displayed. How can I fix it?

I've this sample of code :
`$('a#interlocuteurs_id').click( function() {
alert('a');
var $modal = $('#editor-modal'),
$editor = $('#editor'),
$editorTitle = $('#editor-title'),
// ft = FooTable.init('#editing-example', {
ft = $("#editing-example").footable({
ajaxEnabled: true,
"sorting": { "enabled": true },
columns: $.get('interlocuteur_table/columns.json'),
//rows: $.get('test.json'),
rows: $.ajax({
url :'interlocuteur_table/server_side_interlocuteur.php',
dataType: 'json',
success: function(data) {
$('#editing-example').trigger('footable_redraw');
}
}),
paging: {
limit: 5,
size: 10
},
editing: {
"addText": "Ajouter un nouvel interlocuteur",
enabled: true,
addRow: function(){
$modal.removeData('row');
$editor[0].reset();
$editorTitle.text('Ajouter un nouvel interlocuteur');
$modal.modal('show');
},
editRow: function(row){
var values = row.val();
$editor.find('#nom').val(values.I_NOM);
$editor.find('#prenom').val(values.I_PRENOM);
$editor.find('#telephone').val(values.I_TEL1);
$editor.find('#portable').val(values.I_TEL3);
$editor.find('#email').val(values.I_EMAIL);
$editor.find('#fonction').val(values.I_ADRESSE4);
$editor.find('#code').val(values.I_CODE);
$modal.data('row', row);
$editorTitle.text('Modifier ' + values.I_PRENOM + ' ' + values.I_NOM);
$modal.modal('show');
},
deleteRow: function(row){
var values = row.val();
$.ajax({
url: 'interlocuteur_table/delete_in_bdd.php',
dataType: 'json',
data: { code: values['I_CODE'] },
success: function(data) {
if (data.statut == 'OK') {
if (confirm('Voulez-vous vraiment supprimer cet interlocuteur?')){
row.delete();
$("#delete_interlocuteur").html(data.message).show();
}
} else
$("#delete_interlocuteur_fail").html(data.message).show();
}
});
}
}
}).data("Footable");
uid = 10;

$editor.on('submit', function(e){
    if (this.checkValidity && !this.checkValidity()) 
        return;
    e.preventDefault();

    var row = $modal.data('row'),
        values = {
            I_TITRE: $editor.find('#interlocuteur_titre_id').val(),
            I_NOM: $editor.find('#nom').val(),
            I_PRENOM: $editor.find('#prenom').val(),
            I_TEL1: $editor.find('#telephone').val(),
            I_TEL3: $editor.find('#portable').val(),
            I_EMAIL: $editor.find('#email').val(),
            I_ADRESSE4: $editor.find('#fonction').val(),
            I_CODE: $editor.find('#code').val()
        };

    if (row instanceof FooTable.Row){
    // edit
        $.ajax({
            url: 'interlocuteur_table/update_in_bdd.php',
            dataType: 'json',
            data: { nom: values['I_NOM'], prenom: values['I_PRENOM'], telephone: values['I_TEL1'], portable: values['I_TEL3'], email: values['I_EMAIL'], fonction: values['I_ADRESSE4'], code: values['I_CODE']},
            success: function(data) {
                if (data.statut == 'OK'){
                    $("#edit_interlocuteur").html(data.message).show();
                }else 
                    $("#edit_interlocuteur_fail").html(data.message).show();
            }
        });
        row.val(values);

    } else {
        // add
        $.ajax({
            url: 'interlocuteur_table/insert_in_bdd.php',
            dataType: 'json',
            data: { titre: values['I_TITRE'], nom: values['I_NOM'], prenom: values['I_PRENOM'], telephone: values['I_TEL1'], portable: values['I_TEL3'], email: values['I_EMAIL'], fonction: values['I_ADRESSE4'] },
            success : function(data) {
                if (data.statut == 'OK')
                    $("#ajout_interlocuteur").html(data.message).show();
                else
                    $("ajout_interlocuteur_fail").html(data.message).show();
            }
        });
        ft.rows.add(values);
    }
    $modal.modal('hide');
});

});`

Lot of comments and test, sorry..

[steveush]

Hi,

Sorry, it's kind of hard to tell just looking at the code, the only thing I did spot is that the .data("__FooTable__") you added has a missing capitalized T. Yours currently reads as __Footable__ instead of __FooTable__. If you have somewhere I could look at the code live I could possibly find the issue but without being able to see it or debug it I'm afraid I couldn't say why the table only appears every other click.

Thanks

[JujuPomme]

I'd like to provide you a test case but I can't, it's locally and you need access because there are some confidentials informations...

Maybe, do you have an idea to catch that? Any javascript tricks?

Thanks to you

[steveush]

Hi,

Sorry but there could be so many different possibilities I'm not really sure where to start. The best bet is for you to create a jsfiddle that replicates the issue without compromising your confidential information that I could then take a look at.

Thanks

[JujuPomme]

One more thing :

When I click on the same tab several time (not spam), the table displayed is always longer than the previous one. It's a bit strange how the plugin works in that case...

[JujuPomme]

Ok, I've find the problem and maybe it could help you.

When I click on the same tab, one more class is added to my

like 'footable-2' for the second click, 'footable-3', 'footable-4' and so... Why?

[JujuPomme]

Last question for today I think,

Why with var ft = $("#table-id").footable({ /* options */ }).data("__FooTable__");, my ft variable is undefined when I add someone?

[steveush]

Hi, the issues with the FooTable.init() and multiple CSS classes being added to the table should be fixed in 3.0.10