PHP AJAX sort array without reloading page

Question

I have the following code which runs a query on an XML file and returns the results. I then sort it using usort. (my sort functions are on a seperate page sort.php). I have commented out the usort for now but the usort function works as its intended to.

$xml = simplexml_load_file($url);

//RUN QUERY ON XML
$xQuery = $xml->xpath($query);

//DISPLAY RESULTS OF QUERY

$i = 0;
//usort($xQuery, 'sortMake');
    for ($f = 0; $f <= 9; $f++) {               
        ?>
            <img src= "<?php echo $xQuery[$i]->MainPhoto;?>"><br />
            MAKE:  <?php echo $xQuery[$i]->Make;?><br />
            Model: <?php echo $xQuery[$i]->Model;?><br />
            $i++;


    <?php } ?>

So the above code would display all the content unsorted. I would like to have a sort link before the loop that when clicked would sort the array and display it without reloading the entire page. I know its probably something with AJAX but all of the AJAX resources I have found are all examples of functions that use MySQL. I am not using MySQL.

Any help would be appreciated. Thanks.

Since you tagged your question with jQuery, can you add sorting on the client side? Does your data get put into a table or list? — Sam Tyson
– Sam Tyson, Commented Jun 8, 2012 at 18:39
I tagged jQuery because from what I understand its AJAX and jQuery which are used to have events on the page done without having to reload the page. If its wrong I will remove the tag. The data is in a PHP array which is then displayed in a html table. I did not post all the HTML in order to keep the post brief. — Marc
– Marc, Commented Jun 8, 2012 at 18:46

gilly3 · Accepted Answer · 2012-06-08 20:24:41Z

3

You can sort it on the page without AJAX or PHP sorting. You'll need to modify your HTML slightly. Put the results in a parent element with an id. Put each result in a div with a class. Put the data you want to sort on in spans with a class:

<div id="carList">
    <div class="car">
        <img src= "<?php echo $xQuery[$i]->MainPhoto;?>"><br />
        MAKE:  <span class="make"><?php echo $xQuery[$i]->Make;?></span><br />
        Model: <span class="model"><?php echo $xQuery[$i]->Model;?></span><br />
        $i++;
    </div>
    ...
</div>

To sort the elements, first put them in an Array:

var listEl = $("#carList");
var cars = listEl.children(".car").get();

Then call .sort() on your Array. You'll create a custom comparison function to pass to .sort():

cars.sort(function (a, b) {
    var aMake = $(a).find(".make").text();
    var bMake = $(b).find(".make").text();
    return a - b;
});

Now, just append the elements back to the parent element:

listEl.append(cars);

Demo: http://jsfiddle.net/gilly3/ZNmEh/

answered Jun 8, 2012 at 20:24

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

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

1 Comment

Tim Withers Over a year ago

I like it. Very simple and gets the job done quite effectively.

user400654 · Accepted Answer · 2012-06-08 19:01:07Z

1

Check out jQuery's .get() function. That should atleast get you pointed in the right direction. jQuery is a Javascript library, and can definitely be used for your purpose. Javascript alone could also accomplish the task, however jQuery's goal is to simplify your life by minimizing the amount of coding you have to do. You will have to either download or reference the jQuery library in your <head> tag. You should definitely read up on selectors and how they are used as well if you really want to start using jQuery.

Personally I love jQuery and have used several other libraries. I found jQuery to be great for beginners and the online documentation is fantastic. It has a huge group of users that can answer any and all questions for you.

Bascially, you need to wrap the displayed data in a tag that jQuery would be able to find, ie :

<a href='#' id='link'>Sort Data</a>
<div id='xmlData'>...DATA...</div>`

Then have your script:

$("#link").click(function(){
    $.get('xmldata.php',function(d){
        $('#xmlData').html(d);
    });
});

Then have a script entitled xmldata.php with the content:

$xml = simplexml_load_file($url);

//RUN QUERY ON XML
$xQuery = $xml->xpath($query);

//DISPLAY RESULTS OF QUERY

$i = 0;
usort($xQuery, 'sortMake');
for ($f = 0; $f <= 9; $f++) {               
    ?>
        <img src= "<?php echo $xQuery[$i]->MainPhoto;?>"><br />
        MAKE:  <?php echo $xQuery[$i]->Make;?><br />
        Model: <?php echo $xQuery[$i]->Model;?><br />
        $i++;
<?php } ?>

edited Jun 8, 2012 at 19:01

user400654

95.1k16 gold badges168 silver badges188 bronze badges

answered Jun 8, 2012 at 18:52

Tim Withers

12.1k5 gold badges45 silver badges68 bronze badges

8 Comments

Marc Over a year ago

Thanks I will try this and let you know how it goes.

Marc Over a year ago

Another question though, I have multiple sort methods in 'sort.php'. So 'sortMake' will not be the only one I use. Will I need multiple pages similar to xmldata.php ? Or is there a way I can get a value in xmldata.php from the link?

Marc Over a year ago

$("#link").click(function(){ $.get('xmldata.php?sort=sortMake',function(d){ $('#xmlData').html(d); }); }); Would I be able to $_GET['sort'] on xmldata.php?

Tim Withers Over a year ago

$.get('xmldata.php',{sort:'sortMake'},function(){/*function stuff*/}); and yes you would be able to.

Andrew Odri Over a year ago

Yeah, you should totally use jQuery. I hear Jon Skeet invented in just 6 to 8 weeks.

|

Collectives™ on Stack Overflow

PHP AJAX sort array without reloading page

2 Answers 2

1 Comment

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related