PDA

View Full Version : AJAX - Where are you?


ABC123

Phil Rolf
03-23-2008, 09:14 AM
This may be the dumbest thing I have asked on this board because it is probably staring me in the face and I don't see it, but.....I use the Web side of alpha alot and they have demonstrated the excellent capabilities of AJAX (videos) and it looks great.

However, where do I find out how to insert AJAX? I am still working with the Beta version and have gone thru the dialog development, the a5w page and nowhere do I see anything about how to generate the AJAX.

Can anyone guide this old man in the right direction for Ajax code writing?

Thanks

NoeticCC
03-23-2008, 09:31 AM
Re download the trial, open the web app tutorial database, re-publish all files to localhost. Don't think it's in the dialogs but it has loads of sample code.

Phil Rolf
03-23-2008, 09:43 AM
Andrea,
I had been there, done that, prior to the posting of this thread....and I still can't figure out how to write it....

There are alot of examples, but not how to generate the code for AJAX...

NoeticCC
03-23-2008, 10:04 AM
Andrea,
I had been there, done that, prior to the posting of this thread....
Must be just me who had problems finding the tutorials then ;-)



There are alot of examples, but not how to generate the code for AJAX...
I would start by taking an example similar to what you want to do, then adapting it. I haven't looked at those samples in depth but the AJAX bit in What's New explains the basic structure quite well.

The AJAX page uses Xbasic to process the values passed in,this can be anything from verifying data to pulling up file information based on a selected file name, sending emails etc., you can use the xbasic genies to generate that.

Then it uses Javascript to edit elements of the page you make the call from, again how this is done should be in the examples.

When I switch my laptop on - writing on my phone at the moment - I will try to attach a set of sample files. Not worked on AJAX with dialogs so far but I have not yet noticed a way this is implemented there, just in forms on A5W pages. That might well be because we are on WAS V9 though.

Phil Rolf
03-23-2008, 10:41 AM
I must be hard headed even after looking at all the examples I could find I still can't figure out AJAX. All the examples start with the page already developed. Is there a video/tutorial anywhere where the Example starts from a BLANK SCREEN and it shows how to create the page using AJAX?

NoeticCC
03-23-2008, 10:58 AM
I must be hard headed even after looking at all the examples I could find I still can't figure out AJAX. All the examples start with the page already developed. Is there a video/tutorial anywhere where the Example starts from a BLANK SCREEN and it shows how to create the page using AJAX?

Ah I see the confusion now... AJAX doesn't as such generate the page, AJAX does its bit "behind the scenes"... AJAX just acts on existing elements, although you can also add new elements to a page (Javascript, which is what AJAX uses, can pretty much do anything to a HTML page in your browser that you can do in a HTML or WYSIWYG editor, just dynamically, while the user is looking at it) too...

You just use the WYSYWYG HTML editor to create an A5W page, and use the form elements to make up the form/dialog you want to use... You can also just copy the HTML from an existing dialog into an A5W page too, but it might be easier to just start with a blank A5W page and take it from there...

You might also have to include these tags in the A5W page's header to make it work:


<script type="text/javascript" src="javascript/core.js"></script>
<script type="text/javascript" src="javascript/ax.js"></script>
<script type="text/javascript" src="javascript/alphaAjax.js"></script>
<script type="text/javascript" src="javascript/AjaxFormLibrary.js"></script>

Phil Rolf
03-23-2008, 11:53 AM
Andrea, if you go back to the examples they show one example where if there was an error on SUBMIT the Control border is RED and there is an error message. Where do I define this type of information? Typically with alpha you answer a few questions (like validation rules) and when you publish then all the code is there. Is AJAX generated the same way?

Thanks a bunch

NoeticCC
03-23-2008, 11:56 AM
OK this is a sample page (crudely encrypted to hide actual data) I adapted from a live page: http://www.charlesworth.biz/AJAX/AJAX_sample.a5w

I attached the AJAX_Sample page as well as an edited version of the Ajax page it calls, with elements in [] replacing the actual SQL and other bits that are confidential or wouldn't work without connection to our database...
Basically each time the button is pressed or when the page reloads, the Ajax script executes 2 SQL statements to bring up a list of the oldest 8 items due to be picked up and the latest 8 that have been picked up...

