Home Show / hide php mysql results with loader
Reply: 1

Show / hide php mysql results with loader

perastikos1
1#
perastikos1 Published in 2018-01-12 22:04:51Z

I have MySQL database results.

I want to show 3 rows and then hide rest.

When the user clicks to load more data then to appear all rows.

The problem is when I click show more, then only one more row appears.

<?php
$query_brands = mysql_query("SELECT distinct pd_filter1 from tbl_brands2 WHERE pd_code in (select pd_code from tbl_product where cat_id='2')") or die(mysql_error());
$count_brands  = mysql_num_rows($query_brands);
  if($count_brands > 0) {
  while($fetch_brands = mysql_fetch_array($query_brands)) {
    $record_brands[] = $fetch_brands;
  }
  }

$i_brands=0;
foreach($record_brands as $records_brands) {                                
?>
<table border="1" width="215" style="border-collapse: collapse;  border-spacing: 0;" bgcolor="#eeeff0">
  <tr>
    <td>
<?php
      $i_brands = $i_brands + 1;
      if ($i_brands > 3)
        {
?>
        <div id="myDIV_Filter1_1" style="display:none";>
<?php
        }
      }
?>
    <div id="myDIV_Filter1_2">
      <span class="class22">
        <a href="#" onclick="myFunction();return false;">show more...</a>
      </span>
    </div>  

    <div id="myDIV_Filter1_3" style="display:none";>
      <span class="class22">
        <a href="#" onclick="myFunction();return false;">show less...</a>
      </span>
    </div>  

    </td>
  </tr>
</table>

JavaScript

function myFunction() {
    var x_filter1_1 = document.getElementById("myDIV_Filter1_1");
    var x_filter1_2 = document.getElementById("myDIV_Filter1_2");
    var x_filter1_3 = document.getElementById("myDIV_Filter1_3");
    if (x_filter1_1.style.display === "none") {
        x_filter1_1.style.display = "block";
        x_filter1_2.style.display = "none";
        x_filter1_3.style.display = "block";
    } else {
        x_filter1_1.style.display = "none";
        x_filter1_2.style.display = "block";
        x_filter1_3.style.display = "none";
    }
}
Julio Pérez
2#
Julio Pérez Reply to 2018-01-13 13:19:30Z

You have some errors on your code:

1) Try not to use return the way you are using right now in code lines like this one:

<a href="#" onclick="myFunction();return false;">show more...</a>

You can use it better like it's explained here

2) You have all your divs of the code example in display none, the user will never see the information in those divs because you don't have any code to start showing some of them. In the same line you put a ";" after the style but it must be inside the style. This line has an error:

<div id="myDIV_Filter1_3" style="display:none";>

It must be this way:

<div id="myDIV_Filter1_3" style="display:none;">

The "show-hide" logic on your javascript function myFunction has an error because your div id="myDIV_Filter1_1" contains the other 2 div you have on your code example so you can't hide this particular div because you will lose the "show" or "hide" of the other 2 divs. That way it'll never show you the other 3 rows you wanted to see. I fixed all the errors you can check the code on my snippet here:

function myFunction() {
    var x_filter1_1 = document.getElementById("myDIV_Filter1_1");
    var x_filter1_2 = document.getElementById("myDIV_Filter1_2");
    var x_filter1_3 = document.getElementById("myDIV_Filter1_3");
    if (x_filter1_3.style.display === "none") {
        x_filter1_1.style.display = "block";
        x_filter1_2.style.display = "none";
        x_filter1_3.style.display = "block";
    } else {
        x_filter1_1.style.display = "block";
        x_filter1_2.style.display = "block";
        x_filter1_3.style.display = "none";
    }
}
<?php
$query_brands = mysql_query("SELECT distinct pd_filter1 from tbl_brands2 WHERE pd_code in (select pd_code from tbl_product where cat_id='2')") or die(mysql_error());
$count_brands  = mysql_num_rows($query_brands);
  if($count_brands > 0) {
  while($fetch_brands = mysql_fetch_array($query_brands)) {
    $record_brands[] = $fetch_brands;
  }
  }

$i_brands=0;
foreach($record_brands as $records_brands) {                                
?>
<table border="1" width="215" style="border-collapse: collapse;  border-spacing: 0;" bgcolor="#eeeff0">
  <tr>
    <td>
<?php
      $i_brands = $i_brands + 1;
      if ($i_brands > 3)
        {
?>
        <div id="myDIV_Filter1_1">
<?php
        }
      }
?>

    <div id="myDIV_Filter1_2" >
      <span class="class22">
        <a href="#" onclick="myFunction();">show more...</a>
      </span>
    </div>  

    <div id="myDIV_Filter1_3" style="display:none">
      <span class="class22">
        <a href="#" onclick="myFunction();">show less...</a>
      </span>
    </div>  

    </td>
  </tr>
</table>

Hope it helps!

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.270564 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO