asked on

Converting from POST to GET

Hi,

I have this page: http://kroweb.dk/gfdev/ft_raw6/

I am working on converting it from POST to GET, and I have a few problems that I can't find the solution to.

1. When loading the page it returns a "no result" message, which means that it is performing an initial search which it should not do
2. Performing a search, e.g. for "Blistrup", it is returning the right result
3. The Nulstil (reset) button is not working and when clicking it it seems like it is trying to load another file before reloading the right one.
4. When clicking the search button again without doing anything else, it is "thinking" for a long time, and it seems to be loading the entire database into the table.

I have a "Content Security Policy" marker in the console when clicking the search button the second time, but I don't know how to fix it.

The main file looks like this at the moment

<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
//<!-- Check for user access requirements--> 
$groupswithaccess="PUBLIC";
require_once("../slpw/sitelokpw.php");
?>


<!DOCTYPE html>
<html lang="da">
<head>
    <!-- Check for title--> 
    <title>Folketællinger</title>

    <meta charset="utf-8" lang="da">
    <script type="text/javascript">
    var blabfolderpath="../slpw/plugin_blab/"
    </script>
    <link rel="stylesheet" type="text/css" href="../slpw/plugin_blab/blab.css">
    <script type="text/javascript" src="../slpw/plugin_blab/sarissa.js"></script>
    <script type="text/javascript" src="../slpw/plugin_blab/blab.js"></script>
    <link rel="stylesheet" type="text/css" href="../slpw/plugin_blab/blab.css">
    <script type="text/javascript">
    var memberprofilepage=1
    </script>
    <?php
    if (function_exists('startwhoisonline'))
        startwhoisonline('profileimage,name');
    ?>



    <meta name="viewport" content="width=device-width; initial-scale=1.0"> 
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />
    <link rel="stylesheet" type="text/css" href="../templates/template_style.css">  <link rel="stylesheet" type="text/css" href="style.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

 
  <script type="text/javascript">
    $(function(){
        $('#ft_items').on('click', '.toggle', function() {
            $(this).parents('tr').nextAll('tr.child').toggle();
        });
    });

    </script>
 <script type="text/javascript">
  $(document).ready(function() {
    $('#FtKTable').DataTable({responsive: true, searching: true, paging: false, info: true, select: true, "dom": '<"top"if>t', order: []});
});
  </script>

</head>


<body>
   <!-- Page content start-->        
   <div class="w3-row" style="overflow: auto">

    <!-- Page header start-->  
    <div class="w3-row" style="background-color:#666666">
        <div class="w3-col w3-mobile" style=" width: 25%; padding-top: 12px; padding-left: 10px; height: 80px; background-color:#666666;">
            <div class="w3-container w3-hide-small">
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>        
                <ins class="adsbygoogle" 
                style="display:inline-block;width:250px;height:60px"
                data-ad-client="ca-pub-3626513934315518"
                data-ad-slot="8001567329"></ins>
                <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
        </div>

        <div class="w3-col w3-mobile" style="width: 65%; margin:0; height: 80px; background-color:#666666;">
            <div class="w3-container">
                <input type="text" style="-webkit-font-smoothing:antialiased;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;transition:color .2s ease-in-out;font-family: Lucida Blackletter; text-docoration:none; font-weight:bold; font-size: 48px; text-align:center; text-shadow: 5px 5px 10px #191919;color: #FFFFFF; background-color:#666666; margin-left:0px; border-style:none; height:80px;" value="Folketællinger">
            </div>
        </div>

        <div class="w3-col w3-mobile" style="width: 10%; padding-left: 5px; height:80px; background-color:#666666;">
           <div class="w3-container">    
            <input type="image" style= "margin-top: 5px; margin-buttom: 5px; margin-right: 5 px; width: 70px; background-color: #666666;" img src= "<?php echo $slprofileimage;?>">
        </div>
    </div>

</div> 
<!-- Page Header end-->


<!-- Top Menubar start-->
<?php include('../templates/gf_theme_topmenu-bar.php');?>  
<!-- Top Menubar end-->



<!-- Main page start 4 columns incl. right sidebar-->  
<div class="w3-row">

    <!-- Column1 start-->         
    <div class="w3-col w3-mobile" style="width:70%; margin-top: 30px; margin-left: 5px; margin-bottom:10px; padding-bottom: 10px;"> 
 
      <!-- Søge felt til folketællinger -->
    <div class="container" style="width:130%; height: 45px; padding-top:5px; padding-bottom: 5px; background-color:#f6f6f6;">

       <!-- Form that holds the Sogn to the link clicked and the Amt to limit the search, DON't DELETE --> 
        <form id="search2" style="display:none" target="_blank" method="get">
          <input type="text" name="sogn" id="sogn">
          <input type="text" name="amt" id="amt">
      </form>        

        <div class="row" id="header">

           

            <form method="GET" id="search" style="margin-left:10px; margin-right: 30px;"> 

                <label for="sogn" style="font-family: sans-serif; font-size: 14px; font-weight: bold; color: black; margin-left: 10px;">Skriv By, Sogn, Gade</label>
                <input type="text" name="sogn" id="sogn" placeholder="Fritekst - START HER" style="color: red;">


                <label for="type" style= "margin-left: 10px; font-family: sans-serif; font-size: 14px; font-weight: bold; color: black; ">Type</label>
                <select id= "mytype" name= "mytype" style= "ont-family: sans-serif; font-size: 11px; width: 130px; margin-right: 10px;font-weight:normal;">
                    <option value="">Evt. afgrænsning</option>
                    <option value="Landdistrikt">Søg i Landdistrikter</option>
                    <option value="Købstad">Søg i Købstæder</option>
                    <option value="Hovedstaden">Søg i Hovedstaden</option>
                    <option value="Schlesvig">Søg i Schlesvig</option>
                    <option value="Særtælling">Søg i Særtællinger (alle Typer)</option>
                    <option value="Diverse">Søg i Diverse</option>
                </select>

 
                <label for="amt" style="font-family: sans-serif; font-size: 14px; font-weight: bold; color: black; ">Amt</label> 
                <select id="amt" name="amt" style="ont-family: sans-serif; font-size: 11px; width: 130px; margin-right: 10px; font-weight:normal; ">
                    <option value="">Evt. afgrænsning</option>
                    <option value="Bornholm">Bornholm</option>
                    <option value="Eckernförde">Eckernförde</option>
                    <option value="Eiderstedt">Eiderstedt</option>
                    <option value="Flensburg">Flensburg</option>
                    <option value="Frederiksborg">Frederiksborg</option>
                    <option value="Færøerne">Færøerne</option>
                    <option value="Grønland">Grønland</option>
                    <option value="Haderslev">Haderslev</option>
                    <option value="Hjørring">Hjørring</option>
                    <option value="Holbæk">Holbæk</option>
                    <option value="Husum">Husum</option>
                    <option value="København">København</option>            
                    <option value="Maribo">Maribo</option>
                    <option value="Odense">Odense</option>
                    <option value="Oldenburg">Oldenburg</option>
                    <option value="Præstø">Præstø</option>
                    <option value="Randers">Randers</option>
                    <option value="Rendsburg">Rendsburg</option>
                    <option value="Ribe">Ribe</option>
                    <option value="Ringkøbing">Ringkøbing</option>
                    <option value="Roskilde">Roskilde</option>
                    <option value="Skanderborg">Skanderborg</option>
                    <option value="Slesvig">Slesvig</option>
                    <option value="Sorø">Sorø</option>
                    <option value="Svendborg">Svendborg</option>
                    <option value="Südtondern">Südtondern</option>
                    <option value="Sønderborg">Sønderborg</option>
                    <option value="Thisted">Thisted</option>
                    <option value="Tønder">Tønder</option> 
                    <option value="Vejle">Vejle</option>
                    <option value="Viborg">Viborg</option>
                    <option value="Aabenraa">Aabenraa</option>
                    <option value="Aalborg">Aalborg</option>
                    <option value="Aarhus">Aarhus</option>
                    <option value="Danmark">Danmark</option>
                </select>


                <label for="aar" style="font-family: sans-serif; font-size: 14px; font-weight: bold; margin-left: 0px; color: black">Vælg et År</label>                
                <select id="aar" name="query_start" style=" width: 125px; margin-right: 0px; font-weight:normal; font-size: 11px;">

                    
                    <option value="">Evt. afgrænsning</option>

                    <option value="1787">1787</option> 
                    <option value="1801">1801</option> 
                    <option value="1834">1834</option>
                    <option value="1835">1835</option>
                    <option value="1840">1840</option>
                    <option value="1845">1845</option>
                    <option value="1850">1850</option>
                    <option value="1855">1855</option>
                    <option value="1860">1860</option>  
                    <option value="1870">1870</option>
                    <option value="1880">1880</option> 
                    <option value="1890">1890</option> 
                    <option value="1901">1901</option>
                    <option value="1906">1906</option>
                    <option value="1911">1911</option>
                    <option value="1916">1916</option>
                    <option value="1921">1921</option>
                    <option value="1925">1925</option>
                    <option value="1930">1930</option>
                    <option value="1940">1940</option> 
                                              
                    <option value="1645" class="sepcyear">1645</option>
                    <option value="1664-1833" class="sepcyear">1664-1833</option>
                    <option value="1702-1741" class="sepcyear">1702-1741</option>
                    <option value="1709-1831" class="sepcyear">1709-1831</option>
                    <option value="1717" class="sepcyear">1717</option>
                    <option value="1721-1833" class="sepcyear">1721-1833</option>
                    <option value="1728" class="sepcyear">1728</option>
                    <option value="1731" class="sepcyear">1731</option>
                    <option value="1732-1761" class="sepcyear">1732-1761</option>
                    <option value="1764-1819" class="sepcyear">1764-1819</option>
                    <option value="1764-1848" class="sepcyear">1764-1848</option>
                    <option value="1769" class="sepcyear">1769</option>
                    <option value="1772-1846" class="sepcyear">1772-1846</option>
                    <option value="1773-1846" class="sepcyear">1773-1846</option>
                    <option value="1787-1851" class="sepcyear">1787-1851</option>
                    <option value="1790" class="sepcyear">1790</option>
                    <option value="1803" class="sepcyear">1803</option>
                    <option value="1805" class="sepcyear">1805</option>
                    <option value="1805-1814" class="sepcyear">1805-1814</option>
                    <option value="1810" class="sepcyear">1810</option>
                    <option value="1811" class="sepcyear">1811</option>
                    <option value="1812-1823" class="sepcyear">1812-1823</option>
                    <option value="1812-1871" class="sepcyear">1812-1871</option>
                    <option value="1814" class="sepcyear">1814</option>
                    <option value="1814-1841" class="sepcyear">1814-1841</option>
                    <option value="1815-1867" class="sepcyear">1815-1867</option>
                    <option value="1818" class="sepcyear">1818</option>
                    <option value="1820" class="sepcyear">1820</option>
                    <option value="1822" class="sepcyear">1822</option>
                    <option value="1823" class="sepcyear">1823</option>
                    <option value="1824" class="sepcyear">1824</option>
                    <option value="1826" class="sepcyear">1826</option>
                    <option value="1831" class="sepcyear">1831</option>
                    <option value="1861" class="sepcyear">1861</option>                  
                    <option value="1870-1873" class="sepcyear">1870-1873</option>
                    <option value="1878" class="sepcyear">1878</option>                  
                    <option value="1882" class="sepcyear">1882</option>
                    <option value="1882-1919" class="sepcyear">1882-1919</option>
                    <option value="1886-1907" class="sepcyear">1886-1907</option>

                </select>


               <input type="submit" value="Søg" name="Sog" id="Sog" style="margin-left:45px; padding-right:10px;height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);margin-top: 0px;">  

                <input type="reset" value="Nulstil" style="margin-left:15px; padding-right:10px;height:30px;font-family:arial; font-size: 12px; text-align:left; background-color:#cccccc; border: 2px solid #grey;border-radius:2px; color:black; background-color:#cccccc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);">
                <script>
                $(':reset', '#search').click(function(e) {
                    $('#ft_items').html('');
                    location.reload();
                });
                </script>



        </form>
    </div>       
