TypeError: $w(...)[data.command] is not a function

I have a problem, I am trying to occupy elements of a page “A” and occupy them in a page “B”, they already helped me before but I get the following error code "TypeError: $ w (…) [data. command] is not a function "why is this? and how can i solve it
page - A

import {local} from 'wix-storage';
let data = JSON.stringify({
  element: "text9",
  command: "hide",
});
local.setItem("key1", data);
page - B 

page - B

import {local} from 'wix-storage';
import wixLocation from 'wix-location';
$w.onReady(function () {

});

export function columnStrip1_click(event) {
    let data = JSON.parse(local.getItem("key1")); console.log(data);
     console.log("Command: ", data.command);
  console.log("Element: ", data.element);
  
  //command in action --> hiding the wished element on your page-B
  $w(`#${data.element}`)[data.command]()
     wixLocation.to("/plogin")
    
}

Who is → “they” ??? :grin:
https://www.wix.com/velo/forum/coding-with-velo/manipulate-elements-found-on-another-page

My question at this moment when i was looking onto your code…

  1. I hope you cut off the onReady-part of your code, just to show a shorten version as example!

  2. When you click onto your Column-Strip → you will directly and immediately redirected to → “plogin”! So why do you need the hide functionality in the same click-action ? in this case?

You can’t even use it, because of the emmidetaly processing redirection.

Well with everything that you have helped me I find it interesting, you will surely remember that you helped me develop this code to recognize a login for a specific time


import wixStorage from 'wix-storage';
import wixLocation from 'wix-location';
import wixData from 'wix-data';
import wixWindow from 'wix-window';
var onlineState

$w.onReady(() => {
    setInterval(logOut, (1*1000*60)); // --> LOGOUT every 5min
     
   $w("#button1").onClick(async () => {
        //getting online-status...
        onlineState = wixStorage.session.getItem("onlineState");
        if(onlineState === "true") {
          wixLocation.to("/principal")
        }
       else {
         let email = $w("#email").value
          let contrasena = $w("#contrasena").value
          await checkLogin(email, contrasena)
           
        }
    })  
    /*onlineState = wixStorage.session.getItem("onlineState");
    if(onlineState === "true") {
             $w("#email").hide()
             $w("#contrasena").hide()
             
        } else{ 
            $w("#email").show()
             $w("#contrasena").show()
        }*/
})
function logOut() {onlineState == "true"; 
  //setting online-status...
  wixStorage.session.setItem("onlineState", "false");
}
async function checkLogin(email, contrasena) {
  wixData.query("logingers")
  .eq("title", email)
  .eq("contrasena", contrasena)
  .find()
  .then((res)=>{
    if (res.items.length > 0) {//setting online-status...
      wixStorage.session.setItem("onlineState", "true");
      wixLocation.to("/principal") 
    } else { 
      //wixWindow.openLightbox('loginwarn');
      console.error("Email/Contrasena wrong!")
    }
  }); 
}

Well, I have tried to do the following, while the session is active, disable the input of email “#email” and password “#password” so that only the send button “# button1” remains and after the time expires. the session show the inputs again to log in again
I have tried to implement this code snippet over and over again in a thousand ways and I have not been able to solve it

/*onlineState = wixStorage.session.getItem("onlineState");
    if(onlineState === "true") {
             $w("#email").hide()
             $w("#contrasena").hide()
             
        } else{ 
            $w("#email").show()
             $w("#contrasena").show()
        }*/

I know that this could be solved in some way but I already tried and I can not, could you help me to achieve it please?

@russian-dima help me with that please, I want to know how to do it please :pray:t4::pray:t4::pray:t4:

Will take a look onto it when i am back home (2-3-hours).

I hope thanks

Hi there,

Well, I found nothing wrong with your code, the only thing that came up to my mind is that your code is MISSING the element with the specified ID you retrieved from the storage.

You need to make sure everything is there before attempting to call the function.

const key = local.getItem('key1');

// Make sure the specified key has data
if (typeof key === 'string') {
    // convert the data into an object
    const data = JSON.parse(key);
    
    // Make sure our both properties are valid
    if (data.element && data.command) {
    
        // Make sure there is an element with the given ID.
        if ($w(`#${data.element}`).id === data.element) {
            
            // Make sure the specified command is present before calling it.
            if ($w(`#${data.element}`)[data.command]) {
                
                // Now you can safely excute the command.
                $w(`#${data.element}`)[data.command]();
                return true;
            }
        }
    }
}

return false;

You need to log into the console from the beginning all the way to the end, add a console.log( ) before each and every if statement to see what’s going on, you’ll notice what’s wrong or what’s missing from the first run.

Hope this helps~!
Happy Coding :computer:
Ahmad

I get errors :frowning: and I don’t know why they are, I just want while the session is active, the email entry and password disappear while the button continues to go to the main page, and after the session expires, go back to show the entry

 import {local} from 'wix-storage';
 
 onlineState = wixStorage.session.getItem("onlineState");
    if(onlineState === "true") {
             //$w("#text170").show()
             //$w("#button1").hide()
             let data = JSON.stringify({
  element: "email",
  command: "hide",
});

local.setItem("key1", data);
          const key = local.getItem('key1');

// Make sure the specified key has data
if (typeof key === 'string') {
    // convert the data into an object
    const data = JSON.parse(key);
    
    // Make sure our both properties are valid
    if (data.element && data.command) {
    
        // Make sure there is an element with the gived ID.
        if ($w('#${data.element}').id === data.element) {
            
            // Make sure the specified command is present befoer calling it.
            if ($w('#${data.element}')[data.command]) {
                
                // Now you can safely excute the command.
                $w('#${data.element}')[data.command]();
                return true;
            }
        }
    }
}

return false;  
        }


