php search won't clear when javascript onclick is clicked

Question

So this is what I have - A javascript onclick event that will parse json from my MySQL database data and display it when someone clicks on a seat.

 var jsonData = <?php echo json_encode($array); ?>;

function displayInfoForDiv(i){
    document.getElementById('fname').innerHTML = jsonData[i].first_name;
    document.getElementById('lname').innerHTML = jsonData[i].last_name;
    }

Output

    <?php while ($row = mysql_fetch_array($sql)){ ?>
    <p><span id="fname"><?php echo $row['first_name']; ?></span></p> 
    <p><span id="lname"><?php echo $row['last_name']; ?></span></p>
    <?php } ?>

The PHP is for my search box when you try to look up a name - I'm using this

     $sql = mysql_query("select * from people where first_name like '%$term%' OR last_name LIKE '%$term2%'");

So the problem I'm having is when I conduct a search for Matt, more then one result will show up. Say:

Matt Hasselbeck
Matt Hew

But if I use the onclick event and click on joe's seat, it will display like this:

Joe Frill
Matt Hew

So the problem is that the search results will remain when I trigger the onClick event but the first one will change.

My question is, is there a way when I click on a seat to clear the search results and only display the one but when I conduct a search to display the similar names.

I'm using the PHP and JS to call the same data because, the JS only has a range of floor, while the php is grabbing everything from the database.

Hopefully this is clear and thank you for any input.

Answer 1

You Have Two Issues going on here.

1. You are using the same value for the id attribute multiple times.
2. Your result setup is logically flawed

Solution to Issue 1

Change id attribute to class attribute

When you use document.getElementById in javascript it returns the first element with that id. Which means that if you have multiple ids with the same value only the first element will be selected. So your function should be changed to the following

function displayInfoForDiv(i){
document.getElementsByClassName('fname')[i].innerHTML = jsonData[i].first_name;
document.getElementsByClassName('lname')[i].innerHTML = jsonData[i].last_name;
}

Solution to Issue 2

• Use template for results

• Wrap all results in a div tag

By wrapping results into a div tag you will be able to clear results by clearing the html for that div tag.

<div id='Results'>
   <?php while ($row = mysql_fetch_array($sql)){ ?>
   <p><span class="fname"><?php echo $row['first_name']; ?></span></p> 
   <p><span class="lname"><?php echo $row['last_name']; ?></span></p>
   <?php } ?>
</div>

<script>
function clearResults()
{
    document.getElementById('Results').innerHTML='';
}
</script>

To use a template for results I would recommend underscore.js

So a template for your needs would look like the following:

<script id='result-template' type="text/x-jquery-tmpl">
    <p><span class="fname">${first_name}</span></p> 
    <p><span class="lname">${last_name}</span></p>
</script>

And to utilize the template you would do the following:

The code below assumes you have included underscore.js

function LoadResults(jsonData)
{
    _.templateSettings = {
        interpolate: /\$\{(.+?)\}/g
    };
    var output='',
    resultDiv=document.getElementById('Results');
    template= _.template(
        document.getElementById('result-template').innerHTML
        );

    clearResults();

     for(x in jsonData)
     {
        resultDiv.innerHTML+=template(jsonData[x]);
     }
}