</div>   


            <div id="ft_items" style="background-color: white;"> </div>

       <div id="searchResults">

            <?php
                include_once('ft_table.php');
            ?>
        </div>

              <!-- Does the limitation in the year select box depending on the choices in the Amt and Type select boxes -->
              <script>
              $(function() {
                  $('#amt').change(function() {
                   $.GET('limit.php',{amt: $(this).val()}, function(options) {
                    $('#aar').html(options)
                }) 
               });
                  $('#mytype').change(function() {
                   $.post('limit.php',{amt: $('#amt').val(), type: $(this).val()}, function(options) {
                    $('#aar').html(options)
                })
               }); 

            })
              </script>   

              <script>
            $(document).on('click', '#FtKTable tr > td:nth-child(3) a', function(e) {
                e.preventDefault();
                $('#sogn').val( $(this).parents('tr').find('td:eq(2)').text() ); 
                $('#amt').val( $(this).parents('tr').find('td:eq(3)').text() );
                $('#search2').attr('action', $(this).attr('href') );
                //alert("do you see it work ?"); // remove this line once you done
                $('#search2').trigger('submit');
              });

      </script>  


    </div>
    <!-- Column1, end-->

  

    <!-- Column4 - Right sidebar start--> 

    <?php include('../templates/gf_theme_sidemenu_ft.php');?>  
    <!-- Column4 - Right sidebar end--> 

