Dynamic data rendering in design view (from remote target) but not in browser

Wappler General Need Help
,
1

Hi all. I’m exploring Wappler and like what I see. On Day 3 of trial and have successfully connected my test app to a remote server and queried test data. The data is rendering as expected in the Wappler design view, but it does not render in the browser. Screenshots below. Any ideas? Happy to supply more information, but I suspect this will turn out to be a more general newbie configuration mistake once I figure it out.

Here’s the design view:

Screen Shot 2020-04-23 at 9.53.46 AM
Screen Shot 2020-04-23 at 9.53.46 AM1346×868 50.6 KB

But here’s the browser view:
Screen Shot 2020-04-23 at 9.54.54 AM

Suspiciously the text styles are also not carrying over to the browser, which again makes me feel like this is a broader app setup issue. Can someone please point me in the right direction?

2

Have you uploaded all the dmx… folders to the server?

3

The following four folders appear to be on the remote server, yes, though I don’t recall uploading them specifically:

Screen Shot 2020-04-23 at 10.24.07 AM

4

Wappler should upload everything automatically but if it’s the first time then there’s a chance something got missed. I would try uploading the folders again to make sure all the contents have uploaded. It should only take a few seconds.

5

Again, not entirely sure what I’m doing, but I switched to Local, clicked on each DMX folder individually, and clicked Upload for each. Is that what you meant? Then I resaved and republished to Target (does that even matter?) Unfortunately, it did not fix the problem.

6

If you inspect the page do you get any errors in the console?
Also check the Network tab to see if all is loading properly.

Thank you

7

Thank you both (@sitestreet and @t11) for your quick replies. Everything in Chrome console looks clean for this page.

Not to muddy the waters, but I subsequently checked my index page (which is not the page in question) and did see the following:

DevTools failed to parse SourceMap: https://MYTARGETDOMAIN.com/dmxAppConnect/maps/dmxBootbox.js.map

But not sure if that matters, especially since it’s on another page …

8

Can you please share the code of this subpage? (can also send me a message if you dont want everyone to see)

9

See below. I had been messing around with the appid and head-page just to see if it did anything (it didn’t). Also I tried two different Server Connect elements (one used by the paragraph view, the other used by the table view), so that’s why that extra stuff is in there. Thanks again for taking a look. -Ed

<!-- Wappler include jquery_slim_33="cdn" fontawesome_4="cdn" bootstrap4="cdn" is="dmx-app" id="poems2" appconnect="local" head-page="index.html" -->

<div class="row">

	<div class="col-12 mt-5 mb-5">
		<h1>Paragraph View</h1>
		<div id="repeat1" is="dmx-repeat" dmx-bind:repeat="serverconnect2.data.q_poems">
			<p dmx-bind:title="title+'&nbsp;by&nbsp;'+authlete">{{title+'&nbsp;by&nbsp;'+authlete}}</p>
		</div>
	</div>
	<div class="col-12">
		<h1>Table View</h1>
		<table class="table">
			<thead>
				<tr>
					<th scope="col">#</th>
					<th scope="col">Title</th>
					<th scope="col">Author</th>
					<th scope="col">Submitted Date</th>
				</tr>
			</thead>
			<tbody is="dmx-repeat" id="repeat2" dmx-bind:repeat="serverconnect1.data.q_poems">
				<tr>
					<th scope="row">{{$index+1}}</th>
					<td>{{title}}</td>
					<td>{{authlete}}</td>
					<td>{{date_submitted}}</td>
				</tr>
			</tbody>
		</table>
	</div>

</div>
10

Can you please send the entire file?

11

Refresh browser cache?

Select and save the database connection (in a server connect workflow) while your new target is selected?

12

No luck there @tesla. Thanks for the ideas, though.

@t11, you have zeroed in on the problem. What I posted IS the entire html file! Which clearly ain’t gonna work, and now I’m embarrassed I didn’t spot it myself. I just created a new HTML file, copy/pasted the above code into the body, then Wappler added a bunch of stuff magically before my very eyes, and now that new page renders the content in the browser. Thank you!

Sadly I’m no closer to understanding how Wappler works in this regard. Maybe what I need is for someone to now explain (and hopefully a tutorial already exists but if so I haven’t spotted it) on how an “HTML page”, a “Content page”, and an “Include File” all fit together.

13

Hello @edmubnd
You just need a normal, regular HTML page - with all the normal HTML tags on it.
Content pages are used with single page apps:

Server side includes are used for including specific component/element on multiple pages:

14

Thanks for the links @Teodor. Not sure how I ended up where I did, as I definitely started with a regular HTML page, but did fiddle with using a content page at one point while troubleshooting. That’s okay — still learning — off to read some more …

1 Like