Empty form after second call

Empty form after second call

Hildeb67Hildeb67 Posts: 74Questions: 19Answers: 1

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+

Answers

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • Hildeb67Hildeb67 Posts: 74Questions: 19Answers: 1

    Is that okay?

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    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

  • Hildeb67Hildeb67 Posts: 74Questions: 19Answers: 1

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

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • Hildeb67Hildeb67 Posts: 74Questions: 19Answers: 1

    sorry, completely forgot.
    Is done

    Chris

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

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

    Kevin

  • Hildeb67Hildeb67 Posts: 74Questions: 19Answers: 1

    Yes, unfortunately I didn't have any success

    Chris

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • Hildeb67Hildeb67 Posts: 74Questions: 19Answers: 1

    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

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • Hildeb67Hildeb67 Posts: 74Questions: 19Answers: 1

    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

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • Hildeb67Hildeb67 Posts: 74Questions: 19Answers: 1

    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

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • Hildeb67Hildeb67 Posts: 74Questions: 19Answers: 1

    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

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • Hildeb67Hildeb67 Posts: 74Questions: 19Answers: 1

    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

Sign In or Register to comment.