Load json data in display tag by using ajax

Question

JQuery

 jQuery.noConflict();
    jQuery(document).ready(function(){

        jQuery("#stallId").change(function(e){

            //prevent default action
            e.preventDefault();

            jQuery.ajax({

                url: "getProducts.html?method=Product&stallId="+document.getElementById("stallId").value,
                dataType: "json",
                success: function(json){
                    if(json.status == true){
                        var strHtml='';
                        strHtml=+"";                  
                        for(var i=0;i<json.promotionProductList.length;i++){

                        }

                    }                   

                },
                failure: function(){
                    alert( "FAILED" );
                }
            });

        });
    });

Display tag

 <display:table name="ProductList" id="product" class="table" export="false">
    <display:column escapeXml="true" titleKey="productForm.name">

    </display:column>
</display:table>

In Action Class

Map productMap = new HashMap();
productMap.put("id", "1");
productMap.put("name", "Coca Cola");                

List<Product> productList = new ArrayList<Product>();
productList.add(productMap);

jsonWriter.object()
    .key("status").value(true)                   
    .key("pList").value(productList)
    .endObject();

How to load json data in display tag using ajax? When I select a stall from dropdownlist, it send the url to back end action class and able to get list of map of Products, but I not sure how to make the data to display in display tag. Could someone help me out and tell me how to load the data? Btw I'm using struts 1.

Answer 1

After I check the display tag part using firebug, I have found out that the display tag will be change to normal html table. So in ajax:

success: function(json){
    if(json.status == true){
        var strHtml='';                
        for(var i=0;i<json.pList.length;i++){
        strHtml+='<tr><td>'"+json.pList[i].name+"'</td></tr>';  
        }
    jQuery("table#product tbody").html(strHtml);
    }                   

},

In jQuery("table#product tbody"), the "table" refers to display table tag, and the #product refers to display table id.