Male: Welcome back. Today I have with me Robert Ferguson an IBM i web developer here at Profound Logic, welcome Robert.
Robert: Thank you.
Male: Well, we’ve been talking a lot about AJAX on detailing how can you make an AJAX request. But one question has come up and that is what do you do with the data that goes back into you in an AJAX request? And especially around for an RPG developer, you may not have much experience with JavaScript or the document object model. How difficult is it for somebody like that, who just kind of starting out with AJAX to put something back—to put that data back on to the screen for example?
Robert: Okay, well it's true you do need to use JavaScript to process that request. But it's a simple concept, it's a one command, it retrieves the data and puts it back on the screen, and it's very simple.
Male: And I was hoping that you could demonstrate for us exactly how that is done. Let's say somebody is making a request using AJAX and passing in that product I'd and getting back a product description, and now they want to put it back on to the screen for the end users to see.
Robert: Okay, let's have a look in an example right now.
To start off, here we have a simple HTML table, used to ask for a product number. I intentionally created a third column, so that the product description can be placed there, once it's retrieved from the server with AJAX. To place AJAX data unto a webpage, you must first ensure that the area of the webpage that you want to populate has an ID. If you're using HTML, it's just a matter of assigning the ID attribute to something like a table cell, a td tag, or tiv tag, or a SPAN tag.
This third column has an ID of product description. If you're not using HTML, but instead a rich internet application platform, there will be an equivalent way to assign an ID, any web element can have an ID. Now, it only takes one line of code to place you AJAX data into an element that has an ID. You can place this line of code directly into your AJAX handler. You’ll be using the document .getElementById to get a reference to the element and then the innerHTLM property to populate that element with the AJAX response.
And as you can see, here is the end result. When I type a product number into the box, the description is automatically populated and that’s all it takes.
Male: Thank you Robert. Hopefully with this explanation along with the other videos on AJAX that we have, it's all coming together for you. Be sure to visit www.profoundlogic.tv for more videos on IBM i modems and web development.
Transcription by:
Scribe4you Transcription Services