Framework7 Mobile Webpage Dynamic Data Issue

I’m just starting to play around with using Framework7 for a mobile version of my website (not an app).

I’m getting data from server connects, but am having trouble filtering data from a select. So this doesn’t work

<dmx-serverconnect id="sc_tripbits" url="dmxConnect/api/tm_tripbits.php" dmx-param:trip_id="f7page.select_trip.value"></dmx-serverconnect>

But this does…

 <dmx-serverconnect id="sc_tripbits" url="dmxConnect/api/tm_tripbits.php" dmx-param:trip_id="51"></dmx-serverconnect>

Here’s the select
<select id="select_trip" class="form-control" dmx-bind:options="sc_trips.data.query" optiontext="trip_name" optionvalue="trip_id" name="select_trip"></select>

And a sample of the data returned from the sc_trips server connect…
{
“trip_id”: “51”,
“trip_name”: “Ashley’s Graduation Trip”,
“trip_subtitle”: “Czech Republic, Vienna, Budapest & London”,
“month_id”: “5”,
“trip_year”: “2010”,
“trip_status_id”: “3”,
“user_id”: “1”,
“create_date”: null,
“last_updated”: “2020-02-18 09:49:14”,
“default_page”: null,
“currency”: “EUR”
},

Thanks for any help you can provide!
Heather

I think the easiest solution is to go into the dev console and execute dmx.app.data. This will allow you to decipher the correct path to the select element.

I’m not quite sure how to do that. Could you explain further?

Sure. Here’s a link on how to use developer console in a browser:

Once that is open you go to the Console panel.

Type in:

dmx.app.data

and hit return twice.

You will get a listing of all your wappler components. Here’s an example from a page I happen to have open:

Screen Shot 2020-11-22 at 11.40.45 AM

Your task is to find your select element by drilling down into the appropriate components.

Continuing my example, let’ say I needed the path to my inp_email input. I can drill down from content (a view) to register1 (a form) and then inp_email (the input)

Screen Shot 2020-11-22 at 11.42.19 AM

The path to the value of the input would be:

content.register1.inp_email.value

Thanks for the super clear instructions! I use the developer console all the time, but didn’t know about running dmx.app.data there. Very handy!! :smiley:

Here’s what I got back…

I’ve tried f7page.select_trip.value, f7view.f7page.select_trip.value and app.f7view.f7page.select_trip.value and unfortunately none work.

Any other thoughts? FWIW, Wappler inserts f7page.select_trip.value in the Data Bindings.

Thanks, H.

Right-Click on the item you want to find the path for :slight_smile:

image

That came back as app.f7view.f7page.select_trip.value. I pasted that in to get

    <dmx-serverconnect id="sc_tripbits" url="dmxConnect/api/tm_tripbits.php" dmx-param:trip_id="app.f7view.f7page.select_trip.value"></dmx-serverconnect>
<div id="app" is="dmx-f7-app">

But that doesn’t work.

I got it working. Created a new page and started again. There must have been something funky happening. Thanks for your help guys.

1 Like