how can I solve that ?

@riveraanuar22 you need to wrap my code into a function, don’t place it inside the page’s onReady() function.

Also, regarding the element code, please copy my exact code, I’m using the back tick quotation ( ` ), not the regular one ( ’ ), notice the difference.

Sorry for the late answer, but as i can see Ahmad already have helped you.

How ever, it was a mess to give you the right answer! WHY ???

1) First learn to use this forum!
a) do not open multiple posts on (almost) the same topic/issue.
b) describe your situation as most detailed as possible, including all informations about your SETUP, your used Wix-Editor, ELEMENTS, IDs, DBs, DATASETs and so on…
c) Do not place CODE-PARTS into → PICs! Show codes inside a CODE-BLOCK!
d) Always be thankful and choose best answer and giving some likes :grin:

2) Use more the POWER of CONSOLE!
Observing all your generated codes → you did not used the CONSOLE consequently. The CONSOLE (especialy for you as beginner) is a LIFE-SAFER!!!

3) Do not expect that you will always get READY-2-GO-SOLUTIONS like this for free. (just a little start-up 4 you).

4) And here i provide you somethign of a combination of Ahmads and my own ideas and thoughts … (do not forget to take a look at all the given CONSOLE-LOGS inside it)…

PAGE-CODE- A :

//Page-A ---> EVENTOS (here your Login is located!)
import wixStorage from 'wix-storage';
import wixLocation from 'wix-location';
import wixData from 'wix-data';
var storageDATA = {};

//------ User-Interface ---------------------------
var DATABASE = "Bypass-DB"
var onlineTime = 1 //in minutes!
//------ User-Interface ---------------------------

$w.onReady(()=> {setInterval(logOut, (onlineTime*1000*60));
    let data = wixStorage.session.getItem('storageDATA');
    if (typeof data === 'string') {console.log("Data in STORAGE found! ", storageDATA);
        storageDATA = JSON.parse(data); console.log("Parsed-Data: ", storageDATA);
    }
    else {console.log("No data in STORAGE found!"); create_storageDATA();}
     
  $w("#btnLogin").onClick(async()=> {console.log('Button clicked!'); console.log(storageDATA);
        if(storageDATA.onlineState === "true") {console.log("Online-Time not expired yet!");
            //What to do here ...........???????
            console.log("REDIRECTION TO WHAT PAGE EVER!")
            wixLocation.to("/page-b"); //--> redirection to page-B; User-Logged-in

        }
        else {console.log("Online-Time expired! Please log-in again!")
            let email = $w("#email").value;                 console.log("Entered-Email: ", email);
            let password = $w("#password").value;           console.log("Entered-Password: ", password);
            let dbDATA = await checkLogin(email, password); console.log("DB-RESULTS: ", dbDATA);

            if (dbDATA.length > 0) {//setting online-status...
                storageDATA.onlineState = "true"
                storageDATA.maxLoginTime = onlineTime;
                storageDATA.element = "button2";
                storageDATA.command = "hide";
                wixStorage.session.setItem("storageDATA", JSON.stringify(storageDATA));
                wixLocation.to("/page-b"); // --> redirection to page-B (principal); User-Logged-in
            } else {console.error("Email/password wrong!");
                //wixWindow.openLightbox('loginwarn');
                storageDATA.onlineState = "false"
                wixStorage.session.setItem("storageDATA", JSON.stringify(storageDATA));
            }
        }
    });

    $w("#btnLogout").onClick(async()=> {logOut();});
});

function create_storageDATA() {console.log("Creating new Storage-Data running...");
    storageDATA =  {
        onlineState: "false",
        maxLoginTime: onlineTime,
        element: undefined,
        command: undefined,
    }
}

async function checkLogin(email, password) {
  return wixData.query(DATABASE)
  //.eq("title", email)
  .eq("email", email)
  .eq("password", password)
  .find().then((res)=>{return (res.items);});
}

function logOut() {
    console.log("Your ONLINE-TIME has been expired! Logout-Process running!"); 
    storageDATA.onlineState="false"; 
    wixStorage.session.setItem("storageDATA",  JSON.stringify(storageDATA));
}

PAGE-CODE-B:

import wixStorage from 'wix-storage';
import wixLocation from 'wix-location';

$w.onReady(function () {
    let storageDATA = JSON.parse(wixStorage.session.getItem("storageDATA")); console.log(storageDATA);
    console.log("Command: ", storageDATA.command);
    console.log("Element: ", storageDATA.element);
  
    //command in action --> hiding the wished element on your page-B
    $w(`#${storageDATA.element}`)[storageDATA.command]()
    // wixLocation.to("/plogin")
});

EXAMPLE:

https://russian-dima.wixsite.com/login-system/page-a

So you have now a working EXAMPLE you can compare with your own solution.

And now! After all these somekind of rude sounding words → HAVE FUN & GOOD LUCK WITH YOUR PROJECT! :wink:
I hope you have learned → That CODING can be a very TIME-CONSUMING thing!

BTW: Do not forget to change all ELEMENT-IDS to your own ones!

Well, and the post-opener was gone,

Forgot one point → Always give feedback.

I already mentioned → “be thankful?” :laughing:

@russian-dima :joy::joy: take it easy

@ahmadnasriya :rofl: i do :joy: just wanted to hear the feedback.

@russian-dima you should not be waiting to hear thankful words, as our ancestors said: Throw your good deeds in the sea.