I was following an excellent tutorial at http://hibbard.eu/use-ajax-to-filter-mysql-results-set/ where the results of a query were displayed in a dynamic table, that updates without refreshing the page when filtering with checkboxes.
I would like to display each result in a div rather than a table row, yet retain the same functionality.
If anyone could me I would be very appreciative.
I’m assuming that the code for displaying in a table would loop through the recordsets, and that the loop would begin with <tr> and end with </tr> (glancing at the code in the link you provided, yes… tbl_body += "<tr>"+tbl_row+"</tr>";). The div would be exactly the same, unless I’m missing something. Each iteration would start with <div> and and with </div>. You could give each div a unique ID based upon the current row count (ie, ‘dsp_div_[current row]’).
HTH,
That looks to be @James_Hibbard 's work so he could answer better than I.
But IMHO with 8 columns of tabular data a table would be better than divs no?
Or are you only using the example as a starting point?
Yup, guilty 
I agree that a table is better suited to tabular data, but in principle what WolfShade recommends sounds like it should work.
The function however, only constructs the inner part of the table, so you’ll have to remove:
<table id="employees">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Car</th>
<th>Language</th>
<th>Nights</th>
<th>Student</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
from the page (it is currently hard-coded) and replace it with something more suitable.
Thanks for your reply! Indeed changing ‘tr’ to ‘div’ does create the ‘divs’ however I am not quite sure how to use the code you suggested to give them a unique ID ( This would be very useful to me! )
Yes I agree the table form is very useful for this particular data, but as you began to say I am using this as a starting point for something quite different! Thanks for bringing the original coder
You should just be able to add a couple of parameters to the outer $.each, something like:
$.each(data, function(index, value) {
...
});
You should then be able to use the index witin the inner $.each to create your unique id:
$.each(this, function(k, v) {
tbl_row += "<td id='row_" + index + "'>"+v+"</td>";
});
That should work (obviously adapt it for creating a div), but it is late here and I’m off to bed (so I haven’t tested it).
If this is still unsolved tomorrow, I’ll pick it up then.
Thanks for your original tutorial!
I am a novice and it really helped me a lot.
I removed the table as you suggested and simply used a div with the same id. Now i have a list of divs in a big div which is great!
The reason I am not using a table is because I actually don’t want to display all the data. I still would like the checkboxes to filter the results but actually what I would be displaying to the user is other information based on calculations I make from the pulled data and some user input.
So another question, if I may ask is, for each div, how can I use the result of the query to do some calculation, and then print the result of that rather than original query?
So for example using the tutorial code:
Imagine each div just publishes the employees name and then % score. That score is some calculation based on if from the database it says they are a student or have a car etc.
So what will be displayed is just a list of workers and their scores that match the filtering requirements that the check-boxes provide.
Don’t do that. Ids must be unique to a page.
@Blakus126, @Pullo is right. If any element uses the ID attribute, ALL id values must be unique. Names (soon to be deprecated, if not already) can be identical, but not ID.
HTH,
Thanks for clarifying that! Do you have any idea towards my other query?
Do this on the server.
Add some logic to the PHP script and have it return the data you want to display.
I don’t really follow.
Maybe you could outline a simple example.
Okay so for example I would like something that looks like this to be displayed on the page:
Jim - 50%
Fred - 75%
Bill - 100%
Tom - 0%
Each of those entries in a div box that can be filtered depending on the filter options.
This % calculation could be done in php where each worker gets a 25% score for each of the categories they fit in (Is a student, Has car, foreign language etc).
So what is displayed is not actually just data from the database but data that has been modified and displayed as a % score.
Well, you can just loop over the results retrieved from the database and add an extra key based on your calculation:
$sql = $select . $from . $where;
$statement = $pdo->prepare($sql);
$statement->execute();
$results=$statement->fetchAll(PDO::FETCH_ASSOC);
foreach($results as $key => &$row) {
$percentage = 0;
$percentage += $row["hasCar"];
$percentage += $row["isStudent"];
$percentage += $row["speaksForeignLanguage"];
$percentage += $row["canWorkNights"];
$row['percentage'] = $percentage *25;
}
$json=json_encode($results);
echo($json);
You’ll need to slightly alter the table (or div in your case):
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Car</th>
<th>Language</th>
<th>Nights</th>
<th>Student</th>
<th>Percentage</th>
</tr>
</thead>
Here’s an updated version of my script.
Wow you are really so helpful! I really appreciate it. I am learning a lot!
Just one question, ideally I only want to send the name and % from the php code, could you tell me how to send and display just the name and % ?
Additionally could I for example send multiple variables in addition from $json?
Then hopefully I can leave you be!
Normally from PHP you put the information in to an associative array, and use json_encode function to create the JSON text string which is what gets output.
The web browser when making its request for information, picks up the JSON text string as data, which on the JavaScript side of things is decoded using JSON.parse to an object, from where you can easily work with the data contained in there.
@Paul_Wilkins What do you think is the better way to do this:
I would be interested to hear your opinion.
Thanks for your reply, I am currently trying to code it slightly differently and see what I come up with!
Originally I was pulling all the data I needed from the database and manipulating on the client side, but when I wanted to add the filter option without refreshing, I found your tutorial and tried to do it this way.
So I am sort of in limbo between the two options as well. I am interested to know what way is recommended as well.
Both options have their benefits, and in this case I’m more likely to side with manipulating it server-side before sending it to the client.
If the data is going to be used for some complicated reason then that’s a good case to encode the data and send it through, but if it’s just going to be displayed as HTML content then manipulate it on the server side and show the HTML code. That way it’s also more robust and capable of being used when scripting isn’t available too.
Basically what I’m saying is, is don’t go to the extra bother of encoding and decoding JSON if you don’t have to. If the HTML content does the job well, then that’s all that you should do.