Enyo and Ajax (Manipulating MySQL Database)

zahidnazir

Hello Everybody,

I am trying to manipulate MySQL database in Enyo using AJAX.
I want to fetch the data from MySQL database, once the app is launched.

Actually I am developing apps for LG WebOS TV.

Kindly help and if possible, kindly give me some helpful examples.

Regards
Zahid Nazir

theryanjduffy

I'd suggest reading through the Moonstone Tutorial, particularly Step 8 which discusses fetching data. It uses a JsonpSource but the AjaxSource would be pretty similar.

zahidnazir

I have already been there. But that doesn't serve the purpose I am looking for. What I want is when the app is launched, data must be fetched from MySQL database and displayed. The fetching is done using AJAX as we know in traditional ways. But how to accomplish the same here in Enyojs is giving me a hard time.

I want that data to be fetched from MySQL database once the app is launched and gets populated in respected fields.

Kindly suggest some resources or references.

theryanjduffy

Here's a basic example that uses Ajax to manually populate a collection and display it using DataRepeater. Hope it helps!

var
	Ajax = require('enyo/Ajax'),
	Collection = require('enyo/Collection'),
	Control = require('enyo/Control'),
	DataRepeater = require('enyo/DataRepeater');

module.exports = Control.kind({
	components: [
		{name: 'list', kind: DataRepeater, components: [
			{tag: 'ul', kind: Control, components: [
				{tag: 'li', name: 'key'},
				{tag: 'li', name: 'value'}
			], bindings: [
				{from: 'model.key', to: '$.key.content'},
				{from: 'model.value', to: '$.value.content'}
			]}
		]}
	],
	bindings: [
		{from: 'collection', to: '$.list.collection'}
	],
	create: function () {
		Control.prototype.create.apply(this, arguments);

		this.ajax = new Ajax({
			url: 'https://httpbin.org/get'
		});
		this.ajax.go();
		this.ajax.response(this, 'handleSuccess');
	},
	objectToCollection: function (obj) {
		var models = Object.keys(obj).map(function (key) {
			return {
				key: key,
				value: obj[key]
			};
		});

		return new Collection(models);
	},
	handleSuccess: function (sender, ev) {
		this.set('collection', this.objectToCollection(ev.headers));
	},
	handleError: function (sender, ev) {
		this.log('womp womp');
	}
});

theryanjduffy

Note that if you're using Enyo 2.5, you'll have to make a few changes to the kind references.