1

ここでどこが間違っているのかわかりません。

ユーザーが別のアイテムの数量をクリックすると、データのテーブルが変更されるようにしようとしています。

$.each() メソッドを間違って使用している可能性があります。ページに結果が表示されず、完全な jQuery 初心者であるためです。助けていただければ幸いです、ありがとう

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",
                dataType: 'json'
                url: "myphpscript.php",
                data: {countVar: count},
                success: function(data){
                    $('#content').empty();

                    $.each(data, function(){
                        $("#content").append("<tr>");
                        $("#content").append("<td class='store-row'><h5 property='seller'>"+this[MerchantName]+"</h5></td>");
                        $("#content").append("<td class='price-row'><h5 property='price'>$"+this[Price]+"</h5></td>");
                        $("#content").append("<td><a property='url' target='_blank' href='"+this[PageURL]+"' class='btn btn-danger'>GET IT</a></td>");
                        $("#content").append("</tr>");
                    })
                }
            });
        }
    </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" > 
        <div property="offers" typeof="Offer">               
            <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>
                <div id="content">

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

myphpscript.php

 <?php
    $countVar = $_POST['countVar'];

    $data = PriceCompare($countVar);
    echo json_encode($data);

    function PriceCompare($countVar){
        $DBH = new PDO('mysql:host=localhost;dbname=--','---','---');
        $STH = $DBH->query('SELECT ProductID, MerchantName, Price, PageURL
                            FROM merchants
                            WHERE ProductID=677 AND Count=' . $countVar . '
                            ORDER BY Price');
        $result = $STH->fetchAll();

        return $result;
       }
    ?>
4

1 に答える 1

2

You have three issues:

  1. Your dataType: 'json' line doesn't have a comma at the end.

  2. Access your data like this.MerchantName. Doing this[MerchantName] would be valid if you had defined a variable called MerchantName.

  3. You were appending a <tr> to #content, then appending a <td> to #content, instead of appending the <td> to the <tr>.

Try this:

$.each(data, function () {
    $("#content").append(
        $("<tr/>")
            .append("<td class='store-row'><h5 property='seller'>" + this.MerchantName + "</h5></td>");
            .append("<td class='price-row'><h5 property='price'>$" + this.Price + "</h5></td>");
            .append("<td><a property='url' target='_blank' href='" + this.PageURL + "' class='btn btn-danger'>GET IT</a></td>")
    );
})
于 2013-08-14T16:45:45.477 に答える