How do I sort multiple options when more than one checkbox is checked with jQuery/AJAX and PHP
Quick sum up: I have a facebook-like activity wall on the user profiles. There are multiple "sorting" options to choose from. So if they want to only see, say, their own activity, they click "Your Activity". That part works perfectly. I am adding a new piece to this puzzle, where they can also sort through certain types of activity such as: posts, comments, votes, etc.
What I am trying to get this to do is, if they have their activity already selected, and then they check the Posts and Responses checkboxes, it should display only their posts and responses.
I am using checkboxes so they can check/uncheck things at will and jquery ajax/php to call this. Here are the checkboxes:
<div class="activitySelector">
<a href="" id="stalk" class="selectOrder">Following Activity</a> • <a href="" id="user" class="selectOrder">Your Activity</a>
</div>
<input type="checkbox" class="sortOption" id="post" /><label for="post">Posts</label>
<input type="checkbox" class="sortOption" id="response" /><label for="response">Responses</label>
Here is the jQuery/ajax:
$('input[type=checkbox]').live("click", function(){
$('input:checked').each(function(){
var ID = $('.activitySelector .selected').attr("id");
var optionID = $(this).attr("id");
if (optionID) {
$('ul.streamActivity').html('<img src="/images/ajax-loader.gif" class="loader" alt="" />');
$.ajax({
type: "POST",
url: "/profile/sort_activity.php",
data: "sort="+ID+"&option="+optionID+"&user=<?php echo $user; ?>",
cache: false,
success: function(html){
$("ul.streamActivity").html(html);
}
});
}
});
});
And finally the PHP (I am only showing the code that has to do with what I am talking about...I have no need to show the full query as it is working perfectly, I just want you to be able to get right to the headache :P): sort_activity.php
if ($sort == "user") {
$checkActivity .= " WHERE a.name = '$user'";
$activityNum .= " WHERE a.name = '$user'";
if ($option == "post") {
if ($option == "response") {
$checkActivity .= " AND a.type = 'Post' AND (a.ty开发者_如何转开发pe = 'Comment' OR a.type = 'Advice')";
$activityNum .= " AND a.type = 'Post' AND (a.type = 'Comment' OR a.type = 'Advice')";
} else {
$checkActivity .= " AND a.type = 'Post'";
$activityNum .= " AND a.type = 'Post'";
}
} elseif ($option == "response") {
if ($option == "post") {
$checkActivity .= " AND a.type = 'Post' AND (a.type = 'Comment' OR a.type = 'Advice')";
$activityNum .= " AND a.type = 'Post' AND (a.type = 'Comment' OR a.type = 'Advice')";
} else {
$checkActivity .= " AND (a.type = 'Comment' OR a.type = 'Advice')";
$activityNum .= " AND (a.type = 'Comment' OR a.type = 'Advice')";
}
}
}
So, essentially what this needs to do is realize that "Your Activity" (user) was already selected, and then IF "Posts" AND "Responses" is chosen after that, then display only YOUR posts and responses. Right now, it only displays one or the other (if both "posts" and "responses" are selected it seems to display only your responses. Which is half-way there lol.)
I've thought of maybe setting cookies or such so it remembers what they have checked, but I'd like to stay away from that if at all possible.
Any help would be greatly appreciated as I am trying to do a re-launch with these cool new features :)
UPDATE: Here is the foreach statement I've added. Echo is in there to see if it's calling it properly, which it is. Checking on and off the boxes displays post/response/vote - it's just not displaying any results whatsoever :/
I think I need to do something like, if there's more than 1 option then change AND to OR so that it selects all of them...maybe? Can't seem to get it to work properly though.
if (isset($options)) {
foreach ($options as $option) {
echo $option .'<br />';
if ($option['post']) {
$checkActivity .= " AND a.type = 'Post'";
$activityNum .= " AND a.type = 'Post'";
}
if ($option['response']) {
$checkActivity .= " AND (a.type = 'Comment' OR a.type = 'Advice')";
$activityNum .= " AND (a.type = 'Comment' OR a.type = 'Advice')";
}
if ($option['vote']) {
$checkActivity .= " AND a.type = 'Vote'";
$activityNum .= " AND a.type = 'Vote'";
}
}
}
What's happening, is that you're not sending all the checked values to the server. Just change your click binding to this:
$('input[type=checkbox]').live("click", function(){
var options = []; //We'll send an array of options instead only one
var ID = $('.activitySelector .selected').attr("id");
$('input:checked').each(function(){
var optionID = $(this).attr("id");
options.push("options[]="+optionID);
});
if (options.length) {
$('ul.streamActivity').html('<img src="/images/ajax-loader.gif" class="loader" alt="" />');
$.ajax({
type: "POST",
url: "/profile/sort_activity.php",
data: "sort="+ID+"&options="+options.join("&")+"&user=<?php echo $user; ?>", //Here we're sending 'options'
cache: false,
success: function(html){
$("ul.streamActivity").html(html);
}
});
}
});
As you see, we're sending all the checked ID's (options
) not only one.
Server side:
<?php
$options = $_POST['options'];
//Now $options is an array with all checked IDs
foreach($options as $option)... //Do your stuff with $options. Everything else remains the same
?>
Hope this helps. Cheers
精彩评论