Data Not Showing Wappler-format on the Web Browser

jcr · August 6, 2018, 9:30pm

The data formatting appears correctly in Wappler but the page on the browser does not show the formatting.

Any ideas as to why?

psweb · August 6, 2018, 9:53pm

Go to code view on your document, make sure the .js file is there

<script type="text/javascript" src="dmxAppConnect/dmxFormatter/dmxFormatter.js"></script>

Then make sure on your web server that the entire website has been published, so the entire directories for

dmxAppConnect
dmxConnect
dmxConnections
dmxConnectLib
are all uploaded to your server

If both the above are already correct, then make sure in the document code, in the head section that the order of the loading scripts are

jquery
dmxAppConnect.js next
bootstrap.min.css
font-awesome.min.css
dnxFormatter.js

jcr · August 7, 2018, 4:57am

I am using Xampp.
This is the files sequence (and I changed it to how you suggested):
bootstrap.min.css
font-awesome.min.css
jquery-3.3.1.slim.min.js
dmxAppConnect.js
dnxFormatter.js

Still no luck. I will continue trying to see what’s not working.

Thank you for your suggestions.

psweb · August 7, 2018, 5:13am

If you are using Xampp and not a live remote webserver, then are you using a local FTP server, if not and you are just saving the files locally, then your target should be set differently.
Click the gear icon at the bottom of the screen, just to the left of the Word √ Check
Create a new target
Set whatever target name you want, on the Remote Web Server URL set it for the Xampp webpage possibly localhost/ or 127.0.0.1 for the local loopback hosts address
Set Access Type to Local Folder
And choose your Local Folder

If that still does not work, I think Wappler altered this a little, so just completely remove the Remote Web Server URL, because it is not really remote, and i think it just gets the preview from the Local Folder path. Not 100% certain on that though.

Teodor · August 7, 2018, 7:06am

@psweb,
The order of the includes is not the issue. If it was, it wouldn’t be working in wappler as well.

@jcr,
Can you explain what is not working? Do you see the data not-formatted or do you see no data rendered at all?

jcr · August 7, 2018, 3:17pm

The data is showing on the browser, but the Wappler-added format is not.
But within Wappler, I can see the formatted changes without any problem.

Teodor · August 7, 2018, 3:21pm

Are you sure you uploaded the file to your server?

jcr · August 7, 2018, 4:35pm

I am working locally (localhost) under Xampp and everything is working fine, data appearing on browser, bootstrap working correctly, etc. All the folder/files are located within the “htdocs” path.

But the data rendered is not being formatted on the web browser, but is it being formatted within Wappler. I am using “transform” data formatting (“humanize”, “capitalize”, etc).

Take a look at the screenshots:

Teodor · August 7, 2018, 5:27pm

Most probably some url/path or target configuration is not properly set up. Please check these.

jcr · August 7, 2018, 6:26pm

Choosing “Table” I am able to “Transform” the data and the formatting appears on the web browser.
The issue then appears to be related to server functions.

By the way, when I see the page source and click on “dmxFormatter.js” I see “sourceMappingURL=…/maps/dmxFormatter.js.map” as part of the “dmxFormatter.js” but I do not see any “maps” subfolders on the project folder.

These are my settings:

Teodor · August 7, 2018, 6:29pm

I don't get what you mean. What table? What do you transform? What server functions are you referring to?

jcr · August 7, 2018, 6:38pm

See attached screenshot for “table”:

See another setting, I don’t know if it is related or not to the issue:

Teodor · August 7, 2018, 6:49pm

What is your second screenshot showing exactly?
On your first screenshot I see you selected the text transform options for the table, not the data formatter…
Can you please start from the beginning and try to explain what do you need to achieve, what are you trying on the page and what is wrong exactly??

jcr · August 7, 2018, 8:21pm

Well, for the table in medsmgmt.php, for my data displayed under my heading “Form”, I need to add a space after “;” to make the data more human-readable - and under data formatting I am able to add the additional space and the format is shown correctly within Wapple but not on the web browser “{{Form.replace(”;", "; “).humanize()}}”.

E.g., “Solution/drops;ophtalmic” -> “Solution/drops; ophtalmic”

For my other page, I need to add a period to my codes, and thanks to you guys I was able to use data formatting to add the period to my codes and the period appears correctly within Wapple but not on the web browser.

Example: F3175 - > F31.75

The first screenshot on my previous response was just to show that the formatting works perfectly with the text transform options for the table and that the web browser shows the changes correctly, then explaining that using the data formatter displays data formatting correctly in Wappler but not on the web browser.

The second screen on my previous response include 2 different folders under “server actions” and I wasn’t sure whether that had anything to do with the issue.

psweb · August 7, 2018, 8:48pm

Could you upload your file her for this page or send it to me in a private message if it has security issues. I will take a quick look and see if i can understand why it is doing that.

jcr · August 7, 2018, 9:07pm

I cannot upload the file:
“Sorry, the file you are trying to upload is not authorized (authorized extensions: jpg, jpeg, png, gif, exe, dmg, zip, deb, mp4, mov).”

Here is the text:
<!doctype html>

Untitled Document

Behavior Management System

Home Dx Mgmt Contact

Drug Name	Form	Dosage	Active Ingredient
{{Drugname.capitalize()}}	{{Form.replace(";", "; ").humanize()}}	{{Dosage.humanize()}}	{{Activeingred.capitalize()}}

‹‹
‹
{{title}}
›
››

psweb · August 7, 2018, 9:07pm

can you zip the file and upload then. If you try to format the doc to work in the forum you are going to go nuts, lol, trust me i do it quite a bit, and it only renders if you re inset every single line, starting with 4 spaces.

jcr · August 7, 2018, 9:10pm

Here is the zip filemedsmgmt.zip (1.8 KB)

psweb · August 7, 2018, 9:26pm

Please try this, so here is your code, well the important bits anyway

<dmx-query-manager id="query2"></dmx-query-manager>
<dmx-serverconnect id="serverconnect2" url="dmxConnect/api/psychmeds/meds_paged.php" dmx-param:searchmeds="text2.value" dmx-param:offset="query.offset02"></dmx-serverconnect>

<tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="serverconnect2.data.query2.data" id="tableRepeat2">
  <tr>
    <td dmx-text="Drugname" class="font-weight-bold">{{Drugname.capitalize()}}</td>
    <td dmx-text="Form">{{Form.replace(";", "; ").humanize()}}</td>
    <td dmx-text="Dosage">{{Dosage.humanize()}}</td>
    <td dmx-text="Activeingred">{{Activeingred.capitalize()}}</td>
  </tr>
</tbody>

The problem here is each <td> seems to have a text binding, and dmx-text="" overrides whatever you are manually inserting, so on your 4 <td> elements remove
dmx-text=“Drugname”
dmx-text=“Form”
dmx-text=“Dosage”
dmx-text=“Activeingred”

And test, because this happened due to using the Bootstrap4 Form Generator, which always chooses to use the dmx-text as a binding, so in all honestly what you should have really done is not manually add your own bindings as you did, but rather format the data held in the dmx-text element.

Hope that makes sense, maybe @Brad could try confirm my findings if he does not mind

jcr · August 7, 2018, 10:58pm

You are a genius!

Thank you.