manipulate elements found on another page

Ask the community
,
1

Good morning I would like to know if it is possible to manipulate elements that are in other pages, for saying I have a button on page “Y” which I want to go to page “X” and at the same time I want it to show me a button that is hidden under the hide () method and hide a text that is visible by the show () method

2

Yes this is possible. You will need to use Wix-Storage .

How would it work?

  1. Generating an Object which will hold all needed data to control your element from PAGE-A, on PAGE-B…
import {local} from 'wix-storage';

let data = {
  element: "elementIDhere",
  command: "show",
}

local.setItem("key1", data);

On PAGE-B you get the data and use it…

import {local} from 'wix-storage';

let data = JSON.parse(local.getItem("key1")); console.log(data);


$w.onReady(()=>{$w(`#${data.element}`)[data.command]();});
3

1366×768 77 KB

Why the error? Is the value of “key1” replaced by the “ID” of the element and the “data” by the type “show or hide”?

4

Sorry, forgot to STRINGIFY…

import {local} from 'wix-storage';

let data = JSON.stringify({
  element: "elementIDhere",
  command: "show",
});

local.setItem("key1", data);

And you do not need the → # ← in the data itself. Delete it inside data.

You already have it in your PAGE-B-CODE.

5

1366×768 142 KB

It does not recognize me in my B page or in the onReady () or in the functionality of my button, whatever is indicated, bucause?

6

Test this one and take a look onto CONSOLE!

$w.onReady(()=>{
  let data = {
    element: "text170",
    command: "hide",
  };


  console.log($w(`#${data.element}`));
  console.log(data.command);
  $w(`#${data.element}`)[data.command]();
});

-Your element-ID is —> “text170”
-Your sent command is —> “hide”
-Your prefix is placed on PAGE-B → #
-This one should → HIDE your wished element on PAGE-B…

$w(`#${data.element}`)[data.command]();

Now put all your knowledge together and create a working code :wink:

7


It still does not accept the element, or how is the correct way for the button event to be clicked to eliminate the hide () text?
page - A

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

page - B

import {local} from 'wix-storage';
import wixLocation from 'wix-location';
let data = JSON.parse(local.getItem("key1")); console.log(data);

$w.onReady(()=>{
  let data = {
    element: "text170",
    command: "hide",
  };


  console.log($w(`#${data.element}`));
  console.log(data.command);
  $w(`#${data.element}`)[data.command]();


});
export function columnStrip1_click(event) {
     wixLocation.to("/plogin")
        $w("#text170").hide()
}

What is the right way ?

8

@russian-dima I get these errors

698×151 12 KB

9 
//Page-A-CODE...
import {local} from 'wix-storage';

$w.onReady(()=>{console.log("My page-A is ready now.");

  //defining the data for command and used element to be changed on page-B...
  
  let data = JSON.stringify({
    element: "text170",
    command: "show",
  });
  console.log("Needed DATA prepared and defined: ", data);
  //Concerting the data to a STRING-OBJECT & and storing it in Wix-Storage...
  local.setItem("key1", data); console.log("Needed data is now stored in Wix-Storage! Continue on page-B!");
});



//Page-B-CODE...
import {local} from 'wix-storage';
import wixLocation from 'wix-location';

$w.onReady(()=>{console.log("My page-B is ready now.");
  //recieving DATA from Wix-Storage & parse it back to an --> OBJECT...
  let data = JSON.parse(local.getItem("key1")); console.log("Recieved-Data from Wix-Storage prepared to be used: ", data);

  console.log("Command: ", data.command);
  console.log("Element: ", data.element);
  
  //command in action --> hiding/showing/collapsing/expanding or what ever the wished element on your page-B...
  $w(`#${data.element}`)[data.command]();

  //continue here your redirection-process.... 
  
  // DO YOU NEED AN IF-ELSE-STATEMENT to check for something?
  /*
  if () {}
  else {}
  */
  wixLocation.to("/plogin")
});

Your last step you will do on your own.
You have now enough informations to get it to work.
If you still have problems → take a look into the VELO-API-DOCs.

Good luck !

And do not forget to like it, if you really liked it :wink:

10

@russian-dima I keep getting the same error :(, why?

1366×768 139 KB

11

@riveraanuar22

You have placed a text-element on your page-B , with the ID → “#text9” ?
If still not running add the following…

$w.onReady(async()=>{console.log("My page-B is ready now.");..........

let data = await JSON.parse(local.getItem("key1"));