Onclick only working once on the site

Ask the community
,
1

I am trying to create a simple menu using a few buttons and a multi state box. Everything works great on the first page I load, but then stops working. What I want is when the button is clicked on it drops down the multi state box that goes with that button. Then if you move the mouse over the other buttons it changes the state of the box to match the appropriate button. I have this working on the first page pulled up, but if I click on a link in the multi state box it takes me to the linked page and then the onclick doesn’t work after that. It is all loaded on the master page.js. Why would this work on the first page, but not on every page after that? Doesn’t it completely reload each time?

Here is the site:

Here is the code that I have currently:
$w.onReady ( function () {
$w(“#SolutionsButton”).onMouseIn(() => {
$w(‘#Submenu1’).changeState(“Solutions”)
});
$w.onReady ( function () {
$w(“#Whoisagilebutton”).onMouseIn(() => {
$w(‘#Submenu1’).changeState(“AboutUs”)
});
$w.onReady ( function () {
$w(“#SupportButton”).onMouseIn(() => {
$w(‘#Submenu1’).changeState(“Support”)
});
$w.onReady ( function () {
$w(“#SolutionsButton”).onClick(() => {
$w(‘#Submenu1’).changeState(“Solutions”)
$w(‘#Submenu1’).show()
} );
$w.onReady ( function () {
$w(“#Whoisagilebutton”).onClick(() => {
$w(‘#Submenu1’).changeState(“AboutUs”)
$w(‘#Submenu1’).show();
});
$w.onReady ( function () {
$w(“#SupportButton”).onClick(() => {
$w(‘#Submenu1’).changeState(“Support”)
$w(‘#Submenu1’).show();
} );
$w(“#CloudVoiceButton”).onClick(() => {
$w(‘#Submenu1’).changeState(“CloudVoiceMenu”);
});
$w(“#OnSiteVoiceButton”).onClick(() => {
$w(‘#Submenu1’).changeState(“OnSiteMenu”);
} );
$w.onReady ( function () {
$w(‘#button85’).onClick(() => {
$w(‘#Submenu1’).changeState(“Support”)
});
});
});
});
});
});
});});

2

First thing is getting rid of all the $w.onReady() methods you have. You should only have one. It is a method that runs on page load and that is it.

Once you’ve done that, let us know if anything changed. :wink:

3

I removed all of the other $w.onReady(). There is only one at the beginning. This is what I have in there now and it is still the same thing. It works great on the first page that loads, but then it doesn’t work again after that unless I reload the page.

$w . onReady ( function () {
$w ( “#SolutionsButton” ). onClick (() => {
$w ( ‘#Submenu1’ ). changeState ( “Solutions” )
$w ( ‘#Submenu1’ ). show ()
});
$w ( “#Whoisagilebutton” ). onClick (() => {
$w ( ‘#Submenu1’ ). changeState ( “AboutUs” )
$w ( ‘#Submenu1’ ). show ();
});
$w ( “#SupportButton” ). onClick (() => {
$w ( ‘#Submenu1’ ). changeState ( “Support” )
$w ( ‘#Submenu1’ ). show ();
});
$w ( “#CloudVoiceButton” ). onClick (() => {
$w ( ‘#Submenu1’ ). changeState ( “CloudVoiceMenu” );
});
$w ( “#OnSiteVoiceButton” ). onClick (() => {
$w ( ‘#Submenu1’ ). changeState ( “OnSiteMenu” );
});
$w ( ‘#button85’ ). onClick (() => {
$w ( ‘#Submenu1’ ). changeState ( “Support” )
});
});

Any ideas? I don’t see any errors or anything. Thanks for any help or advice.

4

Try this code and watch the console. Please.

$w.onReady(function () {
  $w('#SolutionsButton').onClick(() => {
    console.log('Solutions')
    $w('#Submenu1').changeState('Solutions')
    $w('#Submenu1').show()
  })
  $w('#Whoisagilebutton').onClick(() => {
    console.log('AboutUs')
    $w('#Submenu1').changeState('AboutUs')
    $w('#Submenu1').show()
  })
  $w('#SupportButton').onClick(() => {
    console.log('Support')
    $w('#Submenu1').changeState('Support')
    $w('#Submenu1').show()
  })
  $w('#CloudVoiceButton').onClick(() => {
    console.log('CloudVoiceMenu')
    $w('#Submenu1').changeState('CloudVoiceMenu')
  })
  $w('#OnSiteVoiceButton').onClick(() => {
    console.log('OnSiteMenu')
    $w('#Submenu1').changeState('OnSiteMenu')
  })
  $w('#button85').onClick(() => {
    console.log('Support')
    $w('#Submenu1').changeState('Support')
  })
})
5

Here is what I got. There is a Warning

“root”: {

“insertId”:“…3s78nHJZS1ONPRmrIIw.l1”
“timestamp”:“2021-10-19T19:07:29.817Z”
“severity”:“WARNING”

“labels”: { “siteUrl”:“https://jhullman.wixsite.com/website”
“namespace”:“Velo”
“tenantId”:“cb9ee415-b435-4fc3-a253-32fe2921ccef”
“viewMode”:“Site”
“revision”:“238”
}

“operation”: { “id”:“…4ivz_GMdd1qdYs_7Y4sdBq”
“producer”:“/help-desk-it-support”
“first”:false
“last”:false
}

“sourceLocation”: {}

“jsonPayload”: { “message”:“function SolutionsButton_mouseOut is registered as a static event handler but is not exported from the page code. Please remove the static event handler or export the function.”
}
“receiveTimestamp”:“1969-12-31T23:59:59.999Z”
}

6

I went in and removed the export function which was still on the Solutions Button. I published again and tried to see if it would work. Now I am not seeing the warning anymore but it still is not working. After I click on the first page I can no longer click the buttons at the top to have them show the multi state box. Here is what I got in the console log after the export function change.

First Click on the Solutions Button:
“root”: {

“insertId”:“…51JWZ8aSO8Duieqg.Be3VO”
“timestamp”:“2021-10-19T19:11:09.782Z”
“severity”:“INFO”

“labels”: { “siteUrl”:“https://jhullman.wixsite.com/website”
“namespace”:“Velo”
“tenantId”:“cb9ee415-b435-4fc3-a253-32fe2921ccef”
“viewMode”:“Site”
“revision”:“239”
}

“operation”: { “id”:“…6FThs3fj_CkuTohprIejuA”
“producer”:“/network-management-security”
“first”:false
“last”:false
}

“sourceLocation”: {}

“jsonPayload”: { “message”:“Solutions”
}
“receiveTimestamp”:“2021-10-19T19:11:13.001Z”
}

This is what I got after it changed pages from clicking an option in the multi state box. It would not show the multi state box on the second page and here is the log from those clicks:
“root”: {

“insertId”:“…51JWZ8aSO8Duieqg.Be3VO”
“timestamp”:“2021-10-19T19:11:09.782Z”
“severity”:“INFO”

“labels”: { “siteUrl”:“https://jhullman.wixsite.com/website”
“namespace”:“Velo”
“tenantId”:“cb9ee415-b435-4fc3-a253-32fe2921ccef”
“viewMode”:“Site”
“revision”:“239”
}

“operation”: { “id”:“…6FThs3fj_CkuTohprIejuA”
“producer”:“/network-management-security”
“first”:false
“last”:false
}

“sourceLocation”: {}

“jsonPayload”: { “message”:“Solutions”
}
“receiveTimestamp”:“2021-10-19T19:11:13.001Z”
}

7

I also get this in the log when I reload the page. It is referencing a .js file that I don’t see on my site e6zct.js. I don’t have that listed anywhere so I am not sure that that is referencing.

“root”: {

“insertId”:“…3wxlC1os8Eq8sEKrdAPNdi”
“timestamp”:“2021-10-19T19:58:00.885Z”
“severity”:“INFO”

“labels”: { “siteUrl”:“https://jhullman.wixsite.com/website”
“namespace”:“Velo”
“tenantId”:“cb9ee415-b435-4fc3-a253-32fe2921ccef”
“viewMode”:“Site”
“revision”:“241”
}

“operation”: { “id”:“…4DFLPq108BbeVx.aY5eRsv”
“producer”:“/help-desk-it-support”
“first”:false
“last”:false
}

“sourceLocation”: {}

“jsonPayload”: { “message”:“Loading the code for the Home page. To debug this code, open e6zct.js in Developer Tools.”
}
“receiveTimestamp”:“2021-10-19T19:58:04Z”
}

8

Sorry, are you getting this errors on the Published Page or in the Preview Page? Try it on the preview page first, please.

9

I have tried that and it works I think. On the Preview the multi state box never closes. So I click on a button which shows the box. Then I click a link in the box and when it changes pages the multI state box stays in n the page open. When I go to the live site it works properly.

Any other ideas? Not sure what else do to. Should I copy it to each page and take it out of the master.js? Why is it referring to another .js file that I don’t even see on my site?

Thanks for your input.

10

I just recreated the multi state box and used the code above and everything is working just fine. Can you show us what is supposed to do and it is not doing?

Multistate

11

I checked out your test site and that works. The difference is that I am hiding and showing the Multi State box with the onClick function. So when you click on one of the 3 buttons at the top it should show (drop down) the multi state box. It does not do that after the first click without completely reloading the page.