Sign in to follow this  
SteveDeFacto

[web] Delete checked messages.

Recommended Posts

SteveDeFacto    109
I've been working on adding a messaging system to my website, I need to allow the user to delete messages so I made a standard check box system where the user checks the messages they want to delete then they hit the delete button which submits the check boxes to another page. The problem is that I named all of the check boxes with the same name so I could use document.getElementsByName to get a list for the check all check boxes with one feature thats standard in most messaging websites. How can I tell them apart?

Share this post


Link to post
Share on other sites
Nik02    4348
Alternatively, see what Hotmail does. It stores a message id along with every row in the message headers table. When the user clicks the "delete selected" button, a script is run that enumerates thru the row collection, stores the id:s of those rows (that correspond to message id:s) that have the checkbox checked, and invokes server-side logic that moves the corresponding messages to the recycle bin (or marks them for deletion if they already were on the recycle bin).

In a similar fashion, when the user checks the "select all" checkbox, the message rows are again enumerated but this time the checkbox at each row is set to match the state of said "select all" box, instead of doing anything with the actual messages.

Share this post


Link to post
Share on other sites
SteveDeFacto    109
Quote:
Original post by Nik02
Name them uniquely.


So how can I create a javascript array containing the check boxes from a PHP loop?

Maybe echo a line of html that creates a checkbox in javascript and adds it to the array X amount of times?

Share this post


Link to post
Share on other sites
Nik02    4348
Did you check the Hotmail approach? The selection logic has nothing to do with the server backend, be it php or asp.

Each row of the message table has an id property. Each of these rows contain a checkbox, which has an unique id in context of the row but not unique in the document.

I haven't actually read the script that the page executes, but I imagine that the logic for selection of all items is as follows (pseudocode that happens to resemble jscript):


var cbSelectAll = document.GetElementById("cbSelAll"); //get the "select all" checkbox
for (each row r in the message table)
{
var c = r.children[0].children["chkSelect"]; // get the row's first cell's checkbox named "chkSelect"
c.checked = cbSelectAll.checked;
}


And that would be called in response to clicking the "select all" box.

The deletion would be something like this (again pseudo, don't take as literal jscript code):


var strIdsMarkedForDeletion = ""; //list of message ids to delete
for (each row r in the message table)
{
var c = r.children[0].children["chkSelect"];
if (c.checked)
strIdsMarkedForDeletion += r.id + ";" //if row's checkbox is checked, add the row id (and a delimiter) for the deletion list

}

//Now, call the service's "delete" method, passing it the list of ids to delete.



How you call service methods from within jscript depends on your server backend. It could be a simple web service call, a loose POST/GET request or a proxy object generated by the server (in case of asp.net AJAX).

I hope this helps.

Share this post


Link to post
Share on other sites
leiavoia    960
A better way to do this would be to use unique IDs for each box but to use a common classname between them all. Then you can just search for classes. You can also make it even easier by using DOM searching built into jQuery. I can't recommend jQuery enough for this sort of thing:

// find all checkboxes on page:
var checkboxes = $("input:checkbox"); // really, that's it

// you can limit it to a specific form:
var checkboxes = $("#id_of_form input:checkbox");

// and just cut to the chase and just find the checked ones
var checked_checkboxes = $("#id_of_form input:checkbox:checked");

Share this post


Link to post
Share on other sites
Nik02    4348
I second the JQuery recommendation for your actual implementation. There are multiple ways to do what you want, but JQuery is a very convenient one.

Share this post


Link to post
Share on other sites
cagecrawler    240
You can use the built in form array processing in PHP to delete all of the checked rows at the same time.

Example HTML:
<input type="checkbox" name="mailID[]" value="1" />
<input type="checkbox" name="mailID[]" value="2" />
<input type="checkbox" name="mailID[]" value="3" />
<input type="checkbox" name="mailID[]" value="4" />

Submit the form via AJAX and in PHP you'll have $_POST['mailID'] as an array containing the checked values. Then you just need to delete the mails from the database eg. "DELETE FROM mails WHERE id IN $_POST['mailID']" and send an appropriate response. You'll only need 1 AJAX request and 1 DB call instead of 1 of each per mail.

I used to use your method (loop through each one and delete), minus the AJAX, on a web game I develop. The system struggled to delete more than around 50 mails before timing out, but using a single call it could delete 1000 mails in about a second.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this