Scripts not working anymore

Scripts not working anymore

satyriasissatyriasis Posts: 30Questions: 7Answers: 0
edited January 2022 in Free community support

Hi guys, I recently migrated hosting. and, using formidable forms on wordpress, I just re-imported everything I made, using in a views your scripts... for some reason they dont work any more. Could there be some issue?

<table id="moja" class="display" width="100%"> 
<thead>
<tr>
<th>Br</th>
<th>Termin</th>
<th>Stranka</th>
<th>Kvart</th>
<th>Usluga</th>
<th>Dolasci</th>
<th>Zarada</th>
<th>Status</th>
<th>Uredi</th>
</tr>
</thead>
<tbody>


---data of table-- )long so I did not copy---
 </tbody>
</table>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
<script>
$('#moja').DataTable({
 responsive: true,
      language: {
         url: '//cdn.datatables.net/plug-ins/1.11.3/i18n/hr.json'
       },
       dom: 'Bfrtip',
       buttons: [
           { extend: 'copy', className: 'nectar-button medium regular extra-color-1  regular-button tableBtn' },
           { extend: 'csv', className: 'nectar-button medium regular extra-color-1  regular-button tableBtn' },
           { extend: 'excel', className: 'nectar-button medium regular extra-color-1  regular-button tableBtn' },
           { extend: 'print', className: 'nectar-button medium regular extra-color-1  regular-button tableBtn' }
       ] });
