AJAX load more rows in array - php

Question

I have to admit my AJAX skills suck. I have an array of news items. With about 25 rows. Instead of displaying all 25 rows I figured I would just slice the array into parts of 5 and allow the user to 'load more' using array_slice and some ajax. The php side is easy for me, but I'm having some trouble with the ajax. I put it together the best I could but it doesn't quite work yet.
The AJAX:
<script type="text/javascript">
$(document).ready(function() {
$('#load-more').click(function () {
var size = 5;
var data = 'size=' + content.val() + '&submit=yes';
$('.loading-circle').show();
//start the ajax
$.ajax({
url: "<?php echo $url; ?>/process/load.php",
type: "GET",
data: data,
cache: false,
success: function (html) {
if (html==1) {
}
else {
alert("Sorry, an unnexpected error has occurred.");
}
}
});
return false;
});
});
</script>
load.php
<?php
session_start();
if ($_GET["submit"] == 'yes')
{
$_SESSION["load_size"] = $_GET["size"];
}
?>
index.php
$sorted = Feed::sortFeed($feed, $day, 0, $_SESSION["load_size"]);
foreach ($sorted as $article)
require $baseDir . 'feed.php';
So I'm trying to get the session variable to determine the size. There's a couple problems with this approach though that I don't know how to get around. There may be multiple news feeds per page that would all be expanded even if the user just wanted to expand one. On top of that the feeds wouldn't resize to their default of 5 on a page refresh. I'm thinking I have to generate the array with the load.php page but I don't know how to pass it back through ajax. So how would I best go about sorting an array using ajax. Is there anything I can read up on, or some simple changes I can make?
Thanks

Answer 1

You can pass a PHP array back through ajax by using json_encode function on your PHP Array. Just echo out the the returned value from json_encode in your load.php
<?php
session_start();
if ($_GET["submit"] == 'yes')
{
$_SESSION["load_size"] = $_GET["size"];
}
//load some php array here
$array = array('success' => true, 'items' => array('item1','item2'));
echo json_encode($array);
?>
You can then tell jQuery that the return type is is JSON by specifying the dataType option like this:
$.ajax({
url: "<?php echo $url; ?>/process/load.php",
type: "GET",
data: data,
cache: false,
dataType: 'json',
success: function (response) {
// response var is an object, same structure as the PHP array you encoded
if(response.success){
// handle success
} else {
alert('something went wrong');
}
}
});