Empty form after second call

Hildeb67

Hello,
I have built a data table with my own filter. (see yellow circle)
When the table is called up for the first time, all data is displayed in the editor.
But after I make a selection in the filter and display the form, it remains empty.
See second screenshot.

picture afterwards

Here is the link on my test page
https://www.future-tec-au.com/WEBKG/login.php
adminas@md.de
AdminAtemschutz24+

allan

Thanks for the link! Could you possibly change dataTables.editor.min.js to be dataTables.editor.js in the Javascript that is being loaded? I'm finding it difficult to track through the minified code. There is obviously something going wrong, but I'm not sure at the moment what it is, and I'll need to trace it through the code to see what is happening.

Thanks,
Allan

Hildeb67

Is that okay?

kthorngren

You probably should temporarily remove or comment out the first line with datatables.editor.min.js. You don't want to load it twice. Once debugging is done you can go back to the minified file.

Kevin

Hildeb67

Thanks for the info Kevin,
I commented out the line.
Chris

allan

Looks like

<script type="text/javascript" language="javascript" src="js/dataTables.editor.min.js"></script>

is still present just a little further down in the includes (line 63 in the rendered output). Could you remove that one as well please?

Thanks,
Allan

Hildeb67

sorry, completely forgot.
Is done

Chris

kthorngren

Having multiple instances could cause strange issues. Did you try the page again after removing the additional editor.js?

Kevin

Hildeb67

Yes, unfortunately I didn't have any success

Chris

allan

Got it - thank you!

It is due to the use of the template (template: '#pächter'). Specifically what is happening is that on the first run the template is present in the document and thus can be used. However, on the second run, the template is no longer in the document (having been removed by the first), and thus can't be found and can't be used.

To work around this, try:

template: $('#pächter').clone()

in the Editor initialisation options. That will keep the original element in the document, and pass Editor a cloned one for it to use. The result should be that the original will still be in the document when you reinitialise the instance the next time around.

The other option is to destroy the old instance before creating a new one, which would cause the template to be reinserted into the document. For example:

if (editorpw) {
  editorpw.destroy();
}

Allan

Hildeb67

Thanks for that. But unfortunately it doesn't work

template: $('#pächter').clone()

I get my tabs displayed here before the form is loaded. (see screenshot)
When reloading is

Where in the code would I have to insert the other option?

if (editorpw) { editorpw.destroy(); }
Chris

allan

Immediately before the initialisation of a new instance that is assigned to editorpw.

You might need to add display: none to the #pächter element.

Allan

Hildeb67

If I am at this point

display: none to the #pächter element
Then no more tabs will be displayed, not even in the form.

Chris

allan

Hi Chris,

<ul class="nav nav-tabs" style="display:none">

explains why the tabs are not visible. However, more than that, because this is a clone, the tabs won't have been initialised by Bootstrap.

For that I think you'll need to initialise the tabs on the clone.

let clone = $('#pächter').clone();
clone.find('ul.nav').tab();

Then:

template: clone

The code is a little confusing as there are editorpw variables created in grundtabelleladen and grundtabelleladen2. In the first there is an Editor instance that is created with what looks to me invalid JS syntax (there is an if inside the initialisation object). editorpw is global there.

In the second, editorpw is local (and thus couldn't be checked to see if it should be destroyed or not. Maybe we should focus on the clone route rather than the destroy one.

Allan

Hildeb67

Yes, you're right Allan.
The code is a bit confusing. However, I am not currently using the basic table loading2 function, it was just an attempt
Now I have inserted your code mentioned above in the following place

editorpw = new $.fn.dataTable.Editor( {     
            ajax:{       
                url: "./controllers/co_paechter.php",
                type: 'post',            
                data: {phpsuchfeld: suchfeld, phpsuchwert: suchwert, phpkennzeichen: kennzeichen}//,
                    //success: function (data) {    
                        //console.log(data);
                        //const myArr = JSON.parse(data);                                   
                        //editorfunktionen.field( 'mitgliederfunktionen.TAETIGKEITSZEIT' ).val(myArr[0]);
                        //return data; 
                    //},                
                         //error: function(data){
                        //alert("Es ist ein Fehler aufgetreten");
                    //}         
                
                
            },
    
        table: "#benver",       
        //template: '#pächter',         
        //template: $('#pächter').clone(),

        let clone = $('#pächter').clone();
        clone.find('ul.nav').tab();         
        template: clone
        
        fields: [  { .........

but get the following error message

Chris

allan

That isn't valid Javascript. You can put let clone = $('#pächter').clone(); inside the object.

Do:

let clone = $('#pächter').clone();
clone.find('ul.nav').tab();

editorpw = new $.fn.dataTable.Editor( { 
  template: clone,
  ....
});

Allan

Hildeb67

Sorry but unfortunately there are still error messages. I've tried it myself for a few days now, but unfortunately without success. I adapted the code as you described.

This is the error message

Chris

allan

You appear to be loading jQuery three different times on your page:

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
...
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
...
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>

I would suggest reducing that to just the 3.7.1 version. I think that the versions are overwriting each other, which is why the Bootstrap tab function isn't available.

From their documentation that is the correct method to use.

Allan

Hildeb67

Hi Allan,
I now only have this entry

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>

and changed this entry to

    let clone = $('#pächter').clone();
    clone.find('ul.nav').tab();

    let clone = jQuery('#pächter').clone();
    clone.find('ul.nav').tab();

editorpw = new $.fn.dataTable.Editor( {
  template: clone,

});

The error message is now gone but it still looks like the tabs are still not displayed in the form

what else could that be? Do you have a tip for me?
Chris