Question

I have the following smarty code to display in table….

<table id="hor-zebra" summary="DIsh Information">
        <thead>
        <tr>
            <th scope="col">Item Name</th>
            <th scope="col">Item Price</th>
            <th scope="col">Item Type</th>
            <th scope="col">Quantity</th>
        </tr>
    </thead>

{foreach name=f1
         item=k
         from=$res}

         <tbody><tr class="odd">
            <td id="bn"> {$k->b_name}</td>
            <td> {$k->b_price}</td>
            <td> {$k->b_type}</td>
            <td> {$k->b_quantity}</td></tr>
             <tr><td><a href="javascript:remove()">Remove</a></td>
                 <td id="resId"></td></tr>


        {/foreach}
        </tbody></table>

And the ajax code is….

    function remove(){
   var http = GetXmlHttpObject();
    http.onreadystatechange = function()
    {
        if(http.readyState==4)
        {
            document.getElementById("resId").innerHTML = http.responseText;
            //alert(http.responseText);
        }
    }
    var name = document.getElementById("bn").innerHTML;
    alert(name);

    var url = "index.php?menu=rmv&ajax=ajax&q="+name;
    http.open('POST',url,true);
    http.send(null);
}

Now the problem is that var name is returning only the first Item Name whether i click 2nd or 3rd or so on………I need the name which i want to remove.But alert showing only the 1st…….

Answer 1

Try this :

<table id="hor-zebra" summary="DIsh Information">
        <thead>
        <tr>
            <th scope="col">Item Name</th>
            <th scope="col">Item Price</th>
            <th scope="col">Item Type</th>
            <th scope="col">Quantity</th>
        </tr>
    </thead>

{foreach name=f1 item=k key = ky from=$res}

         <tbody><tr class="odd">
            <td id="bn{$ky}"> {$k->b_name}</td>
            <td> {$k->b_price}</td>
            <td> {$k->b_type}</td>
            <td> {$k->b_quantity}</td></tr>
             <tr><td><a href="javascript:remove('{$ky}')">Remove</a></td>
                 <td id="resId{$ky}"></td></tr>


        {/foreach}
        </tbody>
</table>

And change you javascript to :

function remove(key){
       var http = GetXmlHttpObject();
        http.onreadystatechange = function()
        {
            if(http.readyState==4)
            {
                document.getElementById("resId"+key).innerHTML = http.responseText;
                //alert(http.responseText);
            }
        }
        var name = document.getElementById("bn"+key).innerHTML;
        alert(name);

        var url = "index.php?menu=rmv&ajax=ajax&q="+name;
        http.open('POST',url,true);
        http.send(null);
    }

Let me know if it worked or not .