</div>
<!-- Main page end--> 

</div>  
<!-- Page content end-->  

<!-- Footer start-->  
<?php include('../templates/gf_theme_footer.php');?>  
<!-- Footer end--> 


</body>   
</html>

Open in new window

Julian Hansen

The page you posted does not use POST anywhere - is the relevant code not in the included (../slpw/sitelokpw.php) file?

Considerations when changing from POST to GET

GET - parameters are passed in the URL - there is an approximate 2k limit on what you can send
GET requests should be idempotent - they should not result in a state change
Don't use sensitive information in GET requests

In your code simply change
$_POST to $_GET to change the server side processing

On the client ensure you either move your variables to the URL or specify (if you are using a form or ajax) that the method is GET.

Chris Stanyon

On Point 1, you need to tell your script not to do anything if you haven't done a search. You can do that in either your main file above, or inside the ft_table.php script. The example below will only try to load the results if the Sog button has been submitted (i.e A Search has been done)

<div id="searchResults">
    <?php if (isset($_GET['Sog'])) { include_once('ft_table.php') }; ?>
</div>

Open in new window

On Point 3, not sure I can replicate that but I don't really understand what you're trying to do with the Reset button. All it seems to do is remove an HTML element (which isn't actually used for anything) and then reload the page, so it's not actually resetting anything. Can't think of any reason why this would make sense.

On Point 4, you would need to look at your DB script to see what happens if a search is done with no data to search against (i.e. an empty search form). It may be that it's running a query and returning all the records from your DB. If I do an empty Search it takes nearly 30 seconds to load and the page is upto 35mb of in size !!!! The DataTable displays "Showing 1 to 18 of 18 Results" when there are clearly thousands of results.

Overall, your site is going to be very clunky, simply because of that amount of information you're trying to load. A simple search is making upwards of 100 requests for information to dozens of different servers. As it is, it's never going to be slick.

Peter Kroman

ASKER

Thanks Chris,

I think that issue 1 and 3 is in place now.

Regarding issue 4, I have this line at the start:

if (empty($_GET)) { return; }

Open in new window

but it seems that the $_GET is not empty after a search is performed
How do I fix that?

Peter Kroman

ASKER

... actually I would want the Reset button to empty the $_GET ..... and removing the table (which it does now ...)

Chris Stanyon

When you submit an empty form, it still makes a GET request, so the $_GET array won't be empty. All the keys will be submitted with empty strings, and the buttons will be submitted, so you can't just check for empty! That will only work if no search has been done at all.

So you will need to check the entire GET request and the specific values from your form to see if they're empty:

if ( empty($_GET) || ( empty($_GET['sogn']) && empty($_GET['mytype']) && empty($_GET['amt']) && empty($_GET['query_start']) ) ):
    return;
endif;

Open in new window

Be aware of where the brackets are. We're checking 2 different things here. We're checking to see if the GET array is empty (no search has been done) OR if all the individual entries are empty (a search was done but with no information)

Peter Kroman

ASKER

Yes - that works. But I've had to change the Reset button to type Submit to get that working again.

About the feeling that is is loading another page, it shows like a glimt of the table with quite another styling. So I have looked into my CSS files, and I have found out that it is loading with my stylings first and then add the DataTable stylings a split-second after that. I have not seen this before - so I would like to ask if there could be a reason for that and if there is a solution to it.

I load my stylesheets like this:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../templates/template_style.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="style.css">

and my own style.css looks like this:

      


       
        #FtKTable thead{font-family: Serif; font-size: 18px; background-color:#f6f6f6; text-align:left; padding-left: 10px; text-align: left;}
        #FtKTable thead{background-color: #f6f6f6;font-family: serif; font-size: 18px; text-align: left;}
        #FtkTable th{text-align: left;}
     
        #FtKTable, td {
        background-color: rgba(204, 255, 153, 0.2); text-align: left;         
        }    
 
          
        #FtKTable tbody .ftChild:nth-child(odd) { background-color: #f2f2f2; display: none;border-bottom: 1px solid black #666666; }
        #FtKTable tbody .ftChild:nth-child(even) { background-color: lightgrey; display:none;border-bottom: 1px solid black; }
        #FtKTable tr td:nth-child(1){width: 15px; font-size: 12px; font-weight:normal; color:black;border-bottom: 1px solid black; text-align: center;}
        #FtKTable tr td:nth-child(2){width: 500px;font-size: 12px; font-weight:bold; color:blue; border-bottom: 1px solid black;;}
        #FtKTable tr td:nth-child(3){width: 25px;font-size: 12px; font-weight:bold; color:blue;border-bottom: 1px solid black;}
       #FtKTable tr td:nth-child(4){width: 10px; font-size: 12px; font-weight: normal; color:black;border-bottom: 1px solid black;}
        #FtKTable tr td:nth-child(5){width: 25px;font-size: 12px; font-weight: normal; color:black;border-bottom: 1px solid black;}
        #FtKTable tr td:nth-child(6){width: 25px;font-size: 12px; font-weight: normal; color:black;border-bottom: 1px solid black;}




 
        #FtKTable tbody .ftChild.showChild { display: table-row; background-color: #f2f2f2;font-size: 12px; font-weight: normal; color:black; }

        .dataTables_filter { float:right; margin-top: 4px; margin-bottom: 4px; margin-right: 5px;}
        /*.dataTables_info { float: left; }*/ 
        .sepcyear { color:red; }



    p {
        margin-top: 0px;
        padding-top:0px;
        margin-bottom: 0px;
        margin-right: 10px;
        margin-left: 0px;
        color: #9F5584;
        font-weight: bold;
        font-family: Serif;
        font-size: 18px;
        padding-left:5px;
        text-align: left;
        

    }

    h3 {
        margin-top: 0px;
        padding-top:0px;
        margin-bottom: 0px;
        margin-right: 10px;
        margin-left: 0px;
        color: #9F5584;
        font-weight: normal;
        font-family: Arial ;
        font-size: 18px;
        text-align: center;

    }

    h4 {
        margin-top: 0px;
        padding-top:0px;
        margin-bottom: 0px;
        margin-right: 10px;
        margin-left: 0px;
        color: #9F5584;
        font-weight: bold;
        font-family: Serif;
        font-size: 16px;
        margin-top: 15px;
        text-align: center;

    }


    h5 {
        margin-top: 0px;
        padding-top:0px;
        margin-bottom: 0px;
        margin-right: 0px;
        margin-left: 0px;
        color: black;
        font-weight: bold;
        font-family: Serif ;
        font-size: 16px;
        margin-top: 8px;
        text-align: left;

    }

    h6 {
        margin-top: 0px;
        padding-top:0px;
        margin-bottom: 0px;
        margin-right: 10px;
        margin-left: 0px;
        color: #666666;
        font-weight: normal;
        font-family: Helvetica ;
        font-size: 16px;
        text-align: left;

    }
      
    a:link {}
    a:visited{}
    a:hover {color: red; font-weight: bold}
    a:active{}