NoeticCC
03-23-2008, 12:03 PM
Andrea, if you go back to the examples they show one example where if there was an error on SUBMIT the Control border is RED and there is an error message. Where do I define this type of information? Typically with alpha you answer a few questions (like validation rules) and when you publish then all the code is there. Is AJAX generated the same way?

Thanks a bunch

Having only been able to load the examples last night I can't say for sure but I doubt it , at least not YET... I would expect that grids etc. will eventually be using AJAX by default or the addition of an AJAX genie or something,but have not found any documentation on AJAX used in dialogs and grids so far, just hardcoded or adapted from examples on A5w pages...

Phil Rolf
03-23-2008, 12:08 PM
After reading your post with the examples, I am going this is way to difficult (1st glance) and not typical Alpha. Unless all along it was intended to be coded like Xbasic....but no where did it mention this. All that was described was how great it was. It does look nice if it will be easy to implement.

Thanks again

NoeticCC
03-23-2008, 12:19 PM
After reading your post with the examples, I am going this is way to difficult (1st glance) and not typical Alpha. Unless all along it was intended to be coded like Xbasic....but no where did it mention this. All that was described was how great it was. It does look nice if it will be easy to implement.


It's not as hard as it looks and I do suspect that the AJAX form functions they use will hopefully have genies attached to them soon, but we won't know until the help files get updated... or someone from Alpha explains whether there will be a GUI option for generating the AJAX scripts, or even whether AJAX will be built into the web components at some point...

I have done quite a lot of work in PHP and Javascript before and found it easier to implement in A5 but obviously a GUI option would make things even easier!

DaveM
03-23-2008, 12:32 PM
Phillip,

Try here http://www.w3schools.com/ajax/default.asp . It may answer a lot oif questions for you.

NoeticCC
03-23-2008, 12:44 PM
Also check this page out in the sample pages: AJAX_InteractiveTutorial.a5w

If you click on "Click here to see sample Javascript responses that the Ajax callback page can send", it shows you a list of functions you can use in the AJAX script to do a lot of things automatically that are tricky to do in JS without experience...

I wish I'd checked that first before coding this myself the other week, although I am looking forward to replacing the existing samples I have made with these functions!

It also looks like you just define the error style etc. in the style sheet and the A5 AJAX scripts then do the rest for you..

Phil Rolf
03-23-2008, 03:01 PM
Andrea, I found the tutorial you were refering to and I get an error once you click on the file. See the attached jpg. I will try to open....

Dave, I forgot about the W3 schools, I have had it on my favorites for quit some time. Thanks for the heads up...

Darn it, after submitting the thread I noticed there was a file with the ajax extension. That one does open properly....sorry....but there is a problem with the file listed in the jpg.

NoeticCC
03-23-2008, 03:46 PM
Andrea, I found the tutorial you were refering to and I get an error once you click on the file. See the attached jpg. I will try to open....

Dave, I forgot about the W3 schools, I have had it on my favorites for quit some time. Thanks for the heads up...

Darn it, after submitting the thread I noticed there was a file with the ajax extension. That one does open properly....sorry....but there is a problem with the file listed in the jpg.

You were clicking on a link in the preview, try publishing it to your localhost and try again - Javascript and links don't work right in previews I believe...

If you can't get it to work, this is the example app running on our current version of WAS, the Ajax stuff works but I haven't uploaded all the files yet to get the SQL and DBF lookups to work properly. Also the image references use V9 syntax and thus don't work on this, and of course the speed and performance is V8, not V9... Although with AJAX that should be a moot point!

http://www.charlesworth.biz/WAS/MainMenu.a5w#whatsnew

JerryBrightbill
03-23-2008, 06:03 PM
Development of the AJAX code is very complex and implementation has been ongoing. Much of the core code actually existed in A5V8, but was missing some key elements, was not fully functional, and was not publicized. AJAX was not expected to be fully ready for A5V9. However, the final maturing of this code happened to correspond with the release of A5V9 Platinum. For that reason, some dialog type examples were provided, even though no builders are available. For now, you have to write your own xbasic page and some simple JavaScript functions. Builders will be coming, but in a later version. But since the code exists, adventurous developers can use it now.

