Google Releases New Dart SDK Milestone 4

Google on Tuesday has been released new Dart SDK Milestone 4 (v0.4.7 r21548). You can download here. This versions is the fourth milestone now from dartlang.org/tools.

The Dart is Google’s open-source project for structured and scalable web programming. Dart compiles to JavaScript and runs across the open modern web..

The official changes log for Dark SDK are following:

1- Core, collection, and async libraries are now stable. There will be no more breaking changes to these libraries.
2-Performance improved in both the dart2js compiler and the Dart VM.
3-Dart Editor comes with an all-new analysis engine for faster real-time feedback.
4-Classes can be used as mixins.

Google said, dart2js now generates more efficient code. Compared to the previous M3 release, DeltaBlue runs twice as fast and Richards runs 40% faster. The native Dart VM now runs Richards twice as fast as V8. On DeltaBlue, the VM improved by 22%. Details are available at dartlang.org/performance.
dart

Posted: Tuesday, April 16th, 2013
Author: Parvez

Image Crop Functionality In Model Box

In this tutorial i will described how to create crop image functionality in model box or popup box.
This is very interesting functionality. We have used following jquery library to crop image.
1- Ajax form submit library
2- Imgareaselect library

Step 1:We will create HTML layout.

First we will include library

1
2
3

<script src="jquery.imgareaselect.js" type="text/javascript"></script>
<script src="jquery.form.js"></script>

Creating div to show image after crop.

1
2
3
4
5
6
7
8
9
10
11

<div class="control-group no-margin-bottom">
<label class="control-label width-120">My Avatar :</label>
                  <span class="control-label tl line-height-20px" id="span-change-avatar"><div class="pickArea pull-left">
   <!--<img src=" />!-->
      <img width="128" id="avatar-edit-img" height="128" src="<?php echo getCustomAvatar($userId);?>" /></div>
	  </span> </div>

Now we will create model box to uplode and crop image.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<!--model box -->
<div class="modal" id="changePic" style="display: none;top: 62%">
    <div class="modal-header">
    <button class="close closeAvatar" data-dismiss="modal">×</button>
    <h3>Change Profile Picture</h3>
    </div>
    <div class="modal-body">
    <form id="cropimage" method="post" enctype="multipart/form-data" action="<?php echo home_url();?>/profiles/changeAvatar/">
	Upload your image <input type="file" name="photoimg" id="photoimg" />
	<input type="hidden" name="hdn-profile-id" id="hdn-profile-id" value="<?php echo $userId; ?>" />
	<input type="hidden" name="hdn-x1-axis" id="hdn-x1-axis" value="" />
	<input type="hidden" name="hdn-y1-axis" id="hdn-y1-axis" value="" />
	<input type="hidden" name="hdn-x2-axis" value="" id="hdn-x2-axis" />
	<input type="hidden" name="hdn-y2-axis" value="" id="hdn-y2-axis" />
	<input type="hidden" name="hdn-thumb-width" id="hdn-thumb-width" value="" />
	<input type="hidden" name="hdn-thumb-height" id="hdn-thumb-height" value="" />

	<div id='preview-avatar-profile'>
</div>
<div id="thumbs" style="padding:5px; width:600px"></div>
</form>

    </div>
	<div class="modal-footer">
                <a href="javascript:void(0)" class="btn btn-close closeAvatar"  data-dismiss="modal"><img height="18px" width="18px" src="<?php echo get_stylesheet_directory_uri(); ?>/wp_home_page/images/Cancel.png">&nbsp;Close</a>
                <input type="button" id="btn-crop" name="submit" value="Crop & Save" />
            </div>

    </div>

Step 2: Java script code:
show the model box when we will click change pic button.

1
2
3
4
5
6
7
8
9
10
11

jQuery('#change-pic').live('click', function(e){
		e.preventDefault();

		jQuery('#changePic').show();

	});

Ajax form submitting and show the image for crop process.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

jQuery('#photoimg').live('change', function()
{
jQuery("#preview-avatar-profile").html('');
jQuery("#preview-avatar-profile").html('Uploading....');
jQuery("#cropimage").ajaxForm(
{
target: '#preview-avatar-profile',
success:    function() {
        jQuery('img#photo').imgAreaSelect({
        aspectRatio: '1:1',
        onSelectEnd: getSizes,
    });
    }
}).submit();

});

crop image and call save method.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

jQuery('#btn-crop').live('click', function(e){
	e.preventDefault();
	params = {
            targetUrl: 'profiles/saveAvatarTmp/',
            action: 'profiles_controller_saveAvatarTmp',
			x_axis: jQuery('#hdn-x1-axis').val(),
			y_axis : jQuery('#hdn-y1-axis').val(),
			x2_axis: jQuery('#hdn-x2-axis').val(),
			y2_axis : jQuery('#hdn-y2-axis').val(),
			thumb_width : jQuery('#hdn-thumb-width').val(),
			thumb_height:jQuery('#hdn-thumb-height').val()
        };
		saveCropImage(params);
	});

	Save image ajax request:

	function getSizes(img, obj)
	{
		var x_axis = obj.x1;
		var x2_axis = obj.x2;
		var y_axis = obj.y1;
		var y2_axis = obj.y2;
		var thumb_width = obj.width;
		var thumb_height = obj.height;
		if(thumb_width > 0)
			{

				jQuery('#hdn-x1-axis').val(x_axis);
				jQuery('#hdn-y1-axis').val(y_axis);
				jQuery('#hdn-x2-axis').val(x2_axis);
				jQuery('#hdn-y2-axis').val(y2_axis);
				jQuery('#hdn-thumb-width').val(thumb_width);
				jQuery('#hdn-thumb-height').val(thumb_height);

			}
		else
			alert("Please select portion..!");
	}

	function saveCropImage(params) {
    jQuery.ajax({
        url: siteurl + params['targetUrl'],
        cache: false,
        dataType: "html",
        data: {
            action: params['action'],
            id: jQuery('#hdn-profile-id').val(),
			 t: 'ajax',
								w1:params['thumb_width'],
								x1:params['x_axis'],
								h1:params['thumb_height'],
								y1:params['y_axis'],
								x2:params['x2_axis'],
								y2:params['y2_axis']
        },
        type: 'Post',
       // async:false,

        success: function (response) {
				jQuery("#changePic").hide();
				jQuery(".imgareaselect-border1,.imgareaselect-border2,.imgareaselect-border3,.imgareaselect-border4,.imgareaselect-border2,.imgareaselect-outer").css('display', 'none');

				jQuery("#avatar-edit-img").attr('src', response);
				jQuery("#preview-avatar-profile").html('');
				jQuery("#photoimg").val();
				AlertManager.showNotification('Image cropped!', 'Click Save Profile button to save image.', 'success');

        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert('status Code:' + xhr.status + 'Error Message :' + thrownError);
        }
    });
	}

Step 3:We will define controller method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257

