SPA with URL variables

Wappler General Need Help
1

Hello @Teodor ,

I have created simple SPA and the new dynamic url works very nicely . but how can I display the url data in view. Can you help me with that?

I am trying with query manager but result everytime fail for me :slight_smile:

My url : http://localhost/serach/320/ (./search/:query/)

2

Hello,
What’s your view ID?

3

search

4

Then you should be able to access the data like:

search.params.query

5

Thank you Teodor ...
I will create new topic because browser component doesnt work correctly ...

6

Hello @Teodor , @George

my first view working perfectly there isnt any problem . But when I created new view inside other view . I cant catch url parameters…
What is wrong .?

I want to catch passed parameters from URL but always fail.

7

What do you mean exactly? What view in another view, and what catch?

8

I have created “search” view. (called search) then I created new view inside search view ( transferclient view)

and I have created link inside search view

<a class="btn btn-sm btn-info" dmx-bind:href="./transferclient/{{clientid.value}}/"><i class="fa fa-arrow-right"></i> Transfer Client</a>

I can pass clientid value but I cant catch my passed value inside transferclient view . Because I cant add {{transferclient.params.clientid}} in transferclient view …
if I have add it in view manually . it doesnt work .

9

Can you provide some screenshot of what exactly have you created please?

10

search view

search_view
search_view.jpg544Ă—1126 79.4 KB

transferclient view

transferclient
transferclient.jpg1903Ă—1017 265 KB

11

I can’t seem to get your logic.
You create a client-side route and then nest another route inside it, is that right?

Maybe @patrick can advice here…

12

yeap

13

hello @patrick what do you think about this issue ?

14

From what I see is that you have /search/:query/ as route path for the search view. And inside this route view you have /transferclient/:clientid/ as a route. This will not work.

The route path are all from the page root, when you want to nest routes you have to include the parent route in the path. So the transferclient route would have a path /search/:query/transferclient/:clientid/. Also important is that you uncheck the Exact toggle for routes that have sub routes.

<div is="dmx-route" id="newsRoute" path="/news/">
  NEWS

  <div is="dmx-route" id="newsIndexRoute" path="/news/" exact="true">
    INDEX
  </div>

  <div is="dmx-route" id="newsDetailRoute" path="/news/:id(\d+)/">
    DETAIL FOR {{params.id}}
  </div>
</div>

With the above sample with the url /news/ it will show:

NEWS
INDEX

With the url /news/123/ it will show:

NEWS
DETAIL FOR 123

So the newsRoute will match all routes that start with /news/. The newsIndexRoute will match when the route is exact /news/ and the newsDetailRoute will match /news/123/ where the id must be a number.

Let’s say you have

<div is="dmx-route" id="newsRoute" path="/news/">
  <div is="dmx-route" id="newsDetailRoute" path="/detail/:id(\d+)/">
    DETAIL FOR {{params.id}}
  </div>
</div>

This will not work, the outer route matches url starting with /news/. The inner route matches the url /detail/123/. The problem is that the outer route doesn’t match and will not render, causing the nested route also to be invisible.

3 Likes
15

Hi, @patrick, thanks for this post. I’m trying to comprehend routing for SPI.
I see you use kind of “nested” syntax for routes. Can you please explain the reason for that?

It seems like Wappler GUI doesn’t create nested ones, it puts one after another.
Would this syntax work?

 <div is="dmx-route" id="newsIndexRoute" path="/news/" exact="true">
  INDEX
</div>

<div is="dmx-route" id="newsDetailRoute" path="/news/:id(\d+)/">
  DETAIL FOR {{params.id}}
</div>