CODEWITHSUNDEEP
phpjqueryajaxarrayssorting
Marc
Marc

Reputation: 559

PHP AJAX sort array without reloading page

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.

Upvotes: 1

Views: 3132

Answers (2)

gilly3
gilly3

Reputation: 91497

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/

Upvotes: 3

Tim Withers
Tim Withers

Reputation: 12059

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 } ?>

Upvotes: 1

Related Questions