CODEWITHSUNDEEP
phpjquery
the_fez
the_fez

Reputation: 107

How to dynamically display php content based on link

I would like to replicate this site's glossary function: https://www.mortgageloan.com/finance-glossary-terms

Objective: Click on a letter and content corresponding to that letter will be shown. Click on another letter, and only the clicked letter's content is shown.

I have my dictionary.php file with an array setup like this: 

$dictionary = array(
    'A'=>array(
        'Term1'=>'Definition1',
        'Term2'=>'Definition2',
    ),
    'B'=>array(
        'Term1'=>'Definition1',
        'Term2'=>'Definition2',
    ),
);

I can display the Terms and Definitions fine with a foreach loop, but it displays all the terms and definitions. How can I display the terms and definitions pertaining to only their corresponding letters when the user clicks on that letter?

Upvotes: 0

Views: 240

Answers (2)

user6137123
user6137123

Reputation:

The site you linked doesn't seem to use AJAX like @JeremyE suggests. It just loads a bunch of "tabs" (one for each letter) and then lets you switch between them as demonstrated here. It still loads all the data at once, just hides parts.

The Menu Bar

This loops through each letter in $dictionary and adds it as a button

<div>
    <?php foreach($dictionary as $letter => $terms) { ?>
        <button onclick="openTab('<?= $letter ?>')"><?= $letter ?></button>
    <?php } ?>
</div>

The Tabs:

This generates a tab for each letter in $dictionary and then creates a paragraph for each term within that.

<?php foreach($dictionary as $letter => $terms) { ?>

    <div class="tab" id="<?= $letter ?>" style="display: none;">

        <?php foreach($terms as $term => $def) { ?>
            <p><?= $term . " is: " . $def;?></p>
        <?php } ?>

    </div>
<?php } ?>

JS to add functionality

This JS function simply shows a tab with a certain ID, and hides all the others. It's called by the buttons inside the Menu.

<script>
function openTab(tab) {
    var i;
    var x = document.getElementsByClassName("tab");

    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }

    document.getElementById(tab).style.display = "block";
}
</script>

This gives you the basic structure of how it's done.

Upvotes: 1

jeremye
jeremye

Reputation: 1388

I'm not sure how you are calling it, so my answer may need to be fined tuned depending on the call, but if you are sending an AJAX request to the dictionary.php file with information about the letter that was clicked, the php file could look something like this (in simple fashion):

$letter = $_REQUEST['letter']  // Retrieve value for key 'letter'

foreach ($dictionary[$letter] as $term => $def) {  // Loop through terms in the dictionary for only the letter clicked
   echo $term . ": " . $def . " ";  // Print each term followed by its definition
}

If you aren't sending any information to the php file currently (which is possible since you said you were just looping through their entire dictionary), you would need to use something called an AJAX request in order to give the php file information about what letter was clicked. That would look like this in jQuery:

let letterClicked = "A"  // Change this to the location of the letter information in the clicked element (could be element.value or element.innerhtml)

$.get("dictionary.php", { letter: letterClicked }, function ( data ) {
     // Do something with the data that is returned
})

I hope that helped! Let me know if you have any more information about the problem that would help refine my answer.

Upvotes: 0

Related Questions