I have a problem with using updateRow() to change a table row contents, when using an image derived from a “wix:image” url. The table (and page) locks up or shows “loading…” forever.
To replicate, use the unmodified “Table” element from “Lists & Grids” that shows “three houses for sale”.
Name this table as element ‘#myTable’.
Code is as below.
Create four buttons:
‘#buttonFillWithHttp’ puts 50 entries into the table, using an image from an HTTP url
‘#buttonFillWithWix’ puts 50 entries into the table, using an image from a “wix:image” url
‘#buttonChange2toHttp’ changes row 2 to use the image from HTTP url
‘#buttonChange2toWixImg’ changes row 2 to use the image from “wix:image” url
At $w.onReady() the table gets 4 rows varying between HTTP and “wix:image” urls.
(It doesn’t actually matter if this is done - the problem happens the same way.)
Use the Fill buttons to fill the table with ether HTTP or with “Wix:image” rows. Either works fine.
Click the “Change row 2 to HTTP”, and table row 2 changes text and changes images fine.
BUT - Click the “Change row 2 to use Wix Image”, and table row 2 disappears, and the table either locks up or shows “loading…” forever. All buttons become unresponsive.
My question is - should it be possible to update a row using a “wix:image”? Works fine for HTTP images.
let myHTTPImage1 = "https://static.wixstatic.com/media/74e764_49549388389c4c16971c2a56e6084e08~mv2.jpg";
let myWixImage1 = "wix:image://v1/74e764_f6ae7987c1ca4544a81bcc468cb792c9~mv2.jpg/file.jpg#originWidth=160&originHeight=48";
/*****************************************/
$w.onReady(function () {
$w("#myTable").dataFetcher = getRows;
});
/*****************************************/
const myTableData = [
{"photo": myHTTPImage1, "address": "Row 0", "rooms": "begin", "price": "222" },
{"photo": myWixImage1, "address": "Row 1", "rooms": "begin", "price": "333" },
{"photo": myWixImage1, "address": "Row 2", "rooms": "begin", "price": "444" }
];
/*****************************************/
function getRows(startRow, endRow) {
return new Promise( (resolve, reject) => {
// Fetch the objects from startRow to endRow from `myTableData`:
const fetchedDataRows = myTableData.slice(startRow, endRow);
// resolve to DataRequested object
resolve( {
pageRows: fetchedDataRows,
totalRowsCount: myTableData.length
} );
} );
}
/*****************************************/
export function buttonFillWithHttp_click(event) {
let rows = [];
for (let i = 0; i < 50; i++) {
rows.push( {"photo": myHTTPImage1, "address": "http", "rooms": i.toString(), "price": "222" } );
}
$w("#myTable").rows = rows;
}
/*****************************************/
export function buttonFillWithWix_click(event) {
let rows = [];
for (let i = 0; i < 50; i++) {
rows.push( {"photo": myWixImage1, "address": "wix img", "rooms": i.toString(), "price": "222" } );
}
$w("#myTable").rows = rows;
}
/*****************************************/
export function buttonChange2toHttp_click(event) {
let rowData = {"photo": myHTTPImage1, "address": "Row 2 now HTTP img", "rooms": "Changed to HTTP", "price": "now HTTP" };
console.log("rowData", rowData);
$w("#myTable").updateRow(2, rowData);
}
/*****************************************/
export function buttonChange2toWixImg_click(event) {
let rowData = {"photo": myWixImage1, "address": "Row 2 now WIX img", "rooms": "Changed to WIX", "price": "now WIX" };
console.log("rowData", rowData);
$w("#myTable").updateRow(2, rowData);
}
