Opening links in new tab by clicking button in the repater

the problem is when i click buttion it opens the URL directly that links with the button and then it works on second click and when i click third time diffrent button it give the result of prviously click button id.
Means the issue is the link only opens on the second click of the button and the link that opens corresponds to the previous button clicked.
Why this happening.
I am attaching the link of my test website and the code i wrote:

Link: omdamahe . wixsite . com/my-site-2/test-page

Code:

import wixData from 'wix-data';
import wixWindow from 'wix-window';

$w.onReady(function () {

const findNameWithIdWhatsapp = (acoountOpeningId)=>{
    const accountOpening = "Items";
    // const acoountOpeningId = $w("#IdInput").value;
// ...

wixData.get(accountOpening, acoountOpeningId)
  .then((item) => {
    // console.log(item); //see item below
    const urlVal = item.aoUrl
    const title = item.title

    $w('#sharewhatsapp').link = "Link is here";
    $w('#sharewhatsapp').target = "_blank";

    
  })
  .catch((err) => {
    console.log(err);
    console.log("Yha fas gye tum")
    console.log(acoountOpeningId)
  });
}

    $w("#accountOpeningListRepeater").onItemReady(($item, itemData, index)=>{
        // console.log(itemData._id)
        $item("#sharewhatsapp").onClick(()=>{
            findNameWithIdWhatsapp(itemData._id)
        })

    })
});

I do not recognize in any part of your code the following code-line…
$w ( “#accountOpeningListRepeater” ).data = [data-array-here];

That means you have connected a part of your DATASET trough the —> PROPERTY-PANEL-OPTIONS <–.

And that means you are using a DATASET!

Now you have 2-ptoblems!

  1. At any place inside of your code you have …
$w('#dataset').onReady(()=>{.........});

That means, you do not wait till your DATASET is READY, before start working with it.

  1. You have now 2 different and somekind of PARALLEL working cycles.
    This is why you NEVER SHOULD MIX CODED part with setted OPTIONS inside of the PROPERTY-PANEL, or mixing it with Wix-Data-API.

In 80-90% there are always the same PROBLEMS and ERRORS, if someone starts to mix these things.

EITHER GO THE ONE WAY (CODING-WAY), OR GO THE NORMAL WAY, WORKING WITH CONNECTED DATASET AND OPTIONS INSIDE OF PROPERTY-PANEL.

Both ways will offer you different options.
The more flexible one, which will give you more liberty and won’t give you any BOUNDARIES ----> is the CODING-WAY, where you can setup everything like you want, if you code it on your own.

If you start to use the PROPERTY-PANEL → you will only be able to use those things, which are already predefined and given out of the box.

Only experienced CODERS will be able to combine both ways without having bigger problems.

And this is exactly the case, why you have problems.

Ok Thanks for the response.

So can you tell me how can I achieve opening the specific link from the dataset on new tab.

I changed the code to simple one but also not working
same problem happening that button starts working on second click



$w.onReady(function () {
 $w("#accountOpeningListRepeater").onItemReady( ($item, itemData, index) => {
  $item('#sharewhatsapp').onClick((event) => {
    $w('#sharewhatsapp').link = "http://api.whatsapp.com/send?text="+itemData._id+" \n"+itemData.title+"&type=custom_url&app_absent=0";
    $w('#sharewhatsapp').target = "_blank";
  });
 });
});

  1. USING DATASET…
$w.onReady( function () {
  $w("#repeatedContainer").onClick( (event) => {
    let $item = $w.at(event.context);
    let clickedItemData = $item("#myDataset").getCurrentItem();
  } );
} );
  1. USING DATA-PROPERTY…
$w.onReady( function () {
  $w("#repeatedContainer").onClick( (event) => {
    const data = $w("#myRepeater").data;
    let clickedItemData = data.find(item => item._id === event.context.itemId);
  } );
} );
  1. USING Wix-DATA without any DATASETS (example)
const bikeData = [
  {
    "_id":"bike1",
    "img":"wix:image://v1/6875c086ef453f5727c2b5932b3b3be4.png/Red Bike#originWidth=550&originHeight=300",
    "description":"Red Bike"
  },
  {
    "_id":"bike2",
    "img":"wix:image://v1/703b4af24578ada6f1e11725a468096e.png/Speed Bike#originWidth=550&originHeight=300",
    "description":"Black Bike"
  },
  {
    "_id":"bike3",
    "img":"wix:image://v1/2bb3219153c347daf475067d763be40d.png/Neon Bike#originWidth=550&originHeight=300",
    "description":"Green Bike"
  }
];



$w.onReady(function () {
  $w("#myRepeater").data = bikeData;
  
  $w("#myRepeater").onItemReady(($i,iData,i)=> {
    $i("#image1").src = iData.img;
    $i("#text1").text = iData.description;

    $i("#image1").onClick((event) => {
      $i("#text1").text = "Selected";
    });
  });  
});

I got what you showed,
but can you tell me I want to open the URL in my dataset to new tab

I am using this but not working, it works on second click.

$w ( ‘#sharewhatsapp’ ). link = “Link is here” ;
$w ( ‘#sharewhatsapp’ ). target = “_blank” ;

This is the problem can you help me with this.
I want that user can share the link directly when they click on the button, like any other platform like youtube, facebook etc.
Thank You.

And whatsapp button is not link to any other link in the dashboard.

Ok, my Indian-Friend, i GOT YOU !!!

Here, this is what you will need… (this is just an example) !!!

COPY and PASTE the following CODE into a new WIX-EDITOR-PROJECT-PAGE…

let bankData = [
  {
    "_id":"001",
    "bankName": "Axis-Bank",
    "img":"https://www.indiablooms.com/finance_pic/2020/a49258f1503d169d7875d00993c56ac3.jpg",
    "link": "https://www.axisbank.com/"
  },
  {
    "_id":"002",
    "bankName": "Freecharge",
    "img":"https://th.bing.com/th/id/R.4635a5d8a7064d2ecb5d56791a347393?rik=3L08%2f17vJ8exrQ&riu=http%3a%2f%2fstatic.digit.in%2fdefault%2fb1978c4dea1f3fb220f75740dbdb40c72cd65883.jpeg&ehk=RFnLh20%2fyDNzsnFFWTW39pPyTxkHWai4XkFYwfa6cU4%3d&risl=&pid=ImgRaw&r=0",
    "link": "https://www.freecharge.in/"
  },
  {
    "_id":"003",
    "bankName": "BankOfBaroda",
    "img":"https://th.bing.com/th/id/R.5824396822905d0071888906bf0c607d?rik=udeqnZcWAII3uw&riu=http%3a%2f%2fwww.india.com%2fwp-content%2fuploads%2f2016%2f08%2fbank-of-baroda.jpg&ehk=xIvkeWKiMMwvb931qe5OSDk5HGRd3a5vQdtv8pTXMII%3d&risl=&pid=ImgRaw&r=0",
    "link": "https://www.bankofbaroda.in/"
  }
];

$w.onReady(function () {
  $w("#repeater1").data = bankData;
  $w("#repeater1").onItemReady(($i,iData,i)=> {
    $i("#imgTitle").src = iData.img;
    $i("#text1").text = iData.bankName;

    $i('#btnGo').link=iData.link;

    $i("#imgTitle").onClick((event) => {
      $i("#text1").text = "Selected";
    });
  });  
});
  1. Add a normal REPEATER onto your page …—> (repeater1)

  2. Add 3-elements into your repeater…
    a) IMAGE -------------> (imgTitle)
    b) TITLE-TEXT -------> (text1)
    c) BUTTON ---------> (btnGo)

Publish your little TEST-SITE and check the RESULTS!
Does it work?

This was created within 5min, regarding all the tips i already gave you before, just optimized 1-2 code-parts.

Good luck and have FUN !!! :grin:

After testing this example and understanding it’s code —> you will surely understand your mistake. And you will also understand why you have had to do 2-clicks and why your BUTTON-URL was always the wrong one!

:stuck_out_tongue_winking_eye: AND DON’T FORGET TO LIKE IT IF YOU REALLY LIKED IT :stuck_out_tongue_winking_eye:

Thank You So Much Bro :hugs:

You are welcome!:wink: