Home / Questions / 148419
Accepted
nachfren
Asked: 2020-03-20 03:57:26 +0800 CST 2020-03-20 03:57:26 +0800 CST

Link on same page jsf/primefaces

  • 772

I have a table and I want when they click on a button it takes them to the end of the page.

Table:

<p:datatable>
  ...
    <p:column style="width:32px;text-align: center">
        <p:commandButton id="btn" update="form" oncomplete="ScrollPage('anchorSecondPanel')"  icon="ui-icon-search" title="View">
       </p:commandButton>
    </p:column>
</p:datatable>

Below I have the anchor:

<a id="anchorSecondPanel"/>

The javascript function:

function ScrollPage(location) {
    window.location.hash=location;
}

The problem is that when I click on the button the first time it works, but the second time it doesn't direct to that anchor anymore.

Does anyone know the reason?

javascript

1 Answers

  1. Best Answer

    The problem is that when you change the value of the hash, it works the first time but when you click on that button again, the hashis the same so the URL will be the same and the browser will do nothing (because there is no real change to apply ).

    One solution (I don't know if it's the best, but it will work) is to change the hashtwice: first to a value that doesn't exist, and then to the value you want to go to. That way, with the first change the browser will reset the hashand with the second (which occurs immediately after) the scroll itself will be done:

    function ScrollPage(location) {
  window.location.hash="#";
  window.location.hash=location;
}

    Without PrimeFaces, but here you can see a demo with the code working:

    function ScrollPage(location) {
  window.location.hash = "#";
  window.location.hash = location;
}

var botones = document.querySelectorAll("button");
for (var x = 0; x < botones.length; x++) {
  botones[x].addEventListener("click", function() {
    var target = this.dataset.target;
    ScrollPage(target);
  });
}
    div {
  margin-top: 1000px;
}

div:first-child {
  margin-top: 0;
}
    <div>
  <button data-target="#a">A</button>
  <button data-target="#b">B</button>
  <button data-target="#c">C</button>
</div>

<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>

    • 2