How to link a Javascript to a web page designed in Caspio?

The forum link seems to provide specific instructions on how to add  the JS file to your DataPages.

Which part of it are you having trouble with?

Hi,

That forum seems to be specific to signatures, while I have a different JS file.

Today I got from them more instructions, as follows.

Assuming you are using XAMPP dev environment on your local device, here are some steps you can do to replicate the production site.
1.      Copy the source code directory from the production server, and paste it on the htdocs directory (assuming you are using XAMPP, if not, paste on the localhost directory of your dev environment).
2.      You can then edit the files in your dev environment, below are the files containing the datapages

i.      snvn-report.php
ii.      add-snvn.php

c.      JavaScript files:
i.      snvn.js
ii.      ppn.js
3.      From the files, you now change the APP keys to point it on the duplicate datapages.

Now lets start with this...
I'm not really familiar with web programming, just started to learn Caspio, my experience is mainly in MS Access and SQL.

Therefore would need step by step instructions (on how to follow instructions...-:).

1- Not sure what XAMPP dev environment means.
2- " localhost directory of your dev environment", where exactly is that, can be anywhere on my local pc?

I am missing the mentioned php files, have requested from them but didn't got yet.

Thanks,
Ben

Hi,
A &B done.

c. Copy the code below...

I named my parameter VisitNoteTest, what do I enter instead of the following?

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="[@app:SignaturePad/]"></script>
<div id="cb_sign_wrapper">

Select allOpen in new window

then paste inside the <header> section of your DataPage

I have already the following code in the footer section.

<style>
 .draft-container {
  display: block;
     width: 100px;
     top: 50%;
     text-align: left;
     z-index: 3141591;
     overflow: hidden;
     position: fixed;
     right: 0;
     writing-mode: tb-rl;
 }

 .req {
  color: #FF0000;
     font-size: 12px;
     font-family: Arial, sans-serif;
     margin-left: 2px;
     font-style: normal;
 }
</style>
<h3><strong><span style="color:#0000cc;"><u>Skilled Nursing Visit Note</u></span></strong></h3>
&nbsp;

<div id="cb_sign_wrapper">

Select allOpen in new window

How do I add the suggested code w/o breaking anything?

unless I am missing something?

No, apparently I am the one missing something-:)

Thanks,
Ben

<script src="[@app:VisiNoteTest/]"></script>

Select allOpen in new window

How do I add the suggested code w/o breaking anything?

Put it after the <style> tag between 21 and 22

Hi Julian,

Put it after the <style> tag between 21 and 22

I did that (see attached) but still not working.

Now following is the latest what I have got from Caspio IT.

1-      Create your own “Stage” environment in your localhost.

2-      Copy the PHP, and JS files in the newly created stage environment.
3-      Deploy the duplicated DPs in the stage environment by changing the AppKeys (use the Appkeys of duplicated DPs)

My question is regarding #1, how do I accomplish that?

Thanks,
Ben

A stage environment is just a test site that you can use to stage your changes before pushing to production.

It is just a URL to some server space you control.

Hi Julian,

Sorry for the delay in response.
This does not seem to be so simple.
I'm planning to have a meeting with Caspio IT on it next week.
Will keep you posted.

Thanks,
Ben

Hi Julian,

Okay I had a meeting last week with Caspio and they helped me with the setup including install XAMPP, and this seems to be working well in my PC.

Now the problem is that only at my pc this works, when trying it from another pc at same network location, I get the attached error.
How can I resolve it?

Thanks,
Ben
Capture.PNG

this is a hostname resolution issue.
what that mean is your PC have the name "bf7"
but the pc you're using to access the page cannot resolve "bf7" to a local ip address, the local ip address of your pc
you can type : ipconfig on your pc in a command line (dos command) which will give you the local ip address of your pc (most of time something like 192.168.1.XX)  depending your network

once you get the local ip address of your pc, replace "bf7" by this ip address on the second machine : http://ABC.DEF.I.JK/login.php
ABC.DEF.I.JK can vary and is you local ip address

care this adress may change after a reboot or for other reason (DHCP stuff)

Hi Leakim,
   
When I ping it ping BF7 I get response.
Also tried with IP, same issue.

Thanks,
Ben

From what I just got from Caspio IT, this seems to be the issue.

I think this has something to do with the current directory structure on the local host. Can you try moving the files to the htdocs folder(the same as how your production is structure)?

Thanks,
Ben

When I ping it ping BF7 I get response.

from which machine? I"m assuming the other machine

could you try this on your pc and and the other machine:
http://bf7/phpmyadmin

Hi,

could you try this on your pc and and the other machine:
http://bf7/phpmyadmin

In my pc it works, while at the other pc I get the below.

Access forbidden!
New XAMPP security concept:

Access to the requested object is only available from the local network.

This setting can be configured in the file "httpd-xampp.conf".

If you think this is a server error, please contact the webmaster.

Error 403
bf7
Apache/2.4.39 (Win64) OpenSSL/1.1.1c PHP/7.3.7

However the following works there (which is the most important to me right now).

http://bf7/staff/snvn-report.php

Does it mean I have to change something?

Thanks,
Ben

it was to be sure, the other pc see your : so yes, it's able to see your
so I believe the right path is : http://bf7/staff/login.php and not http://bf7/login.php

so I believe the right path is : http://bf7/staff/login.php and not http://bf7/login.php

It doesn't matter as the code checks for category of user, if its "Staff" it redirects there.

Thanks,
Ben

Hi Experts,

My Localhost suddenly stopped to work.

It was setup with XAMPP as  suggested above.

However now after my PC was restarted I don't see that program anymore.

See attached.

How can I get this running?

Thanks,
Ben
Untitled.png

Hi Experts,

One more question before closing it...

I see the previous developers had some code done at the datapage itself on header/footer sections, and then some on the JavaScript.

What is the rule, when do I place code in the script and when on the datapage?

And in the datapage itself, which goes on the header section and which goes on the footer section?

Thanks,
Ben