Replacing img src in <input type=“image” after AJAX success

Question

I have a series of icons that when clicked open various tooltip popups where the user can perform actions such as updating meta tags for a product

One such icon is coded like this

<input type="image" class="icon-meta meta-288" src="images/icon_edit_metatags_off.png" border="0" alt="Meta Tags" title="Meta Tags">

When the user has added the required content I want to change the icon from icon_edit_metatags_off.png to icon_edit_metatags_on.png

In the php file for my AJAX I have the following

if (zen_get_metatags_keywords($products_id, (int)$_SESSION['languages_id']) or zen_get_metatags_description($products_id, (int)$_SESSION['languages_id'])) {
    $metatag_icon = '<input type="image" class="icon-meta meta-'.$products_id.'" src="images/icon_edit_metatags_on.png" border="0" alt="Meta Tags" title="Meta Tags" />';
} else {
    $metatag_icon = '<input type="image" class="icon-meta meta-'.$products_id.'" src="images/icon_edit_metatags_off.png" border="0" alt="Meta Tags" title="Meta Tags" />';
}
echo json_encode(array('meta'=>$metatag_icon, 'asHtml' => '<div class="alert alert-info admin-meta-update-success"><strong>Meta Tags Updated</strong></div>'));

And my script is

$('.product-meta-tags').submit(function(e){
        e.preventDefault();
        $.ajax({
            url: 'update_product_meta_tags_ajax.php',
            type: 'POST',
            data: $(this).serialize(),
            dataType: 'html'
        })
        .done(function(data) {
            var obj = JSON.parse(data);
            console.log(obj.meta);
            $('.tooltip-metatags-<?php echo $products_id; ?>').tooltipster('close');
            var elem = $('.update-<?php echo $products_id; ?>');
            var elem2 = $('.meta-<?php echo $products_id; ?>');
            elem.fadeOut('slow', function() {
                elem.html(obj.asHtml).fadeIn('slow', function() {
                    elem.delay(1200).fadeOut('slow');
                });
            });
            elem2.fadeOut('slow', function() {
                elem2.html(obj.meta).fadeIn('slow');
            });
        })
        .fail(function(){
            alert('Ajax Submit Failed ...'); 
        });
    });

When the tooltip closes the original icon fades, but then instead of showing the changed state, it instead shows the original image.

If I view source on the icon, the HTML has changed to

<input type="image" class="icon-meta meta-288" src="images/icon_edit_metatags_off.png" border="0" alt="Meta Tags" title="Meta Tags"><input type="image" class="icon-meta meta-288" src="images/icon_edit_metatags_on.png" border="0" alt="Meta Tags" title="Meta Tags"></input>

I thought the content from the AJAX success would just replace what was originally in the div, as I have used to update displayed prices etc, but it just seems to be appending it.

I did try to target the src directly using something like

$("#elementId").attr("src","value");

but that gave me a basic image rather than replace the one used as the input src.

Where have I gone wrong here?

Answer 1

I've resolved my issue with some edits to the ajax .php file and the Ajax success script. I was actually on the right lines with .attr("src","value"); but had some errors in the code I wrote. For the benefit of anyone who visits this post in the future, I changed the relevant section of my ajax .php file to

if (zen_get_metatags_keywords($products_id, (int)$_SESSION['languages_id']) or zen_get_metatags_description($products_id, (int)$_SESSION['languages_id'])) {
    $metatag_icon = "images/icon_edit_metatags_on.png";
} else {
    $metatag_icon = "images/icon_edit_metatags_off.png";
}
echo json_encode(array('meta'=>$metatag_icon, 'asHtml' => '<div class="alert alert-info admin-meta-update-success"><strong>Meta Tags Updated</strong></div>'));

and updated my script to

$('.product-meta-tags').submit(function(e){
        e.preventDefault();
        $.ajax({
            url: 'update_product_meta_tags_ajax.php',
            type: 'POST',
            data: $(this).serialize(),
            dataType: 'html'
        })
        .done(function(data) {
            var obj = JSON.parse(data);
            $('.tooltip-metatags-<?php echo $products_id; ?>').tooltipster('close');
            var elem = $('.update-<?php echo $products_id; ?>');
            elem.fadeOut('slow', function() {
                elem.html(obj.asHtml).fadeIn('slow', function() {
                    elem.delay(1200).fadeOut('slow');
                });
            });
            $('.meta-<?php echo $products_id; ?>').attr("src",obj.meta);
        })
        .fail(function(){
            alert('Ajax Submit Failed ...'); 
        });
    });

I now get the success message momentarily displayed in my div location, and the icon changes to show that the meta tags have been set.