Open in new window

Chris Stanyon

Unfortunately Peter, because your page has become slow and clunky, you may have the side-effect of CSS Flash. The DataTables script won't be fired until the document is ready (which in your case may take quite a while). Before this happens, it looks like your CSS is being applied to the table. Only after the DataTables call is made will the styling for that kick in, resulting in a flash of styling.

Reducing the overhead of your page would be the best way forward here.

Peter Kroman

ASKER

I still don't understand.

The page is actually not slow - it is in fact quite speedy :) And why do you think it is clunky? I think the page does what it is supposed to do, and that it gives the user the posibillities the user needs to find what he is searching for.

The "normal" way to use this page is to put in as search string in the field an choose a year (År), or use to use this together with the other limitation-options in the select boxes.

Try e.g to put in "Kvong "in the field and choose the year 1860. This will return one entry and it goes rather quickly. But it still does the "flashing".

Can I reduce that by reducing the overhead - and how do I reduce the overhead?

Chris Stanyon

OK Peter,

It seems slow to me. Taking 3 or 4 seconds to load your page may seem quick, but given that the CSS flash only last a couple of hundredths of a second, it's slow enough. A simple page rquest to your site is actually making over 80 separate request for info, and loading up over 2mb.

It looks very much like the blab stuff and the ad stuff is slowing down your page, so you could start be moving ALL of that to the footer. All the blab and online stuff is loading right at the start of your page - it should really only load at the end, otherwise all those scripts need to be processed before your page has even loaded. While you're testing the functionality of your site, you might want to consider removing those scripts all together - with them in there, they just act as white noise, so you don't know whether the problem is being caused by them or something else. Remove them and see if that removes the problem - add them back in later.

