Hi all, I've got a page which calls users from a JSON file loaded via ajax. It uses datatables, which is something nice I've discovered and am very impressed with it.

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

			"columns": [
				{ "data": "profile_photo_path" },
				{ "data": "first_name" },
				{ "data": "email" },
				{ "data": "active" },
				{ "data": "id"}
			],
			"columnDefs": [
				{ sClass: "user-name", "targets": [ 1 ] },
				{ 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 href="USERS_edit.php?id='+aData.id+'" data-slidepanel="panel" class="name edit"><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 href="USERS_edit.php?id='+aData.id+'" data-slidepanel="panel" 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_deactive').DataTable();
		
		yadcf.init(myTable, [
			{column_number : 0, filter_type: 'none'},
			{column_number : 1, filter_type: 'text'},
			{column_number : 2, filter_type: 'text'}
		]);
		
		
	} );
</script>
<!-- Hide main search box-->
<style type="text/css">
.dataTables_filter {
	 display: none;
}
</style> 



<table class="table table-hover members-table middle-align" id="user_list_deactive">
	<thead>
		<tr class="replace-inputs">

			<th class="hidden-xs hidden-sm" style="background:#FFF"></th>
			<th>Name and Username</th>
			<th class="hidden-xs hidden-sm">Email</th>
			<th style="vertical-align:top;background:#FFF">Settings</th>
		</tr>
	</thead>
	
</table>

However, next to each use I have an "Edit" button, which calls a panel which appears from the right hand side of the page.

    <script type="text/javascript">
      $(document).ready(function(){
          $('[data-slidepanel]').slidepanel({
              orientation: 'right',
              mode: 'overlay',
	      static: false
          });
      });
	</script>	 

This button works fine when put statically into the page but doesn't function when its included in the datatable, it simply opens up the page normally instead of pushing it to the sliding panel. Here is the static code for that link, which is what is replicated in the datatable code, but doesn't work due to the ajax call...

<a href="USERS_edit.php?id=20" data-slidepanel="panel" class="edit"><i class="linecons-pencil"></i>Edit</a>    

I've done a screencast of the issue... first it shows the page not loading in the panel, then I click the static link outside of the datatable and the panel shows correctly.

 

http://screencast.com/t/K8OEQi4oLP

 

I'm presuming its because the ajax is loading AFTER the page has been loaded so it is not binding to those links, but I am unsure as to how to fix it. I've read countless times to use .on , but that didn't fix a thing, it stopped it working completely.

 

Here is the jquery plugin for the slidepanel I'm using.... http://codebomber.com/jquery/slidepanel/

 

Any words of advice to point me in the right direction would be much appreciated

 

Thanks rallport!

 

With this:

$(document).ready(function() {
	var first = true;

	// Hide menu once we know its width
	$('body').on('click', '#showmenu', function() {
		var $menu = $('.cb_slide_panel');
		if ($menu.is(':visible')) {
			// Slide away
			$menu.animate({right: -($menu.outerWidth() + 10)}, function() {
				$menu.hide();
			});
		}
		else {
			// Slide in
			$menu.show().css("right", -($menu.outerWidth() + 10)).animate({right: 0});
		}
	});
});

Plus this...

$('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>');

And some css fiddling, I made it work.

 

Thanks for the advice on building up from scratch

Might be out of scope for this thread but for templating you could look into template strings that are a part for the new ES6/ES2015 standard. You can transpile ES6 into ES5 using Babel - there's plugins for Gulp and Grunt to allow you to write ES6 in production.

 

Here's an example http://babeljs.io/repl/#?experimental=true&evaluate=true&loose=false&spec=false&code=%0A%0Aconst%20brock%20%3D%20%7B%0A%20%20name%3A%20'Brock'%2C%0A%20%20breed%3A%20'Sheepdog'%2C%0A%20%20age%3A%2012%2C%0A%20%20noise%3A%20'Woof'%2C%0A%20%20speak()%20%7B%0A%20%20%20%20console.log(%60%24%7Bthis.noise%7D!%20says%20%24%7Bthis.name%7D%20the%20%24%7Bthis.age%7D%20year%20old%0A%20%20%20%20%24%7Bthis.breed%7D.%60)%3B%0A%20%20%7D%0A%7D%3B%0A%0A%0Abrock.speak()%3B

 

I can't see much use now for templating engines now we have templating directly in the language, they were however very useful prior to ES6 being released, and for those who are not yet comfortable using ES6 in production i'd recommend you use them rather than using the '+' operator which is fraught with problems.

That said ES6 is now an official standard so it's time to start learning it

Edited October 1, 201510 yr by rbrtsmith

Thanks for the advice guys, I will look into that

 

I tried to install grunt on my machine at work (where I do all the web dev stuff), but due to restrictions on the network I was unable to get it to work :/