Setting image dynamically on DataList from an Ajax XML object

Question

I am retrieving an XML response from an Ajax call and I'm trying to set the image on my datalist from the image name which comes from the XML. This appears to be problematic. The way I am trying to set the image is like this:

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

However, this doesn't seem to work right because on the rendered results I see the image from the first item on the first row being replicated/rendered on each of my newly added items. Even if I set the attribute like below:

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

the results are the same as above, so I believe my code within the attr has no effect! If I set the code like this: $(".Image", tablex).html(product.find("Image").text()); then I can see the correct file name being rendered on the page.

Here is my 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 is 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 with the data for the new three 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 the relative path is interfering with something, or why does my attr code does not getting picked up and I get the same image on every new item? Any ideas?

Answer 1

You are getting just the image name back in your XML response, so you need to update the src attribute of the <img> element contained within your <span> . But the XML doesn't contain the full path, so you'll also need to prepend the path to the image name. Something like this should work:

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

Note that the "~/images" path in your ASP tag is processed server-side and has special meaning, while your javascript is processed client side. In most cases, the code above should work, but ASP.NET allows you to configure the "root" directory of your project, so you may need to modify my example to get it to work correctly.