javascript - Setting image dynamically on DataList from an Ajax XML object -

i retrieving xml response ajax call , i'm trying set image on datalist image name comes xml. appears problematic. way trying set image this:

$(".image", tablex).attr('src', product.find("image").attr('src')); 

however, doesn't seem work right because on rendered results see image first item on first row being replicated/rendered on each of newly added items. if set attribute below:

 $(".image", tablex).attr('123456'); 

the results same above, believe code within attr has no effect! if set code this: $(".image", tablex).html(product.find("image").text()); can see correct file name being rendered on page.

here function:

function onsuccess(response) {         var xmldoc = $.parsexml(response);         var xml = $(xmldoc);         pagecount = parseint(xml.find("pagecount").eq(0).find("pagecount").text());         var customers = xml.find("customers");         customers.each(function () {             var product = $(this);             var tablex = $("#dvproducts div").eq(0).clone(true);             $(".image", tablex).attr('src', product.find("image").attr('src'));// <- problem here!             $(".productid", tablex).html(product.find("productid").text());             $(".name", tablex).html(product.find("name").text());             $("#dvproducts").append(tablex);         });     } 

my datalist

<div id="dvproducts">     <asp:datalist id="rptcustomers" runat="server" bordercolor="black" cellpadding="0" cellspacing="0" repeatlayout="table" repeatdirection="horizontal" >         <itemtemplate>             <div class="wrapping">                 <div id="boxer">                     <span class="image"><asp:image id="image" runat="server" cssclass="topimage" imageurl='<%# "~/images/topimages/" &eval("image")%>' /></span>                     <br />                     <span class="productid"><asp:label id="productid" runat="server" text='<%# eval("productid") %>' /></span>                     <br />                     <span class="name"><asp:label id="name" runat="server" text='<%# eval("name")%>' /></span>                 </div>             </div>             <br />         </itemtemplate>     </asp:datalist> </div> 

xml response data new 3 items.

"<newdataset>   <customers>     <rownumber>4</rownumber>     <subcatname>teenagers phones</subcatname>     <productid>6</productid>     <subcategoryid>2</subcategoryid>     <name>htc b</name>     <description>thcs</description>     <image>htc3.jpg</image>   </customers>   <customers>     <rownumber>5</rownumber>     <subcatname>teenagers phones</subcatname>     <productid>5</productid>     <subcategoryid>2</subcategoryid>     <name>htc a</name>     <description>htca</description>     <image>htc2.jpg</image>   </customers>   <customers>     <rownumber>6</rownumber>     <subcatname>teenagers phones</subcatname>     <productid>4</productid>     <subcategoryid>2</subcategoryid>     <name>htc</name>     <description>htc</description>     <image>htc1.png</image>   </customers>   <pagecount>     <pagecount>4</pagecount>   </pagecount></newdataset>   " 

maybe relative path interfering something, or why attr code not getting picked , same image on every new item? ideas?

you getting image name in xml response, need update src attribute of <img> element contained within <span>. xml doesn't contain full path, you'll need prepend path image name. should work:

//                  find img tag within span //                  |                set src attribute of image //                  |                |      prepend image path //                  |                |      |                      image name xml //                  |                |      |                      | $(".image", tablex).find('img').attr('src', '/images/topimages/' + product.find("image").text()); 

note "~/images" path in asp tag processed server-side , has special meaning, while javascript processed client side. in cases, code above should work, asp.net allows configure "root" directory of project, may need modify example work correctly.