Question

I’m having a (probably super simple) issue. The code below is supposed to _POST (using AJAX) a variable called ‘id’ to an external file called getYourData.php.

I think the issue is below. The ‘data’ section doen’t seem to be functioning – I’ve even tried putting [data: ‘2’] to simply put ‘2’ in the SELECT statement. But that doesn’t even work.

$.ajax({
        type: 'POST',
        url: 'getYourData.php',
        data: 'id',
        success: function(msg){
            //everything echoed in your PHP-File will be in the 'msg' variable:
            $('#selectTwo').html(msg)
            $('#selectTwo').fadeIn(500);
        }
});

Here’s the rest of code (snippet – jquery has been imported)

<!-- First Box: click on link shows up second box -->
<div id="selectOne" style="float: left; margin-right: 10px; border: #666 thin solid; padding: 10px;">
  <a href="#" id="1">One</a><br />
  <a href="#" id="2">Two</a><br />
  <a href="#" id="3">Three</a>
</div>

<!-- Second Box: initially hidden with CSS "display: none;" -->
<div id="selectTwo" style="float: left; margin-right: 10px; display: none; border: #666 thin solid; padding: 10px;"></div>

<!-- The JavaScript (jQuery) -->
<script type="text/javascript">

//Do something when the DOM is ready:
$(document).ready(function() {

//When a link in div with id "selectOne" is clicked, do something:
$('#selectOne a').click(function() {
    //Fade in second box:
    $('#selectTwo').fadeIn(500);

    //Get id from clicked link:
    var id = $(this).attr('id');

    $.ajax({
        type: 'POST',
        url: 'getYourData.php',
        data: '2',
        success: function(msg){
            //everything echoed in your PHP-File will be in the 'msg' variable:
            $('#selectTwo').html(msg)
            $('#selectTwo').fadeIn(500);
        }
});

    //Depending on the id of the link, do something:
    if (id == 'one') {
        //Insert html into the second box which was faded in before:
        $('#selectTwo').html('One<br />is<br />selected')
    } else if (id == 'two') {
        $('#selectTwo').html('Two<br />is<br />selected')
    } else if (id == 'three') {
        $('#selectTwo').html('Three<br />is<br />selected')
    }

    });


});
</script>

getYourData.php – creates a custom SELECT statement based on the ‘id’ passed from primary page. For some reason, this isn’t working. Only works when I intentionally set a dud variable ($id2)

<?php


$username="primary";
$password="testpass";
$database="testdb";

mysql_connect(localhost,$username,$password) or die ('Unable to connect...');

mysql_select_db($database) or die('Error: '.mysql_error ());

//Intentionally creating a dud variable will create a good SELECT statement and work
$id2 = "3";

$id = $_POST['id'];
$query = mysql_query('SELECT * FROM members WHERE member_id='.$id);
$result = mysql_fetch_assoc($query);

//Now echo the results - they will be in the callback variable:
echo $result['firstname'].', '.$result['lastname'];

mysql_close();
?>

Answer 1

data in your AJAX function needs to be of the form ‘id=xxx’. I see you have it in the variable id. Try data: 'id=' + id. Confusing I know.

The explanation here is that POST data should be of the form a=b,c=d,... et cetera. That way PHP will pick it up as a key/value pair in the $_POST dictionary. Now you have a variable id which you would like to send (value), and you also want this to be the name of the (key). Hence you would need to do data: 'id=' + id. If id=2, then that will evaluate to data: 'id=2', which is correct.

Ultimately, as @Stephen noted, it is better to use an Object for the data field, as it is arguably more elegant. data: {'id': id} should work as well, and you can add more variables in the future.