Динамическое определение образа в DataList из объекта XML Ajax

Question

Я получаю ответ XML от вызова Ajax, и я пытаюсь установить изображение на моем каталоге данных из имени изображения, полученного из XML. Это кажется проблематичным. Так я пытаюсь установить изображение, как это:

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

Однако, это не похоже на работу правильно, потому что на оказанным результатов я вижу изображение с первого элемента в первой строке тиражируется/отображается на каждом из моих новых добавленных элементов. Даже если установить атрибут, как показано ниже:

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

результаты такие же, как выше, так что я полагаю, что мой код в attr не имеет никакого эффекта! Если я задаю этот код следующим образом: $(".Image", tablex).html(product.find("Image").text());, то я могу увидеть правильное имя файла, отображаемого на странице.

Вот моя функция:

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); 
     }); 
    } 

Мой 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 с данными для трех новых элементов.

"<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> " 

Может быть относительный путь конфликтует с чем-то, или почему мой attr код не получать подхвачены и я получаю то же изображение на каждой новой позиции? Есть идеи?

Answer 1

Вы получаете только имя изображения в ответе XML, поэтому вам необходимо обновить атрибут src элемента <img>, содержащегося в вашем <span>. Но XML не содержит полный путь, поэтому вам также необходимо добавить путь к имени изображения. Нечто подобное должно работать:

//     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()); 

Обратите внимание, что «~/изображений» путь в вашей ASP тег обрабатывается на стороне сервера и имеет особое значение, в то время как ваш браузер обрабатывается на стороне клиента. В большинстве случаев вышеприведенный код должен работать, но ASP.NET позволяет вам настроить «корневой» каталог вашего проекта, поэтому вам может потребоваться изменить мой пример, чтобы он работал правильно.