Hi, I have problems with the live site, it doesnt work as the “preview” shows in the editor.
I have a table and I do query to get the DB from the collection.
when I try to insert a new row or to edit or to remove specific row it works perfectly in the preview but not in the live site . also the UI of the table looks different in the preview and the live site . what am I doing wrong?
thank you in advance.
This is the main page:
// API Reference: Introduction - Velo API Reference - Wix.com
// “Hello, World!” Example: Velo Learning Center
import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’
// …
let rows = ; //holds an aray of items for the table’s rows
//fetchs data from the DB and place it in the table
const getTableData = () => {
wixData . query ( “COURSE” )
. find ()
. then (( results ) => {
if ( results . items . length > 0 ) {
rows = results . items ;
console . log ( ‘items’ , rows );
//const rows
rows . forEach ( row => {
row . edit = ‘Edit’
row . delete = ‘Delete’
})
//show the datsbase by the rows
$w ( “#tableMembers” ). rows = rows ;
$w ( “#tableMembers” ). show ();
}
})
. catch (( error ) => {
let errorMsg = error . message ;
console . log ( errorMsg );
let code = error . code ;
console . log ( code )
});
}
$w . onReady ( function () {
//set the table's columns
$w ( "#tableMembers" ). columns = [{
"id" : "edit" ,
"dataPath" : "edit" ,
"label" : "" ,
"visible" : **true** ,
"type" : "string" ,
},
{
"id" : "delete" ,
"dataPath" : "delete" ,
"label" : "" ,
"visible" : **true** ,
"type" : "string" ,
},
{
"id" : "col3" ,
"dataPath" : "crsTopic" ,
"label" : "נושא הקורס" ,
"visible" : **true** ,
"type" : "string" ,
"linkPath" : "link-field-or-property"
},
{
"id" : "col2" ,
"dataPath" : "crs_name" ,
"label" : "שם הקורס" ,
"visible" : **true** ,
"type" : "string" ,
"linkPath" : "link-field-or-property"
},
{
"id" : "col1" , // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath" : "title" ,
"label" : "מספר הקורס" , // The column header
"width" : 100 , // Column width
"type" : "string" , // Data type for the column
// Path for the column if it contains a link
"linkPath" : "link-field-or-property"
},
];
// Display the query results in the table
getTableData ();
//open a lightbox for adding a new row
$w ( “#btnNew” ). onClick (() => {
wixWindow . openLightbox ( ‘New&EditCourse’ ). then (( toInsert ) => {
console . log ( toInsert );
//adding a new row to the DB
wixData . insert ( ‘COURSE’ , toInsert )
. then (() => {
console . log ( ‘wixData.insert’ );
getTableData ();
})
. catch (( error ) => {
console . error ( error );
});
})
});
//listen to click on cells & let user edit table’s data
$w ( “#tableMembers” ). onCellSelect (( event ) => {
const cellData = event . cellData
const rowIndex = event . cellRowIndex ;
const rowData = rows [ rowIndex ];
//if the clicked cell is the “edit” action
if ( cellData === ‘Edit’ ) {
wixWindow . openLightbox ( ‘New&EditCourse’ , rowData ). then (( toUpdate ) =>{
//update the current row in the DB
wixData . update ( ‘COURSE’ , toUpdate )
. then (() => {
getTableData ();
})
. catch (( err ) => {
console . error ( err );
});
})
}
//if the clicked cell is the "delete" action
**else if** ( cellData === 'Delete' ) {
wixWindow . openLightbox ( 'deleteCourse' ). then (( confirm ) => {
//if the user confirmed deletion
if ( confirm ) {
wixData . remove ( "COURSE" , rowData . _id ). then ( getTableData )
. catch (( err ) => {
console . error ( err );
});
}
});
}
})
});
