Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You Have Two Issues going on here.</p> <ol> <li>You are using the same value for the id attribute multiple times.</li> <li>Your result setup is logically flawed</li> </ol> <p><strong>Solution to Issue 1</strong></p> <p><em>Change id attribute to class attribute</em></p> <p>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</p> <pre><code>function displayInfoForDiv(i){ document.getElementsByClassName('fname')[i].innerHTML = jsonData[i].first_name; document.getElementsByClassName('lname')[i].innerHTML = jsonData[i].last_name; } </code></pre> <p><strong>Solution to Issue 2</strong></p> <ul> <li><p><em>Use template for results</em></p></li> <li><p><em>Wrap all results in a div tag</em></p></li> </ul> <p>By wrapping results into a div tag you will be able to clear results by clearing the html for that div tag.</p> <pre><code>&lt;div id='Results'&gt; &lt;?php while ($row = mysql_fetch_array($sql)){ ?&gt; &lt;p&gt;&lt;span class="fname"&gt;&lt;?php echo $row['first_name']; ?&gt;&lt;/span&gt;&lt;/p&gt; &lt;p&gt;&lt;span class="lname"&gt;&lt;?php echo $row['last_name']; ?&gt;&lt;/span&gt;&lt;/p&gt; &lt;?php } ?&gt; &lt;/div&gt; &lt;script&gt; function clearResults() { document.getElementById('Results').innerHTML=''; } &lt;/script&gt; </code></pre> <p>To use a template for results I would recommend <a href="http://underscorejs.org/#template" rel="nofollow">underscore.js</a></p> <p>So a template for your needs would look like the following:</p> <pre><code>&lt;script id='result-template' type="text/x-jquery-tmpl"&gt; &lt;p&gt;&lt;span class="fname"&gt;${first_name}&lt;/span&gt;&lt;/p&gt; &lt;p&gt;&lt;span class="lname"&gt;${last_name}&lt;/span&gt;&lt;/p&gt; &lt;/script&gt; </code></pre> <p>And to utilize the template you would do the following:</p> <p><em>The code below assumes you have included underscore.js</em></p> <pre><code>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]); } } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload