Louisville Web Design - Online Stores
Marketing - Advertising
Payment Processing Solutions
Business Integration - Intranet Portal
Custom Software - Mobile Apps
Increase Your Profit Margin

Website Design Company

Business Integration Made Easy!

Phone: +1 (502) 439-8692
This email address is being protected from spambots. You need JavaScript enabled to view it.

How to Use MooTools Request Class

The MooTools Request Class is used to get data from the database via an AJAX call.  The MooTools Class makes it easy to make AJAX calls with many different options.

When you press the "Get Data" button in the demo, the function GetData() is called.

The Request class also uses the "Spinner" option.  You need to setup the CSS classes for the spinner option to work correctly.

Here is the CSS  for the spinner class.

The MooTools Request Class is used to get data from the database via an AJAX call.  The MooTools Class makes it easy to make AJAX calls with many different options.

When you press the "Get Data" button in the demo, the function GetData() is called.

The Request class also uses the "Spinner" option.  You need to setup the CSS classes for the spinner option to work correctly.

Here is the CSS  for the spinner class.

.spinner {
	position: absolute;
	opacity: 0.9;
	filter: alpha(opacity=90);
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
	z-index: 999;
	background: #fff;
}
.spinner-msg {
	text-align: center;
	font-weight: bold;
}
.spinner-img {
	background: url(spinner.gif) no-repeat;
	width: 66px;
	height: 66px;
	margin: 0 auto;
}

 

Here is the Javascript function GetData()

function GetData(){	
	var myRequest = new Request({
		url: '../phpfiles/GetDatabaseData.php',
		method: 'post',
		useSpinner: true,
		spinnerTarget:'website_table',
		spinnerOptions: { message: 'Getting Data...' },
		onRequest: function(){
		},
		onSuccess: function(responseText){
			//alert(responseText);
			var status_arr = eval("(" + responseText + ")");
			AddRows(status_arr);
			GetChartData();
		},
		onFailure: function(){
			alert("A problem occured loading data.");
		}
		});	if($('website_table').rows.length > 1){
			webTable.empty();
			webTable.set('headers', ['Date', 'Marketing', 'Customer', 'Region', 'Price']);
		}
			
	strSend = "";
	myRequest.send(strSend);
}

 

Next I use another function AddRows(status_arr) to fill the HTML table.

function AddRows(Rows){
	if($('website_table').rows.length > 1){
		webTable.empty();
		webTable.set('headers', ['Date', 'Marketing', 'Customer', 'Region', 'Price']);
	}
	
	var RowObj;
	var i = 0;
	for (i = 0; i < Rows.length; i++){
		RowObj = [Rows[i]['date'],
		  		  Rows[i]['type'],
		  		  Rows[i]['company'],
		  		  Rows[i]['region'],
		  		  Rows[i]['total']];
		row_id = Rows[i]['id'];
		webTable.push(RowObj, {'id':row_id});
	}
	
}

 

Website Design by iMarketing Solutions