Fetch result in Jquery Lightbox using PHP/Ajax - php

Question

I'm trying to fetch information (u_name and u_email) from database using AJAX into a JQuery lightbox. I'm having problems with the Ajax part.
My HTML structure is:
<div class="boxes">
Show it
</div>
<div class="boxes">
Show it
</div>
So, the user clicks on one of the id, which is matched in the database table, and the result is fetched.
The Javacript code is:
$(function() {
$('#id').ecko({ //ecko is a JQuery lightbox function which im using
height: 200,
holderClass: 'custom',
template: '<p>About</p>' +
'<div>' +
'u_name' +
'u_email' +
'More' +
'</div>'
});
});
The Ajax will be:
$.ajax({
url: 'functions/db.php',
data: "",
dataType: 'json',
success: function(data){
var name = data[0];
var email = data[1];
//What should be here??
} });
PHP code will be like:
$result = mysql_query("SELECT * FROM $tableName WHERE `id` = " what should be written here? ");
$array = mysql_fetch_row($result);
echo json_encode($array);
I've posted everything I tried. I don't know a way of connecting the id clicked to pass it to php's line of $result = mysql_query("SELECT * FROM $tableName WHEREid= "") and then connecting Ajax and the Jquery lightbox.

Answer 1

When someone clicks the button, pass the ID to the data option in ajax, and fetch it on the serverside:
$('.button').on('click', function() {
$.ajax({
type: 'POST',
url: 'functions/db.php',
data: {id: this.id},
dataType: 'json'
}).done(function(data) {
$('#id').ecko({
height: 200,
holderClass: 'custom',
template: '<p>About</p>' +
'<div>' +
''+data[0]+'' +
''+data[1]+'' +
'More' +
'</div>'
});
});
});
Then use the data in the markup, but you can only do that once the ajax call is completed.
PHP
$id = $_POST['id'];
$result = mysql_query("SELECT * FROM $tableName WHERE `id` = " $id);
consider moving onto PDO, as mysql is deprecated!