/*********************************************************************
	 Purpose			: update image.
	 Parameters		    : null
	 Returns			: integer
	 ***********************************************************************/
	public function changeAvatar() {
		global $current_user;
		$loggedInId = $current_user->ID;
		$post = isset($_POST) ? $_POST: array();
		$max_width = "500";
		$userId = isset($post['hdn-profile-id']) ? intval($post['hdn-profile-id']) : 0;
		$path = get_theme_root(). '\images\uploads\tmp';

		$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
		$name = $_FILES['photoimg']['name'];
		$size = $_FILES['photoimg']['size'];
		if(strlen($name))
		{
		list($txt, $ext) = explode(".", $name);
		if(in_array($ext,$valid_formats))
		{
		if($size<(1024*1024)) // Image size max 1 MB

		{
		$actual_image_name = 'avatar' .'_'.$userId .'.'.$ext;
		$filePath = $path .'/'.$actual_image_name;
		$tmp = $_FILES['photoimg']['tmp_name'];

		if(move_uploaded_file($tmp, $filePath))
		{
		$width = $this->getWidth($filePath);
			$height = $this->getHeight($filePath);
			//Scale the image if it is greater than the width set above

			if ($width > $max_width){
				$scale = $max_width/$width;
				$uploaded = $this->resizeImage($filePath,$width,$height,$scale);
			}else{
				$scale = 1;
				$uploaded = $this->resizeImage($filePath,$width,$height,$scale);
			}
		$res = $this->Profile->saveAvatar(array(
						'userId' => isset($userId) ? intval($userId) : 0,
												'avatar' => isset($actual_image_name) ? $actual_image_name : '',
						));

		//mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");

		echo "<img id='photo' class='' src='".getCustomAvatar($userId, true).'?'.time()."' class='preview'/>";
		}
		else
		echo "failed";
		}
		else
		echo "Image file size max 1 MB";
		}
		else
		echo "Invalid file format..";
		}
		else
		echo "Please select image..!";
		exit;

	}
	/*********************************************************************
	 Purpose			: update image.
	 Parameters		    : null
	 Returns			: integer
	 ***********************************************************************/
	public function saveAvatarTmp() {
		global $current_user;
		$loggedInId = $current_user->ID;
		$post = isset($_POST) ? $_POST: array();
		$userId = isset($post['id']) ? intval($post['id']) : 0;
		$path = get_theme_root(). '\\images\uploads\tmp';
		$t_width = 300;	// Maximum thumbnail width

		$t_height = 300;	// Maximum thumbnail height


	if(isset($_POST['t']) and $_POST['t'] == "ajax")
	{
		extract($_POST);

		$img = get_user_meta($userId, 'user_avatar', true);
		$imagePath = $path.'/'.$img;
		$ratio = ($t_width/$w1);
		$nw = ceil($w1 * $ratio);
		$nh = ceil($h1 * $ratio);
		$nimg = imagecreatetruecolor($nw,$nh);
		$im_src = imagecreatefromjpeg($imagePath);
		imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w1,$h1);
		imagejpeg($nimg,$imagePath,90);

	}
	echo getCustomAvatar($userId, true);
	exit(0);
	}

	/*********************************************************************
	 Purpose			: resize image.
	 Parameters		    : null
	 Returns			: image
	 ***********************************************************************/
	function resizeImage($image,$width,$height,$scale) {
	$newImageWidth = ceil($width * $scale);
	$newImageHeight = ceil($height * $scale);
	$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
	$source = imagecreatefromjpeg($image);
	imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);
	imagejpeg($newImage,$image,90);
	chmod($image, 0777);
	return $image;
}
/*********************************************************************
	 Purpose			: get image height.
	 Parameters		    : null
	 Returns			: height
	 ***********************************************************************/
function getHeight($image) {
	$sizes = getimagesize($image);
	$height = $sizes[1];
	return $height;
}
/*********************************************************************
	 Purpose			: get image width.
	 Parameters		    : null
	 Returns			: width
	 ***********************************************************************/
function getWidth($image) {
	$sizes = getimagesize($image);
	$width = $sizes[0];
	return $width;
}

Step 4: Model method to save image path into database.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/*********************************************************************
	 Purpose			: save avatar.
	 Parameters		    : $options
	 Returns			: true/false
	 ***********************************************************************/
	function saveAvatar($options){
  		//update sql


  	}

Result

Posted: Tuesday, April 2nd, 2013
Author: Parvez

Working with EVENT Scheduler In MySQL

THe Mysql has great flexibility in database.It has triggers,stored procedure and much more.When you want run a SQL based on change of table data(like event occurred on data), then you need to create Trigger.
But MySQL also has magic EVENT Scheduler functionality, its like cron job which will RUN on specific time.EX:
You need to delete all data of table on specific time,In script level you can create cron job which will RUN on schedule time.
BUT in database level you can create EVENT on database which will RUN on schedule time.

How to check EVEN Scheduler is enabled:
Run below command on mysql for check setting of event scheduler:

1

SHOW PROCESSLIST

If you will get below row that’s mean your Mysql has enable:
event_schedular_status

The Sytax:

CREATE EVENT `event_name`
ON SCHEDULE schedule
[ON COMPLETION [NOT] PRESERVE]
[ENABLE | DISABLE | DISABLE ON SLAVE]
DO BEGIN
– event body
END;
This statement creates and schedules a new event. The event will not run unless the Event Scheduler is enabled.
you can get more details from MySQL CREATE EVENT Syntax documentation
The schedule can be assigned various settings, e.g.
Run once on a specific date/time:
AT ‘YYYY-MM-DD HH:MM.SS’
e.g. AT ’2013-30-01 05:00.00′

Run once after a specific period has elapsed:
AT CURRENT_TIMESTAMP + INTERVAL n [HOUR|MONTH|WEEK|DAY|MINUTE]
e.g. AT CURRENT_TIMESTAMP + INTERVAL 1 DAY

Run at specific intervals forever:
EVERY n [HOUR|MONTH|WEEK|DAY|MINUTE]
e.g. EVERY 1 DAY

Run at specific intervals during a specific period:
EVERY n [HOUR|MONTH|WEEK|DAY|MINUTE] STARTS date ENDS date
e.g. EVERY 1 DAY STARTS CURRENT_TIMESTAMP + INTERVAL 1 WEEK ENDS ’2012-01-01 00:00.00′

You can also dropped once its schedule has expired with help of (ON COMPLETION NOT PRESERVE).
IF you will set (ON COMPLETION PRESERVE) then your event will preserve after schedule.

Simple EVENT Example:

ALter DEFINER=`root`@`localhost` EVENT `scg_insights_app1`.`failedservices_truncate` ON
SCHEDULE EVERY 1 MINUTE
DO
Delete From failedservices

Note:Above EVENT run every 1 min.

Posted: Saturday, March 30th, 2013
Author: Parvez

How to Set Custom HTTP Header Response

Exception handling is very important for developer as well as for programming,in this tutorial we will described how to set custom header and messages.
When we work on web application then each request have HTTP response.The HTTP response denotes the request was successful or have error,If response header contains error,Then you can know about what type error occurred with help of HTTP status code and message.

Below is simple code example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

/*********************************************************************
	 Purpose			: set header status.
	 Parameters		    : @$code: exception code
	 @$status_message : message exception

	 Returns			: app site id
	 ***********************************************************************/
	static function errorResponse($code = 400, $status_message ='')  {
		switch($code)
		{
			case 7:
				$code='407' ;
				break;
			case 404:
				$status_message = 'The requested URL ' . $_SERVER['REQUEST_URI'] . ' was not found.';
				break;
			case 500:
				$status_message = 'The server encountered an error processing your request.';
				break;
			case 60:
				$code='400';
				break;
			case '190':
				$code='412';
				$status_message = 'Token Error.';
				break;
		}
		$status_header = 'HTTP/1.1 ' . $code . ' ' . $status_message;
header( $status_header);

	}
Posted: Saturday, March 16th, 2013
Author: Parvez

Flexi Grid With Parameters

Now we will discuss next phase of flexi gird, how to pass parameters and relode flexi grid.
In this totorail i will described how to add search/sorting fucntionalty.The flexi grid laready have sorting but if you want custom sort ,Eg.: If we want only those record display in flexi grid which has status completed.

To achive above objective we need to pass status as a parmater and bind again flexi grid with new result set.
I have assume you are aware of flexi grid basic fucntionality.You can read my Previous Post

Below are simple code:

Javascript code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

jQuery("#task_status").live('change', function()
	{

		var status = $('#task_status option:selected').text();
		if(status =='Select All') {
		status =''
		}
		 jQuery("#tasks-listing-grid").flexOptions({query: 'status='+status}).flexReload();

	});