Your site isn't on an SSL connection, so it makes no sense for your to load up the external scripts and styles from https://. Try making the requests to a standard http:// and see if that helps.

Combine and minify all the stylesheets that you can (maybe only styles.css and template_styles.css).

Make sure all your plugin / external scripts are up-to-date and where possible make sure you use the minified versions. If you're pulling from an external server, consider loading it up from your own server - it may be faster.

Strip out all unnecssary 'junk'.

Consider setting up caching / gzip on your server.

As a last resort, you could 'hide'your table by default, and then 'show' it using jQuery in the document ready block. It's a bit of a hack, but by the time you come to show it, all the necessary files should be loaded so you should minimise the changes of CSS Flash. You could even fade it in, which might look nicer.

Peter Kroman

ASKER

I am working on it.

But I have established that this is NOT a CSS problem. I have tried to remove all CSS calls, and then the page looks very odd, but it still does the flashing.

My page should be on a SSL connection - that is what my hosting partner tells med that he is delivering ... so if that is not true, I surely need to get in touch with my hosting partner.

I'll keep on working with your other suggestions, and I'll get back when I (hopefully) is a little wiser :) :)

Chris Stanyon

Hey Peter,

No worries. I never said it was a CSS issue. Basically, what is happening is that when your poage loads up, the table is styled with your own CSS. Some point later, the DataTables function call is made, which adsd some classes to your table so that it now uses the styles from the DataTables css (as well as your own). It's the time between showing the table and firing the DataTables function that you get the flash.

The idea here is that your page resources load quick enough that there is no time between showing the table and loading the DataTables.

Just looked at your page again and it seems that it's now not doing the CSS flash.

Peter Kroman

ASKER

It is still there all right :)

I have tried everything, and nothing seems to help. So I think I tend to go with your "hide and show" function that you've mentioned above.

I just don't know how to set it up. Hope you can guide me a little on that.

I have this document ready block:

        $(document).ready(function() {

        /* Initialize the DataTable */    
        $('#FtKTable').DataTable({responsive: true, searching: true, paging: false, info: true, select: true, "dom": '<"top"if>t', order: []});
 
        /* Toggle ?? */
        $('#FtKTable').on('click', '.ftMaster', function() {
        $(this).nextAll('.ftChild').toggle();
        });

        /* Toggle ?? */
        $(function(){
        $('#ft_items').on('click', '.toggle', function() {
            $(this).parents('tr').nextAll('tr.child').toggle();
        });
    });

});

Open in new window

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Peter Kroman

ASKER

Thanks Chris,

That works :)

And I have got the SSL problems solved now, so the page now is running smothly on https :)

Chris Stanyon

All good Peter.

Peter Kroman

ASKER

Hi Chris,

I am in the proces of moving the rest of my pages to GET, and I am progressing nicely :)

I have one question though. You might not be the right to ask, but I am trying anyway.

After I change my pages to GET my ads become very unstable. When I load the page they are there, when I perform ar search they disapear, and some might come back later and some don't.

Do you have any idea what causes that?

Chris Stanyon

Hey Peter,

I'm guessing there's something else going on in your pages as it shouldn't matter whether it's a POST or GET request. Check any conditional coding you have - such as within any isset($_GET) calls. You may be inadvertantly excluding some vital code.

Peter Kroman

ASKER

Thanks Chris,

I'll look into that.
It might be something like that because when I do a submit with content in the search string the ads disappear, and when I do a submit with an empty search string they pop up again just as they should.

Peter Kroman

ASKER

I can't get the ads to be more stable, but that's not so important. I'll close this question now, and send you a pm :)

Peter Kroman

ASKER

Thanks again Chris for excellent help to make this work as expected