0

This is my first question here and I'm totally stumped. Basically, I have a cart page that looks like this:

enter image description here

The site works by customers uploading images for printing, so each order is actually an image. Each cart item is generated dynamically using JS DOM functions, but the part I'm having trouble with is the row below the "Item #1" header row. It's supposed to contain a thumbnail of the order image (uploaded by the customer), which I get from a Laravel API endpoint. It returns a base64 string of the image, which I set as the image source like this:

var tbody = document.createElement('tbody');

var productImageRow = document.createElement('tr');
var productImageTD = document.createElement('td');
var productImage = document.createElement('img');
productImageTD.colSpan = 2;

if (order.productType == PRODUCT_TYPES.CONDUCTION_PLATES) {
    /* Some irrelevant code here... */
} else {
    $.get(<API Endpoint here>, function(data) {
        productImage.src = data;
    });
}

productImageTD.appendChild(productImage);
productImageRow.appendChild(productImageTD);
tbody.appendChild(productImageRow);

The problem is, even if I change the image src, it's not reflected in the browser (hence the empty row below the table header).

I am sure that the API is working because I do this exact same thing in another page and it works fine. Aside from that, if I log the base64 string in the data variable to the console and directly place it in the html like 

<img src="<my base64 string>">

it displays the image fine, so I'm sure the base64 string is valid.

I also know that the success block is being executed because alerts inside it execute. When tested further, any DOM Manipulation done inside the callback doesn't get reflected in the browser. Example:

var DOMTest = document.createElement('h1');
DOMTest.innerHTML = "Before Callback";
productImageTD.appendChild(DOMTest);
...
    $.get(<API Endpoint here>, function(data) {
        //productImage.src = data;
        DOMTest.innerHTML = "After Callback"
        alert(DOMTest.innerHTML);
    });

The result is that the page still displays the h1 as "Before Callback", but the alert shows the innerHTML as "After Callback". I tested this on Safari and Chrome.

I'm pretty sure I might just be making some stupid mistake. Any ideas? I'm totally lost here.

Jeynald Endaya
  • 1
  • 1
  • _**it's not reflected in the browser**_...I guess because ajax is async call it will be finished later while your other code gets executed before it finishes. – Jai Jan 10 '17 at 07:50
  • You should to create `new Image()` by JS. This question will help you: http://stackoverflow.com/questions/21227078/convert-base64-to-image-in-javascript-jquery – Hokusai Jan 10 '17 at 07:58
  • @hokusai thanks! it's cleaner that way, but the image is still not showing up. – Jeynald Endaya Jan 10 '17 at 08:02
  • @Jai I've also tried creating and appending the img/h1 elements to their parents inside the callback before, and it still doesn't work. The weird thing is that this same system works for another page – Jeynald Endaya Jan 10 '17 at 08:05
  • Are you browsing this page in ios mobile device? – EhsanT Jan 10 '17 at 08:14
  • @EhsanT On a macbook (macOS), but it's a mobile version of the page so I'm using Chrome's dev tools to simulate an iPhone 5 size (and Safari but resizing the window). Does that make a difference? – Jeynald Endaya Jan 10 '17 at 08:20
  • [This fiddle](https://jsfiddle.net/mya0h5oa/) is and example of your code and it's working fine and not reproducing your issue. So maybe you have to check your API and the data in response. – EhsanT Jan 10 '17 at 08:40

0 Answers0