Изменение динамически загруженного изображения при изменении ввода автозаполнения

Question

У меня есть таблица с динамически создаваемыми строками (s) - в каждом из них есть набор входов, один из которых является полем ввода автозаполнения, в котором пользователь может искать элемент и учитывая список вариантов, когда они их выбирают, детали их ПУНТА заполняются во всех остальных полях, и из базы данных вызывается изображение, соответствующее их выбору.

Вот мой DB вызов запрос:

$return_arr = array(); 
$param = $_GET["term"]; 
$fetch = mysql_query("SELECT * FROM crd_jshopping_products WHERE `name_en-GB` REGEXP '^$param' LIMIT 5"); 
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) { 
    $row_array['product_name'] = $row['name_en-GB']; 
    $row_array['category'] = $row ['meta_keyword_en-GB']; 
    $row_array['jshop_code_prod'] = $row['product_ean']; 
    $row_array['_ext_price_html'] = number_format($row['product_price'],2); 

    if (!empty($row['product_thumb_image']) AND isset($row['product_thumb_image'])){ 
     $row_array['image'] = $row['product_thumb_image'];  
    }else { 
     $row_array['image'] = 'noimage.gif';  
    } 
    array_push($return_arr, $row_array); 
} 
mysql_close($conn); 
echo json_encode($return_arr); 

В моем JQuery все, что нужно сделать, это разместить это:

$('#prodImage').append('<img class="imgLoads" src="/components/com_jshopping/files/img_products/' + ui.item.image + '" >'); 

Так будет поместить изображение в сНу ID: prodImage.

Я попытался IF отчетности:

if ($('#prodImage').length) 
{ 
    $('#prodImage').append('<img class="imgLoads" src="/components/com_jshopping/files/img_products/' + ui.item.image + '" >'); 
} 
else { 
    $('#prodImage').remove();          
} 

И ...

if (!$('#imgLoads').length) 
{ 
    $('#prodImage').append('<img class="imgLoads" src="/components/com_jshopping/files/img_products/' + ui.item.image + '" >'); 
} 
else if($('#imgLoads').length){ 
    $('#prodImage').remove();          
} 

И целая куча вариаций и replaceWith() заявлений, но безрезультатно.

Вы можете проверить живой интерфейс здесь:

http://cardoso.co.za/index.php/login-shop

Имя: stackUser

Пароль: демо

Что происходит, в лучшем случае, это изображения в кучу один под другие ...

Любая помощь приветствуется. Я также пробовал следующий пост, но он не работает :( Change image src with jQuery autocomplete

В ответ на кусок RST в коде, вот как я пытался реализовать его так, что он изменяет только изображение в точном TR где autocomlete Ifield изменяется:

 $(this).closest('#product_name').blur(function(){ 
       $('.imgLoads').attr('src','/components/com_jshopping/files/img_products/' + ui.item.image); 
      }); 

Это, как я решил эту проблему:

$(this).closest('tr').find('#product_name').blur(function(){ 
    $(this).closest('tr').find('.imgLoads').attr('src','/components/com_jshopping‌​/files/img_products/' + ui.item.image); 
    $(this).closest('tr').find ('.imgLoads').attr('style','border-r‌​adius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;border:solid 1px #CF3;'); 
    }); 

Answer 1

В вашем HTML установлен тег изображения уже

<div id="prodImage"> 
    <img class="imgLoads" src=""> 
</div> 

JQuery

$('.imgLoads').attr('src','/components/com_jshopping/files/img_products/' + ui.item.image); 

Этот код должен идти в функции, что-то вроде:

$('#some-element-id').change(function(){ 
    $('#prodImage img.imgLoads').attr('src','/components/com_jshopping/files/img_products/' + ui.item.image); 
)}; 

Так он будет регулировать, когда выбор сделан.

Answer 2

Решенный с помощью этого кода, после тщательного редактирования многих вещей, снова спасибо RST!

$(this).closest('tr').find('#product_name').blur(function(){ 
    $(this).closest('tr').find('.imgLoads').attr('src','/components/com_jshopping‌​/files/img_products/' + ui.item.image); 
    $(this).closest('tr').find ('.imgLoads').attr('style','border-r‌​adius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;border:solid 1px #CF3;'); 
    });