tasks-listing-grid: This is the target div.
Parameters: {query: ‘status=’+status}
PHP code:

1
2
3
4
5

if(isset($post['query']) && !empty($post['query'])){
			parse_str($post['query'], $query);
		}
Posted: Wednesday, March 13th, 2013
Author: Parvez

PHP Math functions

PHP has great support with Mathematical processing.PHP has very rich functions, There are two ceil and floor for doing rounding off number.

Below are simple steps for how to use these functions.

PHP floor()

The floor() function rounds off the value down to the nearest integer. 

1

echo floor(0.65);

The output of the above code will be 0.

PHP ceil()

The ceil() function rounds the value up to the nearest integer.

1

echo ceil(0.65);

The output of the above code will be 1.

Posted: Thursday, March 7th, 2013
Author: Parvez

How To Access Header Information in PHP

In programming languages header information of request and response is very important. The header of request tells the behavior of request and header response tells the request is success or failed, In case failed you can also know the which type error was accrued with help of HTTP response code.
PHP provide is getallheaders() to for get all header information.This function is used for fetches all HTTP headers from the current request. getallheaders() is an alias for apache_request_headers().

1
2
3
4
5
6
7

<?php
echo"<pre>";
print_r(getallheaders());
?>
Result

header

Posted: Tuesday, March 5th, 2013
Author: Parvez

Super Global Variable in PHP

$_SERVER is a predefined ‘super global’ variable. $_SERVER contains information such as headers, paths, and script locations. The entries in this array are created by the web server. There is no guarantee that every web server will provide any of these; servers may omit some, or provide others not listed here.

1
2
3
4
5
6
7

<?php
echo"<pre>";
print_r($_SERVER);
?>
Following are the information which can be retrieved using $_SERVER.

HTTP-Header-Result

Posted: Saturday, March 2nd, 2013
Author: Parvez

Simple Example of Flexi Grid with PHP

In this post we will learn how to use flexi grid with php. Flexi grid is very useful jquery plug-in for listing elements. It has many features like sorting, pagination and reloading. Flexi grid provides flexibility to the developer to add hooks with grid event. This is magical combination flexi grid with PHP. Flexi grid is open source project.

We will implement flexi grid with PHP in MVC pattern.
Below are simple steps to with full db script:

Step 1: First we will create a table into db.

1
2
3
4
5
6
7
8
9
10
11
12
13

