Hi again all,

 

I have a datatable which lists users, and on that same page is an "add user" form which gets submitted via ajax and processed with PHP, it then sends back a success variable, plus more variables such as "username", "first_name", "email" etc. It passes these back as well so I can add this new entry into the datatable without having to refresh the page.

 

This worked fine until I changed the way I populate the datatable. Originally I populated it rather messily with a PHP while loop and iterated through the table rows, so I decided to run it less messy like this....

<script type="text/javascript">
	$(document).ready(function() {
		$('#user_list').DataTable( {
			stateSave: true,
			"pageLength": 20,
			"ajax": {
				"url": "data/JSON_users_list.php",
				"dataSrc": "",
			},

			"columns": [
				{ "data": "profile_photo_path" },
				{ "data": "namebulk" },
				{ "data": "email" },
				{ "data": "active" },
				{ "data": "id"}
			],
			"columnDefs": [
				{ sClass: "hidden-xs hidden-sm", "targets": [ 0 ] },
				{ sClass: "user-name", "targets": [ 1 ] },
				{ sClass: "hidden-xs hidden-sm", "targets": [ 2 ] },
				{ sClass: "action-links", "targets": [ 3 ] },
				{ "width": "1%", "targets": 0 },
				{
				"targets": [ 4 ],
				"visible": false,
				"searchable": false
			}
			],
			"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
				  $('td:eq(0)', nRow).html('<div style="background: url(\''+aData.profile_photo_path+'\');" class="image-circle-50" id="'+aData.id+'-img"></div>');
				  $('td:eq(1)', nRow).html('<a onclick="$(\'#menu\').load(\'USERS_edit.php?id='+aData.id+'\');" class="name edit" id="showmenu"><span id="'+aData.id+'-first_name">'+aData.first_name+'</span> <span id="'+aData.id+'-last_name">'+aData.last_name+'</span></a><span id="'+aData.id+'-username">'+aData.username+'</span>');
				  
				  $('td:eq(3)', nRow).html('<a onclick="$(\'#menu\').load(\'USERS_edit.php?id='+aData.id+'\');" id="showmenu" class="edit"><i class="linecons-pencil"></i>Edit</a><a href="#" class="delete"><i class="linecons-trash"></i>Deactivate</a>');
				  
				  return nRow;
			},
		} );
		
		var myTable = $('#user_list').DataTable();
		
		yadcf.init(myTable, [
			{column_number : 0, filter_type: 'none'},
			{column_number : 1, filter_type: 'text'},
			{column_number : 2, filter_type: 'text'}
		]);
		
		
	} );
</script>

This works a lot better for a few reasons... pagination works for one!

 

Anyway... I've discovered upon changing the datatable that when I add a new user, the JSON data that gets passed back comes up as undefined when using the following code...

<script type="text/javascript">
	jQuery(document).ready(function($)
	{


		// Validation and Ajax action
		$("form#useradd").validate({
			

			rules: {
				username: {
					required: true,
					minlength: 2
				},

				password: {
					required: true,
					minlength: 5
				},
				
				first_name: {
					required: true
				},
				
				last_name: {
					required: true
				},
				email: {
					required: true,
					email: true
				}
			},

			messages: {
				username: {
					required: 'Please enter the username.'
				},

				password: {
					required: 'Please enter a password.'
				},
				
				first_name: {
					required: 'Please enter a first name.'
				},
				
				last_name: {
					required: 'Please enter a last name.'
				},
				
				email: {
					required: 'Please enter an email address.'
				}
			},

			// Form Processing via AJAX
			submitHandler: function(form)
			{


				$.ajax({
					url: "data/USER_add.php",
					method: 'POST',
					dataType: 'json',
					data: {
						post_it: true,
						photo_path: $(form).find('#photo_path').val(),
						username: $(form).find('#username').val(),
						password: $(form).find('#password').val(),
						first_name: $(form).find('#first_name').val(),
						last_name: $(form).find('#last_name').val(),
						email: $(form).find('#email').val()
					},
					success: function(resp)
					{
						show_loading_bar({
							delay: .5,
							pct: 100,
							finish: function(){


							}
						});

						
						// Remove any alert
						$(".errors-container .alert").slideUp('fast');


						// Show errors
						if(resp.done == false)
						{
							$(".errors-container").html('<div class="alert alert-danger">\
								<button type="button" class="close" data-dismiss="alert">\
									<span aria-hidden="true">×</span>\
									<span class="sr-only">Close</span>\
								</button>\
								' + resp.errors + '\
							</div>');
							$('html, body').animate({ scrollTop: 0 }, 'slow');

						}else{
							
							$(".errors-container").html('<div class="alert alert-success">\
								<button type="button" class="close" data-dismiss="alert">\
									<span aria-hidden="true">×</span>\
									<span class="sr-only">Close</span>\
								</button>\
								' + resp.successes + '\
							</div>');
							$('#useradd').trigger("reset");
							
							$('html, body').animate({ scrollTop: 0 }, 'slow');
							
							
							// Add this user to the user list dynamically
							
							 $('#user_list').dataTable().fnAddData( [
								"<div style=\"background: url('"+resp.photo_path+"');\" class=\"image-circle-50\" id=\""+resp.userID+"-img\"></div>",
								"<a href=\"USERS_edit.php?id="+resp.userID+"\" data-slidepanel=\"panel\" class=\"name edit\"><span id=\""+resp.userID+"-first_name\">"+resp.first_name+"</span> <span id=\""+resp.userID+"-last_name\">"+resp.last_name+"</span></a><span id=\""+resp.userID+"-username\">"+resp.username+"</span>",
								"<span class=\"email\" id=\""+resp.userID+"'-email\">"+resp.email+"</span>",
								"<a href=\"USERS_edit.php?id="+resp.userID+"\" data-slidepanel=\"panel\" class=\"edit\"><i class=\"linecons-pencil\"></i>Edit</a><a href=\"#\" class=\"delete\"><i class=\"linecons-trash\"></i>Deactivate</a>" ] );
								

							
						}
					 }
				});

			}
		});
		

	});
</script>

I also get the following error (which doesn't hinder the datatable in any way)

 

 

 

Anyway... if I alert(resp.userID); before using the fnAddData function, it shows me the user id - so I know I'm getting a JSON response. But when putting the JSON variables inside fnAddData I just get "undefined".

 

 

Is there something silly I'm missing here?

On a side note - I just tried putting "serverside": true - this actually fixed the issue of JSON data being undefined (not that error message about an unknown parameter though), however I don't want to be using server side for this.

I figured a workaround which is probably better... I simply reloaded the datatable!

 

$('#user_list').DataTable().ajax.reload();