Pass Pagination data to Page - php

Question

I have a page that I'm trying to get AJAX thumbnail replacement & pagination to work. The page loads the initial thumbs: http://www.partiproductions.com/vault_test/1-a-b.php
But when clicking nav buttons, it should change the thumbnails, but doesn't.
My click function (forward button):
$('#gort').mouseup (function() {
var curpg = parseInt($('.thumbwrap').attr('data-cpg'),10);
console.log('Cur Pg: ' + curpg);
var newpg = curpg + 1;
console.log('New Pg: ' + newpg);
var $totpgs = parseInt($('.thumbwrap').attr('data-tpgs'),10);
console.log('Total Pages: ' + $totpgs);
if (newpg > 1) {$('#goleft').show(200)}
if (newpg == $totpgs) {newpg = $totpgs; $('#gort').hide()} // limit page to total pages
if (newpg < $totpgs) {$('#gort').show(200)}
$('.thumbwrap').attr('data-cpg', newpg);
var $start = (newpg - 1) * 15;
console.log('Start: ' + $start);
// my attempt to pass $start to pagination.php
$.ajax({
url:'pagination.php',
type:'POST',
data:{start:$start},
dataType:'JSON'
success: function(response) {
thumbparse(response);
}
});
});
Currently simple thumbparse function:
function thumbparse(response) {
alert(response);
console.log('Thumbparse output: ' + $navresults);
}
Pagination.php:
<?php
$thumbst = $_POST['start']; // capture input from AJAX
echo "Inside Pagination: $thumbst";
require_once 'meekrodb.2.2.class.php';
require_once 'dconnect.php';
// pull from database using specific page items
$navresults = DB::query("SELECT substr(theme, 1, 1) as Alphabet, theme, developer, thumb, thumb_lg FROM gallery ORDER BY (CASE Alphabet
WHEN '1' THEN 1
WHEN '2' THEN 2
WHEN '3' THEN 3
WHEN 'A' THEN 4
WHEN 'B' THEN 5
ELSE 6
END), theme
LIMIT $thumbst,15");
if(isset($_POST['start']) && !empty($_POST['start'])) {
echo json_encode($navresults);
}
// my attempt to loop through assigned variables that are echoed in main pg
$x = 0;
foreach ($navresults as $row) {
$x++;
if ($x == 1) {
$t1 = $row['theme'];
$d1 = $row['developer'];
$th1 = $row['thumb'];
$thlg1 = $row['thumb_lg'];
}
... other x's
}
I'm not seeing the echoes from pagination.php How do I get the new thumb data ($navresults) passed back to main page and get that data into the DOM? Code please, as I'm just learning - thanks.
Update 1:
function thumbparse(response) {
alert(response);
var obj = JSON.parse(response);
alert(obj.count);
console.log('Thumbparse results: ' + $navresults);
}
Update 2:
function thumbparse(response) {
alert(response);
console.log(response);
var x = 0;
var obj = response;
$.each(obj, function(key, val) {
x++;
var y = x - 1;
$('ul.thumbwrap .thumb:nth-of-type(y) img').attr({
alt: obj.theme,
src: obj.thumb,
'data-retina': obj.thumb_lg
});
$('ul.thumbwrap .thumb:nth-of-type(y) p.hname').text(obj.theme);
$('ul.thumbwrap .thumb:nth-of-type(y) p.hdev').text(obj.developer);
});
}
Update 3:
function thumbparse(response) {
alert(response);
console.log(response);
var x = 0;
var obj = response;
$.each(obj, function(key, val) {
x++;
var y = x - 1;
console.log('Exist. src: ' + $('.thumb').eq(y).find('img').attr('src')); // correct
console.log('New src: ' + obj.thumb); // undefined
$('.thumb').eq(y).find('img').attr({
alt: obj.theme,
src: obj.thumb,
'data-retina': obj.thumb_lg
});
$('.thumb').eq(y).find('p.hname').text(obj.theme);
$('.thumb').eq(y).find('p.hdev').text(obj.developer);
});
}
Update 4:
function thumbparse(response) {
alert(response);
console.log(response);
var x = 0;
var obj = response;
$.each(obj, function(key, val) {
x++;
var y = x - 1;
console.log('Exist. src: ' + $('.thumb').eq(y).find('img').attr('src'));
console.log('New src: ' + obj[key].thumb);
$('.thumb').eq(y).find('img').attr({
alt: obj[key].theme,
src: obj[key].thumb,
'data-retina': obj[key].thumb_lg
});
$('.thumb').eq(y).find('p.hname').text(obj[key].theme);
$('.thumb').eq(y).find('p.hdev').text(obj[key].developer);
if (obj[key].theme == '') {$('.thumb').eq(y).hide()}
});
}

Answer 1

Try this:
function thumbparse(response) {
console.log(response);
var x = 0;
var obj = response;
$.each(obj, function(key, val) {
x++;
var y = x - 1;
console.log('Exist. src: ' + $('.thumb').eq(y).find('img').attr('src'));//Actual src
console.log('New src: ' + obj[key].thumb); //new src from json response
$('.thumb').eq(y).find('img').attr({
alt: obj[key].theme,
src: obj[key].thumb,
'data-retina': obj[key].thumb_lg
});
$('.thumb').eq(y).find('p.hname').text(obj[key].theme);
$('.thumb').eq(y).find('p.hdev').text(obj[key].developer);
if (obj[key].theme == '') {$('.thumb').eq(y).hide()}
});
}