Question

I’ve got a Javascript array, like this :

var fruits=['apple','orange','peach','strawberry','mango']

And I want to add an event on these elements who will give me varieties on my database. For example ‘apple’ will give me

<div class="apple">golden</div>
<div class="apple">granny</div>
<div class="apple">canada</div>

Moreover I’ve got nothing on my database about mango varieties, I want to highlight ‘mango’ from the rest of the array. I’ve already created my classes like this:

.black {
    color: black;
    pointer-events: none;
    cursor: default;
}

.couleur {
    color: blue;
}

Have I to add HTML code?
Thanks for your help, it’s only my second post on stackoverflow so sorry for the weird code samples.

Answer 1

OK, since this is your second post, I’m going to assume that you’re relatively new to web development. Welcome!

Your question isn’t very clear on what you want to happen, so I’ll assume simplicity first: we’ll create an onclick event that does an AJAX call to a php script (you tagged php, so I’ll assume you’re writing php scripts) and then displays the results in a dynamic div on the page.

I’m going to use some alternative styles of php scripting, so don’t be scared when you see

if ($something):
    // do something
else:
    // do something else
endif;

For starters, let’s set up our elements:

<?php
// Assume we already have the fruit categories stored in an array, $categories
// Display each fruit category on the page
foreach ($categories as $category) :
?>
    <div class='category' id='<?=$category?>'><?=$category?></div>

<?php
endforeach;
?>
<!-- empty placeholder div - this is where our results will go -->
<div id='results'></div>

This will display all of the elements we want on the page to start. If you want to style these elements based on the category class, go right ahead.

Next we need to write some javascript that will determine the onClick behavior. For this we can use straight javascript, or we can use jQuery (which is VERY prevalent today – read up on it, it’s not that difficult to grasp).

<script type='text/javascript' language='javascript'>
    $('.category').click(function() {
        // grab the category (based on the id of the element) and send it to our background page
        var category = $(this).id();
        $.post('backgroundScript.php', 
            {
                type: category
            }, 
            function(data) {
                // print the results inside the #results div
                $('#results').html(data);
            }
        );
    });        
</script>

Finally, we need a background script to process our data and return our results.

<?php
//backgroundScript.php

$type = $_POST['type'];

// pass $type in to the database and perform some joins to get the subcategories in an array,
// then present a list of subcategories
$subcategories = findSubCategoriesInDB($type);

if (count($subcategories)) {
    echo "<ul>";
    foreach ($subcategories as $subcat) {
        echo "<li>" . $subcat . "</li>";
    }
    echo "</ul>";
} else {
    echo "No subcategories were found for " . $type;
}