Programming Breaks: Ajax

Showing posts with label Ajax. Show all posts

Tuesday, July 16, 2013

Getting JqPlot to work inside a JQuery UI Tab

Jqplot is a very simple jquery-based plotting library for displaying simple plotting charts on html page, however, having a jqplot <div> in a jquery ui container such as tab and not having it displayed as default (e.g. having the jqplot as the second tab page instead of the default first tab page), the jqplot <div> will not display any plot. For example the following code will not work for the jqplot:

<html>

<head>

$(function(){

$( "#tabs" ).tabs();

var s1 = [1, 2, 3];

// Can specify a custom tick Array.

// Ticks should match up one for each y value (category) in the series.

var ticks = ["Val1", "Val2", "Val3"];

var plot1 = $.jqplot('chart1', [s1], {

// The "seriesDefaults" option is an options object that will

// be applied to all series in the chart.

seriesDefaults:{

renderer:$.jqplot.BarRenderer,

rendererOptions: {fillToZero: true}

// Custom labels for the series are specified with the "label"

// option on the series option. Here a series option object

// is specified for each series.

series:[

{label:'Search Query'}

// Show the legend and put it outside the grid, but inside the

// plot container, shrinking the grid to accomodate the legend.

// A value of "outside" would not shrink the grid and allow

// the legend to overflow the container.

legend: {

show: true,

placement: 'outsideGrid'

axes: {

// Use a category axis on the x axis and use our custom ticks.

xaxis: {

renderer: $.jqplot.CategoryAxisRenderer,

ticks: ticks

// Pad the y axis just a little so bars can get close to, but

// not touch, the grid boundaries. 1.2 is the default padding.

yaxis: {

pad: 1.05,

tickOptions: {formatString: '%d'}

}

});

var s2 = [["Val1":1], ["Val2":2], ["Val3":3]];

var plot2 = $.jqplot('pie', [s2], {

grid: {

drawBorder: false,

drawGridlines: false,

background: '#ffffff',

shadow:false

axesDefaults: {

seriesDefaults:{

renderer:$.jqplot.PieRenderer,

rendererOptions: {

showDataLabels: true

}

legend: {

show: true,

rendererOptions: {

numberRows: 1

location: 's'

}

});

$('#tabs').bind('tabsshow', function(event, ui) {

if (ui.index === 1 && plot1._drawCount === 0) {

plot1.replot();

}

else if (ui.index === 2 && plot2._drawCount === 0) {

plot2.replot();

}

});

</script>

</head>

<body>

<ul>

<li><a href="#tabs-1">Tabular Data</a></li>

<li><a href="#tabs-2">Histogram</a></li>

<li><a href="#tabs-3">Pie Chart</a></li>

</ul>

First Tab Page

</div>

</div>

</div>

</body>

</html>

The solution is to call the jqplot element's replot() method when a tab page is selected by adding the highlighted section shown below:

<html>

<head>

$(function(){

$( "#tabs" ).tabs();

var s1 = [1, 2, 3];

// Can specify a custom tick Array.

// Ticks should match up one for each y value (category) in the series.

var ticks = ["Val1", "Val2", "Val3"];

var plot1 = $.jqplot('chart1', [s1], {

// The "seriesDefaults" option is an options object that will

// be applied to all series in the chart.

seriesDefaults:{

renderer:$.jqplot.BarRenderer,

rendererOptions: {fillToZero: true}

// Custom labels for the series are specified with the "label"

// option on the series option. Here a series option object

// is specified for each series.

series:[

{label:'Search Query'}

// Show the legend and put it outside the grid, but inside the

// plot container, shrinking the grid to accomodate the legend.

// A value of "outside" would not shrink the grid and allow

// the legend to overflow the container.

legend: {

show: true,

placement: 'outsideGrid'

axes: {

// Use a category axis on the x axis and use our custom ticks.

xaxis: {

renderer: $.jqplot.CategoryAxisRenderer,

ticks: ticks

// Pad the y axis just a little so bars can get close to, but

// not touch, the grid boundaries. 1.2 is the default padding.

yaxis: {

pad: 1.05,

tickOptions: {formatString: '%d'}

}

});

var s2 = [["Val1":1], ["Val2":2], ["Val3":3]];

var plot2 = $.jqplot('pie', [s2], {

grid: {

drawBorder: false,

drawGridlines: false,

background: '#ffffff',

shadow:false

axesDefaults: {

seriesDefaults:{

renderer:$.jqplot.PieRenderer,

rendererOptions: {

showDataLabels: true

}

legend: {

show: true,

rendererOptions: {

numberRows: 1

location: 's'

}

});

$('#tabs').bind('tabsshow', function(event, ui) {

if (ui.index === 1 && plot1._drawCount === 0) {

plot1.replot();

}

else if (ui.index === 2 && plot2._drawCount === 0) {

plot2.replot();

}

});

});

</script>

</head>

<body>

<ul>

<li><a href="#tabs-1">Tabular Data</a></li>

<li><a href="#tabs-2">Histogram</a></li>

<li><a href="#tabs-3">Pie Chart</a></li>

</ul>

First Tab Page

</div>

</div>

</div>

</body>

</html>

Sunday, July 14, 2013

A simple shopping cart integration with eNETS and WorldPay using jQuery and PHP with database logging

Below is the demo code written in jQuery, PHP for a simple shopping cart which performs transaction with eNETS or WorldPay and log the records to the server:

http://www.4shared.com/zip/C-bgFisq/shopping_cart.html

The basic ideas is like this: after the user enters the registration information and click "Checkout" button, the javascript on the client web browser will perform validation (e.g. check whether required fields are entered, whether the amount is greater than 0, etc). If the validation is correct, then the registration information will first post to the server as a record, which then returns a transaction reference number to the web browser. If the transaction reference number from the server is correctly returned, the javascript on the client web browser will post the form with the updated transaction reference number as well as the total amount to the enet (or worldpay), which then takes over the transaction.

The enets.html contains the web page and javascripts for working with eNETS, the javascript first post the form data to the log.php to be logged in the MySQL Server, and submit the form to eNETS gateway with the transaction reference received returned by the log.php
The worldpay.html contains the web page and javascript for working with WorldPay, the javascript first post the form data to the log.php to be logged in the MySQL Server, and submit the form to WorldPay gateway with the transaction reference received returned by the log.php
The log.php contains the PHP codes that logs that transaction data to the MySQL server, then returns the id of the last inserted transaction as the transaction reference to the jQuery post script which post the request.

Some Useful Regular Expression Matchings in Javascript

1. Find whether a sentence starts with a particular string

function startsWith(string searched_string, string string_to_find)
{
return (searched_string.match("^"+string_to_find));
}

To use the above function:

var string_a="Good Morning, how are you?";
var string_b="Good Afternoon, how are you?";
var string_c="Good Morning";

var is_found1=startsWith(string_a, string_c); //is_found1==true;
var is_found2=startsWith(string_b, string_c); //is_found2==false;

2. Validate email address

function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
};

To use the above function:

var email1="xs0040@gmail.com";
var email2="xs0040";

var found1=isValidEmailAddress(email1); //found1==true;
var found2=isValidEmailAddress(email2); //found2==false;

Tuesday, January 11, 2011

Enable jScrollPane working with jquery TabControl

If a <div> element "scroll-pane" which requires to be rendered using jScrollPane is within another <div> element "tabs" rendered with jquery ui TabControl, it is necessary to call jScrollPane() method on the "scroll-pane" after "tabs" calls its tabs() method by calling $("#scroll-pane").jScrollPane() in "tabs" onShow event trigger. The jquery code look likes this:

$(function(){

$( "#tabs" ).tabs({

show: function(event, ui)

{

$("#scroll-pane").jScrollPane();

}

});

Add Google Earth to your Google Map

Here is the javascript code that bind to a <div> element "map" for displaying the google earth 3d view on google map:

var map=new GMap2(document.getElementById("map"));
map.addMapType(G_SATELLITE_3D_MAP);