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?

I was wrong to recommend that you open a new question. My answer to your first question was not correct. I recommend you delete this one as it's basically a duplicate of the first. — JDB
– JDB, Commented Apr 14, 2015 at 20:01
@JDB ok I have deleted the previous one since this one contains more explanation. — alwaysVBNET
– alwaysVBNET, Commented Apr 14, 2015 at 20:04
Please provide a sample of the ajax response. Any answer will depend on the structure of your XML. — JDB
– JDB, Commented Apr 14, 2015 at 20:06
@JDB I have added the response which I am getting from the browser debugger. — alwaysVBNET
– alwaysVBNET, Commented Apr 14, 2015 at 20:10

JDB · Accepted Answer · 2015-04-14 20:52:32Z

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.

answered Apr 14, 2015 at 20:52

JDB

26.1k5 gold badges81 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

alwaysVBNET Over a year ago

that worked. A small problem is that the initial image from row 1, item 1 is pre-rendered and then it gets updated with the correct one. How would you suggest to fix this?

alwaysVBNET Over a year ago

I mean how to totally disable the rendering of the image on new items before setting the correct one?

alwaysVBNET Over a year ago

I tried this: $(".Image", tablex).find('img').attr('src', null); just before calling your code above. Maybe with an image spacer is a good solution or there's a fancier one?

JDB Over a year ago

Just get rid of the ImageUrl attribute on your ASP.NET tag. There's no reason to set it.

alwaysVBNET Over a year ago

the reason I have the ImageUrl is because I'm preloading from codebehind the first records. You are suggesting to add the relative path in the database field and remove "~/images/topimages/" & from the asp ImageUrl?

Collectives™ on Stack Overflow

Setting image dynamically on DataList from an Ajax XML object

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related