CREATE TABLE IF NOT EXISTS `tbl_issues` (
  `ISSUEID` int(11) NOT NULL AUTO_INCREMENT,
  `issueName` varchar(255) NOT NULL
  PRIMARY KEY (`ISSUEID`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;
INSERT INTO `tbl_issues` (`ISSUEID`, `issueName`) VALUES
(10, 'issue3');

Step 2: fetch the data in model class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

function getAssignedIssues($options){
 global $wpdb;
$page = ($options['page'] > 1) ? $options['page'] : 1;
  		 $offset = $options['rp'];
  		 $limit = ($page-1)*$offset;

		 switch($options['sortname']){

  			case 'issueName':
  			default:
  				$options['sortname'] = 'Issue.ISSUEID';
  			break;
  		}
  		$records = array();

  		$sql = "
  				SELECT
  					Issue.ISSUEID AS id,
  					Issue.issueName AS issueName,

  				FROM
  					tbl_issues";
					$countQuery = "select count(Issue.ISSUEID) from tbl_issues AS Issue";

					$sql .= " ORDER BY ".$options['sortname']." ".$options['sortorder']."
  		 		   LIMIT ". $limit .",".  $offset ."";

		$total = $wpdb->get_var($countQuery);
  		$records = $wpdb->get_results($sql, ARRAY_A);

		return array(
  				'page' => $page,
  				'total' => $total,
  				'records' => $records

  			);

  	}

Step 3:After fetching data from database,we will call model method into controller class and format the results according flexi grid format.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

public function getIssues() {
		global $current_user;

		$data = $this->User->getAssignedIssues(array(
					'page' => isset($post['page']) ? intval($post['page']) : 1,
					'rp' => isset($post['rp']) ? intval($post['rp']) : 5,
					'sortname' => isset($post['sortname']) ? trim($post['sortname']) : '',
					'sortorder' => isset($post['sortorder']) ? trim($post['sortorder']) : 'ASC'
			));

		$response = array(
	        'page' => $data['page'],
	        'total' => $data['total'],
	        'rows' => array()
    	);

		foreach($data['records'] as $record){
			$response['rows'][] = array(
					'id'=> $record['id'],
					'cell' => array(
							'id' => $record['id'],
							'issueName' => $record['issueName']

						)
				);
		}

		$this->render_view(_default', array(
				'locals' => array(
						'response' => $response
					)
				));
				exit(0);

	}

Step 4: Now we will add css and js library file into head section of view.

1
2
3
4
5

<link rel='stylesheet' id='css-flexigrid-css'  href='http://localhost/test/css/flexigrid.css?ver=3.4.2' type='text/css' media='all' />
<script type='text/javascript' src='http://localhost/testjs/jquery.base64.js'></script>
<script type='text/javascript' src='http://localhost/test/js/flexigrid.js'></script>

Step 5: Create table for bind grid.

1

<table class="table table-bordered table-hover" style="display: non" id="issues-listing-grid"></table>

Step 6: After adding jquery and flexi grid js file in head part of view file. We will format grid layout. we will add below code in bottom of view file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

//issue

		var issueListingGrid = null,
        issueListingGrid = jQuery("#issues-listing-grid").flexigrid({
            url : "<?php echo mvc_public_url(array('controller' => 'users', 'action' => 'getIssues.json')); ?>",
            dataType : 'json',
            striped : true,
            colModel : [{
                display : 'Issue Name',
                name : 'issueName',
                width : 185,
                sortable : true,
                align : 'left'
            }
			],
            showToggleBtn : false,
            rpOptions: [5,10, 15, 20, 30, 50], //allowed per-page values

            procmsg: 'Processing, Please wait ...',
            pagestat: 'Displaying {from} to {to} of {total} records',
            onSuccess:function(){
                //getChangesforTeam();

            },
            datacol: {                

				'completionPercentage': function(colval) {
                    return colval+'%';
                }
            },
            sortname : "issueName",
            sortorder : "asc",
            usepager : true,
            title : '<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/wp_home_page/images/table.png">&nbsp;Isuue List',
            useRp : true,
            rp : 5,
            showTableToggleBtn : true,
            width : 'auto',
            height : 'auto'
        });

Result:

flexigrid

Posted: Wednesday, February 20th, 2013
Author: Parvez

How To Get Table Column Value with jQuery

Hi, today I got a work to get all editable column value into array and send to server side with help of Ajax. In this tutorial I am sharing simple code to parse column value and send to server side. In previous tutorial we were learn how to work with inline editing in HTML5.

Below are simple steps to get table column value :

Step 1: We will define table with inline editing in HTML5.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<table width="100%" class="table table-bordered table-hover" id="_addFiveTable">
<thead>
  <tr>
    <th>Item</th>
    <th>Item details</th>
    <th>phase</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td contenteditable="true">&nbsp;</td>
    <td contenteditable="true">&nbsp;</td>
    <td contenteditable="true">&nbsp;</td>
  </tr>
  </tbody>
</table>

Step 2: We will define table with inline editing in HTML5.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var data = jQuery('table#item-team-details-table tbody tr').map(function (index) {

            var cols = jQuery(this).find('td');
            if (cols[0].innerHTML == '' || cols[1].innerHTML == '') {
                return '';
            }
            return {
                item: cols[0].innerHTML, // use innerHTML

                itemDetails: cols[1].innerHTML, // parse

                phase: cols[2].childNodes[0].value // parse


            };

        }).get();