Connecting dbBee XDE with host page using AJAX
TweetRemember, in previous article we mentioned that upon deploying XDE, the embed code page displays nothing but a link code and data preview.
In this article we’ll give you basic instructions on how to connect XDE with your host page.
For this example we will need the jQuery
library, so make sure that you have included it somewhere in your page. If you
do not have it included, use the following code to include it:
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
In this example, we will use XDE to display
books in our library. XML returned by our XDE looks like this (we will show
only two records here, to save the space):
<Books generated="2016-04-05T11:43:17">
<BooksCount>28</BooksCount>
<Book>
<Author>Olav Martin Kvern</Author>
<Title>Real World FreeHand 5.0/5.5</Title>
<YearPublished>1996</YearPublished>
<ISBN>0201883600</ISBN>
<Publisher>Addison-Wesley Pub Co</Publisher>
<Image>
<img src="http://www.small-applications.com/biblioimg/0201883600.jpg" border="0">
</Image>
</Book>
<Book>
<Author>Andrew Troelsen</Author>
<Title>C# and the .NET Platform</Title>
<YearPublished>2001</YearPublished>
<ISBN>1893115593</ISBN>
<Publisher>Apress</Publisher>
<Image>
<img src="http://www.small-applications.com/biblioimg/1893115593.jpg" border="0">
</Image>
</Book>
</Books>
You’ll notice that root node Books has two child nodes BooksCount and Book. These are the names we defined in XDE wizard, when we created the project. BooksCount node appears only once and it contains a total number of records in the recordset (in this case 28 records). The other node, Book, has child nodes containing the values of the database fields Author, Title, YearPublished, ISBN, Publisher and Image. That node repeats for every record (in our case it means that our XML will have 28 nodes "Books”).
Now, to get this XML and to connect it with
our page we need a div where we will display the fetched data and some jQuery:
<script>
$.ajax({
url: "https://thyme.dbbee.com/u/SGCEQ5WZFZ/BooksXMLxmlapi.wbsp",
cache: false
})
.done(function( xmlDoc ) {
$("#demo").append("The search returned "+$(xmlDoc).find("BooksCount").text() + " records<br/>");
$(xmlDoc).find("Book").each(function(){
$("#demo").append(
"<h1>" +
$(this).find("Title").text() +
"</h1><h2>" +
$(this).find("Author").text() +
"</h2><h2>" +
$(this).find("Publisher").text() +
"</h2><h3>" +
$(this).find("YearPublished").text() +
"</h3>" +
$(this).find("Image").text()+"<hr>"
);
});
});
</script>
<div id="demo"></div>
Let’s analyze this code. It is basically single jQuery ajax function
with three basic settings:
url: the URL of our XDE project
cache: set to false so the function
always fetch new content from server
.done – function that will process
fetched XML (referred in function as xmlDoc)
So once the host page is ready, jQuery
function $.ajax will fetch XML from specified URL. When document is loaded our
custom function will process each node named "Book”, create HTML code using XML
data in child nodes and append HTML code to div element with id "demo”. See
live demo here.
Same can be accomplished using the plain JavaScript (without jQuery):
<script>
function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
procXMLDoc(xhttp);
}
};
xhttp.open("GET", "https://thyme.dbbee.com/u/SGCEQ5WZFZ/BooksXMLxmlapi.wbsp", true);
xhttp.send();
}
function procXMLDoc(xml) {
var i;
var xmlDoc = xml.responseXML;
var tHTML="The search returned "+xmlDoc.getElementsByTagName("BooksCount")[0].childNodes[0].nodeValue + " records<br/>";
var x = xmlDoc.getElementsByTagName("Book");
for (i = 0; i <x.length; i++) {
tHTML += "<h1>" +
x[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue +
"</h1><h2>" +
x[i].getElementsByTagName("Author")[0].childNodes[0].nodeValue +
"</h2><h2>" +
x[i].getElementsByTagName("Publisher")[0].childNodes[0].nodeValue +
"</h2><h3>" +
x[i].getElementsByTagName("YearPublished")[0].childNodes[0].nodeValue +
"</h3>"+x[i].getElementsByTagName("Image")[0].childNodes[0].nodeValue+"<hr>";
}
document.getElementById("demo").innerHTML = tHTML;
}
loadXMLDoc();
</script>
<div id="demo"></div>
Although they seem to be very different, both scripts do the same thing in the very same way.
To see live demo in plain JavaScript, please click here.
So far, we demonstrated how XDE can be used to display all the records, without any search, pagination and formatting. That works great with small number of records, but for any serious use, we need more. That will be explained in the next blog.
Related blogs
Querying the data using XDE
In this article we’ll show practical use of dbBee_sql variable to filter the records using search criteria.