Question

AJAX code:

        <script type="text/javascript">
            function doCalc(){
            var roomX = $('#room_str').val();
            var heightX = $('#height_str').val();
            var widthX = $('#width_str').val();
            var prodid = $('#prodid').val();
            var qtyX = $('#qty_str').val();

            $.post('db_query.php',
            {qtyX:qtyX, roomX:roomX, heightX:heightX, widthX:widthX, prodid:prodid}, 
            function(data) {
                data = $.parseJSON(data);
                $('#width-placeholder').html(data.width);
                $('#height-placeholder').html(data.height);
                // ...
            });
            return false;
            };
        </script>

PHP Code:

<?php
include('db_pbconnection.php');
$query = mysql_query(" SELECT * FROM price_dimensions WHERE prodid = '".$_POST['prodid']."' AND height >= '".$_POST['heightX']."' AND width >= '".$_POST['widthX']."' ORDER BY height ASC, width ASC LIMIT 1 ");
$results = array();
$row = mysql_fetch_array($query);
$results = array(
   'width' => $row['width'],
   'height' => $row['height'],
   'price' => $row['price']
);
$json = json_encode($results);
echo $json;
?>

EDIT: Updated code works successfully thanks to Alex. This uses json_encode to send the data back with ability to assign each SQL row to an identified for placeholders. This is just in case you need to move your data around individually in a layout.

Answer 1

If I’m not mistaken, what you try to do is apply selectors to HTML data coming from AJAX request. Yes? I don’t think jQuery would help you here.

An option might be to have this div structure already on page as some template with placeholders. And your AJAX calls should return data in JavaScript native, parsable format – JSON. PHP has a function which will make JSON for you – json_encode. After you get JSON from your server, you can do this:

function(data) {
    data = $.parseJSON(data);
    $('#width-placeholder').html(data.width);
    $('#height-placeholder').html(data.height);
    // ...
});
return false;
};