The examples only show the basic functionality and how the various JavaScript elements work. With xbasic skills and some imagination, you can build very fast, very dynamic pages with cascading lookups, dropdown selection populating multiple fields, elaborate show / hide capabilities, and some rather dazzling effects.

There are a couple key elements of the implementation.

First you need a web page. This can be an a5w page, or simple html. You can use a dialog builder to create a basic page construction, and then just copy the source from a live page and save it as a starting point. Or, you can use any html editor to create a page. This page opens just once, when the page is called, and is usually prebuilt. It does not need any xbasic code.

Second, you have to write a code page to run on the server. In the examples, these are named with the syntax 'pagename.ajax.a5w' The server recognizes the '.ajax.a5w' extension and automatically allows such pages. When you build your own code pages, they should follow the same syntax. This page contains just xbasic, and typically has sections for 'events' similar to what you have in a dialog. These might include an onFormInitialize, an onFormValidate, and an afterFormValidate. It can contain any number of additional actions. Look at the samples for examples.

Third, you have to add a few JavaScript commands to the original page. We provide some simple Ajax functions to do the heavy lifting, such as a5_AJAX_Form() and a5_AJAX_Callback(). These send data and commands to the code page specified as a request.

The code page receives just the data sent by the functions, and uses xbasic you have written to manipulate the data. Just as the Initialize event in a dialog uses xbasic to populate controls on the dialog, the similar event on the ajax page populates values. However, on the Ajax code page, these are returned to the client in a string of JavaScript commands. For example, if you want to send back a value of "Joe" to a first name control that has an ID value of 'first_name', this creates the proper string.

?"$svs('first_name','Joe');"

After all of the desired values are filled in, just a string of the Javascript commands created is sent back to the requesting page. A Javascript file loaded by the page takes the string and populates the controls on the client with the new values.

The main key is that a page is prebuilt and loaded once. All subsequent actions are handled by callbacks, the xbasic code page, and JavaScript. When you need data or want to submit, you just send the data back to the server using the a5_AJAX functions, you don't request a new page. Sometimes this is a very small string. The code page sends back a JavaScript string with only the values requested. This too can be very small. Because the server isn't building or sending a new page with every request, the response time can be very fast. In some cases, it can seem almost instantaneous. The longest time is usually the time taken by the xbasic to do whatever data "crunching" is requested.

NoeticCC
03-23-2008, 06:10 PM
Development of the AJAX code is very complex and implementation has been ongoing. Much of the core code actually existed in A5V8, but was missing some key elements, was not fully functional, and was not publicized. AJAX was not expected to be fully ready for A5V9. However, the final maturing of this code happened to correspond with the release of A5V9 Platinum. For that reason, some dialog type examples were provided, even though no builders are available. For now, you have to write your own xbasic page and some simple JavaScript functions. Builders will be coming, but in a later version. But since the code exists, adventurous developers can use it now.

Thanks for that explanation, even the Javascripts we do have now are great to work with, it's good to know builders/genies are on their way at some point but the functions alone are something brilliant to get our teeth into, WITHOUT having to swot up on too much Javascript! :)

PS: Woo-hoo, just adapted the a5_AJAX_Form_populateSelect callback javascript from the Interactive Tutorial, and unlike the Javascript code I hacked together a couple of weeks ago, it just worked, first time round!

Phil Rolf
03-23-2008, 10:18 PM
Thank you Jerry for one statement in particular "even though no builders are available." I really thought that V9 included the builders based upon how Alpha was marketing the AJAX portion. I will play around with it just like Andrea has been doing.....

NoeticCC
03-24-2008, 08:14 AM
Thank you Jerry for one statement in particular "even though no builders are available." I really thought that V9 included the builders based upon how Alpha was marketing the AJAX portion.
Strictly speaking they never mentioned an AJAX GUI but I guess it's just what we expect from Alpha.



I will play around with it just like Andrea has been doing.....

I have to say it did me good to do that, especially now that I found the interactive tutorial at last... Dialogs and grids are great for some things but the full potential of WAS only starts to come through with the use of XBasic. AJAX is as good a place to start :)