How can I clear the current page (user input and a table) and display a new form?

Ask the community
,
1

This has got to be documented somewhere, but I sure can’t find it! The User enters input, the collection is searched, and a table is displayed. The user clicks on the correct row in the table. This all works ok, but I would like to stay on the same page for the next step. I would like to clear the page and display a new form with data from the table. Thank you for any help.

2

Did you code all these steps, or did you use the wix-editors elements?
Where is your code?

3

This is my code. While I was waiting for a response I tried using “collapse” and that does what I want. I guess that is ok, but is there a better way?

Now that I have a clear page, I need to display some of the fields selected, and then have the user enter some info… I’m looking into the best way to do that now…

import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ; // for console output
// import wixLocation from ‘wix-location’;

$w( “#table1” ).columns = [
{ “id” : “col1” , “dataPath” : “lakeAddress” , “label” : “Lake Address” , “visible” : true , “type” : “stringfield2” },
{ “id” : “Col2” , “dataPath” : “parcelNumber” , “label” : “Parcel #” , “visible” : true , “type” : “string” },
{ “id” : “Col3” , “dataPath” : “name” , “label” : “Name” , “visible” : true , “type” : “string” },
{ “id” : “Col4” , “dataPath” : “mailAddress” , “label” : “Mail Address” , “visible” : true , “type” : “string” },
{ “id” : “Col5” , “dataPath” : “city” , “label” : “city” , “visible” : true , “type” : “string” },
{ “id” : “Col6” , “dataPath” : “state” , “label” : “state” , “visible” : true , “type” : “string” },
{ “id” : “Col7” , “dataPath” : “zip” , “label” : “zip” , “visible” : true , “type” : “string” }
];

export function Submit_click(event) {
wixData.query( “HLAGIS” )
.contains( “lakeAddress” ,$w( ‘#searchBox’ ).value)
.find()
.then(result => {
console.log( “Submitclick event” , result);
$w( “#table1” ).rows = result.items;
$w( “#table1” ).expand();
})

$w( “#table1” ).onRowSelect( (row_choosen) => {
let rowData = row_choosen.rowData;
console.log( "rowData is " ,rowData);
let rowIndex = row_choosen.rowIndex;
console.log( "RowIndex is " ,rowIndex);

$w( “#table1” ).collapse()
.then( () => {
console.log( “Done with table collapse” );
$w( “#searchBox” ).collapse()
.then( () => {
console.log( “Done with searchBox collapse” );
} );
$w( “#searchButton” ).collapse()
.then( () => {
console.log( “Done with searchButton collapse” );
} );
});

4

I am spending way to much time trying to figure this out! All I want to do is to take the contents of the selected row (the lakeAddress and name) and display them on a form or a box, then request additional info from them…

// lakeAddress: " LN 221B HAM LK"
// parcelNumber: “76-10-0-108.000-010”
// name: “WISKE R & D S H/W T/E”
// mailAddress: “50 ST RD 49”
// city: “HICK”
// state: “OK”
// zip: 48886

Thank you!

5

Try this one…

import wixData from 'wix-data';
import wixWindow from 'wix-window';  // for console output
// import wixLocation from 'wix-location'; 


$w.onReady(function () {
    $w("#table1").columns = [
        {"id": "col1","dataPath": "lakeAddress",    "label": "Lake Address","visible": true, "type": "stringfield2"},
        {"id": "Col2", "dataPath": "parcelNumber",  "label":"Parcel #","visible": true,      "type": "string"},
        {"id": "Col3", "dataPath":"name",           "label": "Name","visible": true,         "type": "string"},
        {"id": "Col4", "dataPath":"mailAddress",    "label": "Mail Address","visible": true, "type": "string"},
        {"id": "Col5", "dataPath":"city",           "label": "city","visible": true,         "type": "string"},
        {"id": "Col6", "dataPath":"state",          "label": "state","visible": true,        "type": "string"},
        {"id": "Col7", "dataPath":"zip",            "label": "zip","visible": true,          "type": "string"} 
    ];

    $w('#Submit').onClick ((event)=> {
        wixData.query("HLAGIS")
        .contains("lakeAddress",$w('#searchBox').value)
        .find()
        .then(result => {
            console.log("Submitclick event", result);
            $w("#table1").rows = result.items;
            $w("#table1").expand();
            $w("#table1").show('fade');
    })
 
    $w("#table1").onRowSelect(async(row_choosen) => {
 let rowData = await row_choosen.rowData; 
 let rowIndex = await row_choosen.rowIndex;  
 //----------------------------------
        console.log("rowData is ",rowData); 
        console.log("RowIndex is ",rowIndex);   
        console.log(rowData.lakeAddress)
        console.log(rowData.parcelNumber)
        console.log(rowData.name)
        console.log(rowData.mailAddress)
        console.log(rowData.city)
        console.log(rowData.state)
        console.log(rowData.zip)
 //----------------------------------
 
        .then(async() => {
 await $w("#table1").hide('fade'),       $w("#table1").collapse() 
 await $w("#searchBox").hide('fade'),    $w("#searchBox").collapse()
 await $w("#searchButton").hide('fade'), $w("#searchButton").collapse()
 //----------------------------------
        })
    })
})
6

Thank you for the response. I tried this and and I receive the following:

“Cannot read property ‘then’ of undefined line 41”. If I comment out the “.then”, statement, it appears to work ok.

//     . then ( **async** ()   =>   {

I am looking into this, but all this about promises and such is a little over my head. I’m just getting started with java…