Dropdown repeat smooth scroll to ID?

Wappler General Need Help
1

Am quite brain dead after a long night and am going around in circles trying to do the following:

Have a drop-down with a repeat in the navbar displaying various options and would like to use Smooth Scroll to navigate to the selected option. For the life of me I can’t figure this out…

How do I include the id in the Smooth Scroll as that is also contained within a repeat further down the page…? Using ‘#id’ obviously fails, so how do I include the id from the repeat as the link for the drop-down options?

Does that make sense?

:slight_smile:

Thanks in advance for any input!

2

Further, example:

Works (but don’t want to open a new page, would like to Smooth Scroll to the selected Package:

 dmx-bind:href="packagereference"

Fails:

 dmx-bind:href="#packagereference"
3

Finally figured it out for anyone else here is the solution!

dmx-bind:href="#{{packagereference}}

:smiley:

2 Likes
4

other way:
dmx-bind:href="'#'+packagereference"

2 Likes
5

Hey guys,

Do you have an idea of what would be the right expression to smooth scroll to a repeater row where ‘repeater.data.id == query.id’? In other words, I want to scroll down to the repeater data where the id is equal to the page query parameter.

I can’t get this working, so any input is very much appreciated :slight_smile:

6

To achieve the above I am using dmx-on:load="scroll_to_ticket.goto('#'+(list_tickets[0].id == query.ticket_id))" as a dynamic event for the App. However this doesn’t work unfortunately.
Any suggestions?

7

Hi Emiel,
Would this be similar approach like a table of contents within a book, whereby you have a listing and you want that list to correspond to the chapters within the book, so to speak?

8

Hi Dave,

Thanks for the response!

It’s a bit different actually:

I got a card element (with Repeat function set as a dynamic attribute) on my page, with repeated data (tickets in this case) that all have an id:
image

What I want to do is to scroll down to the (repeated) card with the same id and the query.ticket_id paramater on page load.

So it would be similar to scrolling to the (repeated) card with the same id as a selected value (from a dropdown for example), except that id should be similar to the query parameter instead of the dropdown value.

So I got a Smooth Scroll element added:
image

Which is triggered on page load by this action:

image
image353×507 8.52 KB

with this function:
image

Thanks for any help in advance.

9

Looks like you need to bind the id of the cards to their repeat value:

 dmx-bind:id="{{INSERTREPEATVALUEIDetc}}">
10

Thanks @Dave, that part works now! :+1:

That is, it works with a button with a dynamic click event to smooth scroll to the ticket.
Unfortunately it doesn’t work on page load/ready. Maybe @Teodor can clarify why?
This is the includes header and the first 3 lines of the page code:

<!-- Wappler include head-page="layouts/main" is="dmx-app" id="support" appconnect="local" fontawesome_5="cdn" jquery_slim_35="local" dmx-on:ready="scroll_to_ticket.goto('#ticket-'+query.ticket_id)" components="{dmxSmoothScroll:{}}" -->
<meta name="ac:route" content="/support/:ticket_id?">
<dmx-query-manager id="query_manager"></dmx-query-manager>
<dmx-smooth-scroll id="scroll_to_ticket"></dmx-smooth-scroll>
1 Like
11

Happy to have helped and happy to hear you have it working. On the other subject maybe you could use a flow to trigger after a one second delay then scroll to the link within the flow?

12

Thanks again for thinking along @Dave.
I tried this using a flow already with a delay of 3000ms actually, but that didn’t work either.
Also tried setting the ticket_id in a session storage parameter instead of a query param, but without success either.
Also tried different sequences of the elements in the code’s first 3 lines, but that also didn’t change anything.
Any other ideas? I am out of options…

13

@Teodor could you be of help here possibly?

14

Will rack my brain and try to think this through after copious amounts of coffee. Teodor is sure to pop-up with a simple elegant solution that will make total sense, usually so obvious that I stamp on my own toe...

:slight_smile:

15

Thanks Dave, appreciate it!

Yeah he probably will, hope so.. :slight_smile:

1 Like
16

Still got this problem that the smooth scroll isn't triggered on app load/ready event. Is this a bug @Teodor?

EDIT: Also tried the same with Browser element's "Vertically Scroll to" functionality, which is also not triggered on app ready/load. So it seems the trigger event is the problem here.

17

Hi @Emiel did you ever come right with this… i had the same post…

As i have a “referrer” page sending the parameter #gotoid124566
As I also want it to work on page load… or when the page is ready.
I have a button as an alternative on the page. At the top… “Continue” with the dmx-on:click… event and that works like a charm… but it would be awesome… if this can be done onload… or ready…
I have also tried the delay thing…but not working… :frowning:

18

anyway i have sorted this with php for now… @Emiel

from the referrer page… URL pos…
<?php $posidphp = isset($_GET['pos']) ? $_GET['pos'] : ''; ?>

Then on the page i have a button. Without dmx-bind. With a id id=“triggerbuttongoto”
<a class="btn" href="#gotoid<?php echo $posidphp; ?>" id="triggerbuttongoto" title="Continue to load"> Continue to load </a>

Then at the bottom of the page i run the script. Forcing a on-click event.

$(document).ready(function() {
	setTimeout(function(){
    document.getElementById("triggerbuttongoto").click();
	},3000);
});

that worked for me… :slight_smile:

1 Like
19

Hi @Mozzi,

Sorry for the late reply. Glad you found a way and even better that @Teodor posted an even better solution in the other thread. That’s the method I’m going to implement as well now, because I also was working with a non-optimal workaround instead up till now. Thanks for tagging me in that post!

20

So many things in Wappler… so yes sometimes … well i guess most of the time you miss the obvious i guess… if you had to know every function around every corner in Wappler it will take a year…and by then there is cool other features… so cant keep up… just a big thank you for @Teodor always helping out with solutions… but at least i have learned something… and it helps everyday… I have already implemented it and working like charm… good luck in getting it all done the “right way”

1 Like