Reputation: 131
MY CODE:
<section class="content">
<h2 class="heading">Milestones Navigation</h2>
<div style="width: 100%;">
<button style="width: 16%;" id="0-3m">0-3M</button>
<button style="width: 16%;" id="3-6m">3-6M</button>
<button style="width: 16%;" id="6-9m">6-9M</button>
<button style="width: 16%;" id="9-12m">9-12M</button>
<button style="width: 16%;" id="12-18m">12-18M</button>
<button style="width: 16%;" id="18Mup">18M+</button>
</div>
</section>
<?php
$query = mysqli_query($db_conn, $m);
while ($row = mysqli_fetch_array($query)) {
$id = $row['ID'];
$age = $row['age'];
$cat = $row['category'];
$title = $row['title'];
$desc = $row['description'];
?>
<section class="content">
<h2 class="heading" style="border:none;">
<div>
<div style=" float:left; text-align: left; font-family: 'Yu Gothic Medium',sans-serif; border-bottom: solid thin lightgray;">
<small><strong><?php echo $title; ?></strong></small>
</div>
</div>
</h2>
<br><br>
<div>
<div style="font-family: 'Droid Sans',sans-serif; margin-top: 5%; display: inline; width: 50%;">
<?php echo $desc; ?>
</div>
<div style="display: inline; text-align: right; width: 30%; float:right; font-family: 'Yu Gothic Medium',sans-serif; text-transform: capitalize">
<small><?php echo $age .' | ' . $cat; ?></small>
</div>
</div>
</section>
<?php
}
?>
MY QUESTION:
I want each button to correspond to a certain range of ages, (Pressing the 0-3M button will display only those sections that have $age equal to 00M, 01M, 02M, and 03M). I'm not sure how to pull that data as I'm using a loop to pull my section content from an sql database. I'm looking for the correct way to do this. Should I add an additional column in my database with the age-range? (For example, column name is Range and then pull it into a variable to check?) Then use that to trigger javascript? Or should I run an if statement to check for the range? I've tried looking it up but I don't really see any answers for what I'm trying to do.
Thanks in advance!
Upvotes: 1
Views: 1573
Reputation: 1165
First of all, PHP is a scripting language that runs on the server. On the other hand, JavaScript is a scripting language that runs on the client (browser).
When JavaScript "start its work", PHP already have completed and the information was sent to the client.
PHP can't call any trigger in JavaScript and vice-versa. However, JavaScript can do an AJAX call which can call a PHP script (or a web service) and PHP can write/echo any javascript code (but I don't recommend this approach).
To filter the data, there's two solutions.
Do an AJAX call passing the chosen range.
document.getElementById('button').addEventListener('click' , function(event) {
var id = this.id;
/** ajax call and javascript process **/
});
Or render all table and show the range that has been chosen. The second option will also make use of an event listener.
Upvotes: 1
Reputation: 132
I would recommend each section an additional class based on its range. You can add the Range field in the database or use PHP code to determine the range - something like this:
switch($row['age']) {
case '00M':
case '01M':
case '02M':
case '03M':
$range = 'age3m';
// ...
// Fill in the other ranges here
// ...
default:
$range = 'age18m';
}
Once this is done, you can add $range
as a class on the section. Then use javascript to show/hide based on the class of the button that is pressed.
Upvotes: 1