WebDev - Integrating Javascript Application [UPDATE 2]

Hi All

[UPDATE 2]

Thought that I would leave a short note here for future use of anyone interested before I move on.
Yes, you can do whatever javascript integration that you want with WebDev - but there is little in WebDev per se to assist you.
As noted by others, you will be forced to learn a fair bit of javascript, jquery, html etc and use a number of tools such as notepad++ with some JS plugins as well as chrome developer tools, and if you need to use getElementById - I can only find the id in the webdev page source view (there might be an easy way to do this but some thongs are a trade-off between 'get it done' and 'do it the right way')

Anyway - apart from all that - there is no problem. Of course, no-one in their right mind would do all this unless they had to.


------------------------------------------------------------------------------------
Well - I've got this sort-of working. Enough to know that I can get
it all working (eventually).

Wish there was some examples other than trivial java script - as it
seems this is another interface layer that is now very important. I fact,
interfacing with 3rd party is the most important development issue thse days.
------------------------------------------------------------------------------------

This one looks a bit "tricky" for me - but I still feel it should be do-able.

I have to integrate with an external system (payments).

They provide a number of API's - but the one that I am interested in is Javscript/Json.

This works perfectly in a Netbeans HTML5/Javascript application - but I really need it integrated with a WebDev project to get the data input/output.

By itself - the javascript application/program looks fairly simple - but - I am having difficulty running this in WebDev.

I have tried a number of approaches - (e.g. import the webpage and adding all the functions that were not imported, hand code everything etc.) - but I am no success.

I can't provide the source as it is commercial-in-confidence - but the client code looks quite simple in Netbeans (about 800 lines of code - most functions and callbacks and the html UI) - all the work done by their server. So really - all I have to do is call a bunch of "nested" functions.

I have been through most of the available documentation (and videos - thanks, Fabrice) but still having great difficulty in constructing this in WebDev. My main problem I guess is that there is no way of seeing what's going on with javascript ...

An obfuscated sample of the script is like this:-

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script type="text/javascript" src="[XXXXsimulator.test.XXXX.com];
<script type="text/javascript">
// Only required because we are loading both iclient versions into the global namespace
var XXXX_SIMULATOR = XXXX;
</script>

var configurationUrl = configurationURLs[0];
var apiKey = "Test API Key";
var posProductInfo = {posProductVendor: "XXXXs", posProductName: "XXXXXXXXX", posProductVersion: "1.0.0"};
var simulator = true;

function showTransactionsPage() {
hilightNavigationBar("transactions");
showTransactionsNavigation();
showPurchaseWithXXXXI();
}

... then all the other functions and the html.

All the functions are local procedure JS - and all the Page > Advanced - html and external resources are set.

.. but it just does not fire - something is missing (including javascript skills) - but has anyone done anything similar with webdev/javascript ?

Hopefully - WebDev can handle this and I don't need to use Netbeans.

Thanks for any help ..

Regards,
Derek



Edited 2 time(s). Last edit at 11/14/2018 02:31AM by DerekM.

Hi Derek,

I am not using the new webcomponent feature yet, still my own old school way.
This works for me.
The basics are:
- add all the javascript to the page footer
- use an rta control for the html or pass the Webdev controls aliases to the javascript

A way to add the javascript to the page (not using the advanced tab) is:

MyPage.HTMLEndPage+=RC+[
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="//code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script> 
<script type="text/javascript" src="[XXXXsimulator.test.XXXX.com]; 
<script type="text/javascript"> 
// Only required because we are loading both iclient versions into the global namespace 
var XXXX_SIMULATOR = XXXX; 
</script> 

var configurationUrl = configurationURLs[0]; 
var apiKey = "Test API Key"; 
var posProductInfo = {posProductVendor: "XXXXs", posProductName: "XXXXXXXXX", posProductVersion: "1.0.0"}; 
var simulator = true; 

function showTransactionsPage() { 
hilightNavigationBar("transactions"); 
showTransactionsNavigation(); 
showPurchaseWithXXXXI(); 
} 
]

This code is placed in the global declarations section of the page.
Note the "+=" because we are ADDING the code to the header instead of replacing the header.
Advantage of this method is that you can use stringbuild to add parameters to the javascript like:

MyPage.HTMLEndPage+=StringBuild( [
<script>
function MyFunction(){
      alert("My control alias = %1");
}
</script>
],control1.Alias)

This is a nonsense example, but I hope you get what I mean.
Limitation: you cannot use the ] character in the code because it will obviously disrupt the string assignment, but as a workaround you can stringbuild it into the code.

To check for errors you can install the Chrome developer tools extension.
This is very helpful in showing javascript errors, files not found etc.
You can even watch javascript variables and much more.
Also you can easily check the appearance of your site on different devices.
Once installed, you activate it with F12 key.

Kind regards,
Piet