jQuery AJAX POST returned data

Question

I'm trying to make a simple update of an html table when the user clicks different product quantity. Though being very new to jQuery, i'm having some trouble with the ajax POST method.

Here's what i've got so far:
test-table.html

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

    function swapContent(count){
        $(".price-sidebar").html("Put animation here").show();

        $.ajax({
            type: "POST",
            url: "myphpscript.php",
            data: {countVar: count},
            success: function(data){

            }
        });
    }
</script>
</head>
<body>
    <a href="#" onClick="return false" onmousedown="javascript:swapContent('18');">18</a>
    <a href="#" onClick="return false" onmousedown="javascript:swapContent('48');">48</a>
    <a href="#" onClick="return false" onmousedown="javascript:swapContent('96');">96</a>

    <section class="price-sidebar span8" >                
        <h2>Price Comparison</h2>
        </br>
        <table class="price-data">
            <tr>
                <th class='store-row'><h4>Store</h4></th>
                <th class='price-row'><h4>Price</h4></th>
            </tr>

        <!--insert returned foreach data -->


        </table><!--end price-data-->
    </section><!--end price sidebar-->
</body>

myphpscript.php

require('C:\wamp\www\Single-Serve-Coffee\includes\database-connect.php'); 
$countVar = $_POST['countVar'];

    function PriceCompare($countVar){

        $STH = $DBH->query('SELECT ProductID, MerchantName, Price, PageURL
        FROM merchants
        WHERE ProductID=677 AND Count=' . $countVar . '
        ORDER BY Price');
        $result = $STH->fetchAll();

        foreach($result as $row){
            echo "<tr>";
            echo "<td class='store-row'><h5 property='seller'>" . $row['MerchantName'] . "</h5></td>";
            echo "<td class='price-row'><h5 property='price'>$" . $row['Price'] . "</h5></td>";            
            echo "<td><a property='url' target='_blank' href='" . $row['PageURL'] . "' class='btn btn-danger'>GET IT</a></td>";
            echo "</tr>";
            echo "</br>";
        }
       }
?>

I want the foreach looped data to display on the html page, but i'm not sure how to get it there. I know i'm missing the success function, but I don't know how to write the jQuery to call the PriceCompare() function from my php script.

Answer 1

would be better if you return the variable from php and iterates the result in the success javascript function.

modify the php function and do not iterate the result, return only what fetchAll returns.

within PriceCompare function do the following:

 $STH = $DBH->query('SELECT ProductID, MerchantName, Price, PageURL
        FROM merchants
        WHERE ProductID=677 AND Count=' . $countVar . '
        ORDER BY Price');
        $result = $STH->fetchAll();

return $result;

within the php call the function in line 3 as follows:

$ data = PriceCompare ($ countVar);

and then return that json encoded object.

echo json_encode ($ data);

finally put dataType: 'json', in $. ajax javascript like this:

$. ajax ({
             type: "POST",
             dataType: 'json',
             url: "myphpscript.php"
             data: {countVar: count},
             success: function (data) {
                  console.log(data);//iterate here the object
             }
         });

jQuery AJAX POST returned data

Question

1 answers

solution1
1 ACCPTED 2013-08-14 01:40:25

jQuery AJAX POST returned data

Question

1 answers

solution1 1 ACCPTED 2013-08-14 01:40:25

solution1
1 ACCPTED 2013-08-14 01:40:25