</script>

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    Please describe what is not working. Do you get errors in the browser's console?

    Can you post a link to your page so we can help debug?

    Kevin

  • satyriasissatyriasis Posts: 30Questions: 7Answers: 0
    edited January 2022

    ofcourse. here it is: https://masinko.hr/fctbaza/ it is not showing search and pagination bar, and no buttons :neutral:

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    No doubt I'm just being a bit daft, but I don't see a table on that page at all? Is there something I need to do to make it show?

    Allan

  • satyriasissatyriasis Posts: 30Questions: 7Answers: 0

    no, sorry, it was my fault, it was set to private, now it is not anymore. can you check again please?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    You said the Datatable isn't showing the buttons, search input or paging. I see all of them and a quick test of the search input works and I can download a CSV. Please provide the steps to show the problems you are having.

    Kevin

  • satyriasissatyriasis Posts: 30Questions: 7Answers: 0
    edited January 2022

    Waiting for the answer, I managed to solve this <script> jQuery(document).ready( function () { jQuery('#moja').DataTable({ responsive: true, language: { url: '//cdn.datatables.net/plug-ins/1.11.3/i18n/hr.json' }, dom: 'Bfrtip', buttons: [ { extend: 'copy', className: 'nectar-button medium regular extra-color-1 regular-button tableBtn' }, { extend: 'csv', className: 'nectar-button medium regular extra-color-1 regular-button tableBtn' }, { extend: 'excel', className: 'nectar-button medium regular extra-color-1 regular-button tableBtn' }, { extend: 'print', className: 'nectar-button medium regular extra-color-1 regular-button tableBtn' } ] }); }); </script>

    But now I have a problem of search button sticking to my form literally, I dont know how to make it separated and also my csv exporting with strange symbols and all data in one row...maybe I did something wrong?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    my csv exporting with strange symbols and all data in one row

    Looks like there are 4 lines; one header and 3 data rows:

    "Br","Termin","Stranka","Kvart","Usluga","Dolasci","Zarada","Status","Uredi"
    "1Kreirano: 04.01.2022, 22:19","10-12","Ana Krček , Tvrtka Krček doo  Adresa: Jaruščica 1, 1. kat Broj mobitela: (098)/2828-822 Potreban R1 račun Naziv tvrtke: Krček doo Adresa tvrtke: JAeun 1 , 1. kat OIB: 151552525272","Zagreb, Blato","Perilica rublja i Ugradnja ploče za kuhanje [if 1843]Marka: [1843][/if 1843] [if 2235]Starost: [2235][/if 2235] [if 2236]Problem: [2236 wpautop=0][/if 2236] [if 1844 wpautop=0]Napomena: [1844 wpautop=0][/if 1844] [if 1886 equals=”Da”]Dodatni uređaj[/if 1886] [if 1891]Marka: [1891][/if 1891] [if 1895]Starost: [1895][/if 1895] [if 1896]Problem: [1896 wpautop=0][/if 1896] [if 1897]Napomena: [1897 wpautop=0][/if 1897]","","$0.00 HRK (gotovinski) Račun","U tijeku Draft","|"
    "1Kreirano: 04.01.2022, 22:19","","Ana Krček , Tvrtka Krček doo  Potreban R1 račun Naziv tvrtke: Krček doo Adresa tvrtke: JAeun 1 , 1. kat OIB: 151552525272","Zagreb, Blato","Perilica rublja i Ugradnja ploče za kuhanje [if 1843]Marka: [1843][/if 1843] [if 2235]Starost: [2235][/if 2235] [if 2236]Problem: [2236 wpautop=0][/if 2236] [if 1844 wpautop=0]Napomena: [1844 wpautop=0][/if 1844] [if 1886 equals=”Da”]Dodatni uređaj[/if 1886] [if 1891]Marka: [1891][/if 1891] [if 1895]Starost: [1895][/if 1895] [if 1896]Problem: [1896 wpautop=0][/if 1896] [if 1897]Napomena: [1897 wpautop=0][/if 1897]","","() Račun","","|"
    "2Kreirano: 05.01.2022, 12:48","13-15","Ana Malina","Sveta Nedelja, Bestovje","Sušilica rublja [if 1843]Marka: [1843][/if 1843]Marka: Electrolux Starost: 2 godine[if 2235]Starost: [2235][/if 2235] Problem: kkkjk[if 2236]Problem: [2236 wpautop=0][/if 2236] Napomena:  kmkj [if 1844 wpautop=0]Napomena: [1844 wpautop=0][/if 1844] [if 1886 equals=”Da”]Dodatni uređaj[/if 1886] [if 1891]Marka: [1891][/if 1891] [if 1895]Starost: [1895][/if 1895] [if 1896]Problem: [1896 wpautop=0][/if 1896] [if 1897]Napomena: [1897 wpautop=0][/if 1897]","","() Račun","","|"
    

    For strange symbols are you referring to things like [if 1886 equals=”Da”]? If so that is in the raw table. You can use the browser's View Source option to see this. You can use Orthogonal data to strip the undesired data. See this example.

    search button sticking to my form literally, I dont know how to make it separated

    Sorry I'm not sure I understand what you mean. What do you mean by making it separated?

    Kevin

  • satyriasissatyriasis Posts: 30Questions: 7Answers: 0
    edited January 2022

    I mean search bar wasnt so close to my table before... Is there a way to put some space between?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    Maybe adding this CSS will do what you want:

    .dataTables_filter input {
        margin-bottom: 30px;
    }
    

    Kevin

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    Looks like you are missing buttons.dataTables.min.css. Adding this might help place the buttons and search input on the same line. Use the Download Builder to get all the correct Datatable libraries.

    Kevin

  • satyriasissatyriasis Posts: 30Questions: 7Answers: 0
    edited January 2022

    Can I maybe ask you for help, since I dont see it on download list when I click on buttons...I am a bit new so I dont understand this... I now have:

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
    <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
    

    What do I need to add?
    I tried with adding

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.1.0/css/buttons.dataTables.min.css">
    

    it only added the styling to the buttons but still search form is not properly centered now and is sticked to the table beneath... you can check on masinko.hr/fctbaza

    Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    edited January 2022

    It looks like you've only added a single CSS file. The best bet is to go to the download page and click on all the extensions you want - you'll see at the bottom of the page all the files you need, which can be copied and pasted into your project.

    Colin

  • satyriasissatyriasis Posts: 30Questions: 7Answers: 0

    Ok, so on this download page, I clicked Step 1. Choose a styling framework
    DataTables-- DataTables' default styling., Step 2. Select packages - selected data tables, Extensions - I chose buttons. Under pick default method - I chose CDN and copy pasted this two lines instead of those I had before. I got

    ```<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.3/b-2.1.1/r-2.2.9/datatables.min.css"/>

    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.3/b-2.1.1/r-2.2.9/datatables.min.js"></script>```

    And the problem is still the same. Does anyone have any suggestion?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    As I suggested above you can add this CSS to override the default to move the search input up:

    .dataTables_filter input {
        margin-bottom: 30px;
    }
    

    Use 30px or whatever value suites your needs.

    You still have some problems with the Datatables libraries. You selected buttons in the download builder but you also have 1.6.1/js/dataTables.buttons.min.js listed individually. You don't want to duplicate them plus the download builder provided buttons 2.1.1 and your individual lines have an older 1.6.1 version. This will cause problems:

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.3/b-2.1.1/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.3/b-2.1.1/datatables.min.js"></script><br />
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script><br />
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script><br />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script><br />
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script><br />
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script></p>
    

    In the download builder you can also choose HTML5 export, JSZip and Print view then replace all the above lines with the two that are generated.

    Kevin

  • satyriasissatyriasis Posts: 30Questions: 7Answers: 0

    Thanks. Where do I put this code for margin bottom?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    It is applied within the <style> element on your page. See the Internal CSS of this tutorial.

    Kevin

  • satyriasissatyriasis Posts: 30Questions: 7Answers: 0

    This solved it thanks^!

Sign In or Register to comment.