Sorting multiple results on the same page using PHP and Ajax

Question

My page has two columns. Column1 for player1, column2 for player2. For each column I have a dropdown to choose one of the players.

With some ajax en php codes I return the folowing info of each player. For example:

Col1: Tom, Football: 8 points Basketball: 5 points

Col2: Jonathan, Football: 4 points Basketball: 9 points

Now I want to let the users sort the results: So I add another dropdown in each column:

PHP

echo "<select id='filter_class' name=\"filter\"
data-userid=\"".$user_id."\" onchange=\"getFilter(this.value)\">
<option value=\"all\">All</option>
<option value=\"asc\">Asc</option>
<option value=\"desc\">Desc</option> 
</select>";

AJAX

 function getFilter(filter)
{
    var user_id = document.getElementById('filter_class').getAttribute('data-userid');
    console.log(user_id);
    $.ajax({
        type: "GET",
        url: 'http://website.com',
        data: {action: filter, user_id: user_id},
        success: function (result) {
            $("#Target").html(result);
        }
    });
}

As you can see, the dropdown use the user_id and the option value to sort the results.

this code works only for 1 column, because he keeps (Ofcourse) using the first user_id. For example when I try to sort the second results, he sort the results of the first user_id (Normal).

I want that the SORT DROPDOWN use the user_id of the player is selected in the same column.

IMPORTANT

I want to use the sort option after showing both results on the page.

@Haider Ali: No. Everytime when someone choose a player, the value is always the user_id. — Shamss Zaidan
– Shamss Zaidan, Commented Jan 9, 2016 at 7:53

Charlie · Accepted Answer · 2016-01-09 07:58:16Z

2

You need to create your SORT dropdowns with different ids. Let's say you have the id's id='filter_class1' and id='filter_class2'.

Now you need to pass the id of the calling dropdown to the getFilter() function like this.

onchange=\"getFilter(this.value, this.id)\"

First few lines of your getFilter() function should look like this:

function getFilter(filter, eleId)
{
    var user_id = document.getElementById(eleId).getAttribute('data-userid');
    console.log(user_id);

...

answered Jan 9, 2016 at 7:58

Charlie

24k12 gold badges65 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Haider Ali · Accepted Answer · 2016-01-09 08:07:56Z

0

There can only be one element with one id.

You might wanna use the class attribute alongside the data attribute. Using jquery's class selector.

Take a look at this example.

<select class='filter_class' name="filter"
data-userid="29" >
<option value="all">All</option>
<option value="asc">Asc</option>
<option value="desc">Desc</option> 
</select>

<select class='filter_class' name="filter"
data-userid="30" >
<option value="all">All</option>
<option value="asc">Asc</option>
<option value="desc">Desc</option> 
</select>

<script>
$(".filter_class").change(function(){
    var user_id = $(this).data('userid');
    alert(user_id);
})
</script>

edited Jan 9, 2016 at 8:07

answered Jan 9, 2016 at 8:01

Haider Ali

9642 gold badges12 silver badges27 bronze badges

Collectives™ on Stack Overflow

Sorting multiple results on the same page using PHP and Ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related