Click data row to see detail of datas

onegun

i set the table action to 'table_actions'=>array('VIEW', 'DELETE'), but seem view is not working, i click the row in the data table, it jumps to delete

admin

Do you have the "preview_path" set for your module? By default it is empty and the VIEW buttons need that set to show up.

onegun

could you give an example how to set this path

admin

Right under your table_actions parameter you can add what the preview_path of the page would be (if there is one).
... 'table_actions'=>array('VIEW', 'DELETE'), 'preview_path'=> 'mypage/{slug}', ...
You can use "{}" for place holders of module data variables. VIEW is meant to be a link to the page on the site that will display the information you are editing.

onegun

one thing, do i need to create this "mypage" view?

admin

Yes. If you are passing in a parameter to the page, you can see how best to do that at the bottom of this page:
http://docs.getfuelcms.com/general/pages-variables

onegun

if i just want an ajax pop up displaying the info in a table, what shall i do?

admin

The ajax info I'm assuming will need a view as well so you could just ajax in that "mypage"

onegun

ok, i will create the page, but i dont think prevew_path will handle the ajax style, what other options i need to change to make this ajax pop up happen

admin

Are you wanting the ajax popup to happen in the admin area when they click VIEW or on the front end?

onegun

backend, on they click view, just data table display, i used yii framework before, they comes with view page by default

admin

To do that, you will need to add your own javascript. In particular, you will need to create a new jQX controller for your module:
http://docs.getfuelcms.com/general/javascript#jqx

That documentation shows a method of "list_items" which is where you are going to want to inject your javascript to add that functionality by adding click events to the "VIEW" link.

Does this simple module live within the fuel/modules folder (under an advanced module) or fuel/application/ folder? The reason I ask is if it's in an advanced module, and you did the CLI command to generate that advanced module, then there may already be a JQX controller javascript file you can use. You would need to wire it up by setting the"js_controller" and "js_controller_path" parameters for you simple module (you can look at fuel/modules/fuel/config/fuel_modules.php as an example).

onegun

It is under application folder

admin

Try adding a file to your main assets/js/ folder named MyController.js with the following code:
MyController = jqx.createController(fuel.controller.BaseFuelController, { init: function(initObj){ this._super(initObj); }, items : function(){ this._super(); // Your custom code here... console.log('This should be executed on the list items view') } });

Then in your MY_fuel_modules.php for your module, add the following parameters:
'js_controller' => 'MyController', 'js_controller_path' => '/assets/js/', // This should be the path to your assets/js folder. js_path() won't work because the helper isn't loaded at the time of running this file initially
If you view source on the list items page of your module, towards the very bottom, you should see something like this:
<script type="text/javascript"> jqx.addPreload('fuel.controller.BaseFuelController'); jqx.init('MyController', {"module":"newspapers","method":"items","precedence_col":"precedence"}, '/assets/js/'); </script>

onegun

i dont think i did this correct, i want to build a simple module called "sync" thus on listing table, i need to add a link "Sync" instead of edit, delete

so at first on my_fuel_modules.php, i did

$config['modules']['sk_syncs'] = array(
	'module_name' => 'Synchronization',
	'table_headers' => array(
		'id', 
		'note',
		'action', 
		'lang',
		'created_at',
		'updated_at',
	),
	'table_actions'=>array('Sync'),
	'item_actions'=>array(),
	'js_controller'=>'syncController',
	'js_controller_path'=>'../assets/js/',
);

then i create a syncController.js at ../assets/js/

syncController=jqx.createController(fuel.controller.BaseFuelController,{
	init: function(initObj){
		this._super(initObj);
	},
	items: function(){
		this._super();
		$('.action_sync').click(function(e){
			e.preventDefault();
			alert('haha');
		});
		console.log('executed');
	}
})

it isnt working. basically i want to click this link, will allow a confirm box to popup asking if confirm to sync, and then, it will call ajax to an api controller to do further processing. After sync, then this "Sync" will removed and replaced with a text "Done"

another thing is annoying, is the row on list table is always clickable when mouse over, clicking it will become viewable to data. Does not need in my case.

How can i solve?

admin

Have you confirmed that the javascript file is even loaded and the items method is called?

For the row clicking issue, you can set "rows_selectable" => FALSE in your module config file. Otherwise, it will automatically use the first action on the left as the action.

onegun

yes, i confirm the js is loaded, as "executed" is displayed in the console. However, $('.action_sync').click(function(e){
e.preventDefault();
alert('haha');
});

inside items funciton is not working. "action_sync" class is created after i change the 'table_actions'=>array('Sync'),

onegun

hi, i just noticed that in baseFuelController.js, there is a tablecallback function and inside there

		// set up row clicks
		$("#data_table td[class^='col']").each(function(){
			$(".publish_action", this).click(function(e){
				if ($(this).parent().find('.toggle_on').length > 0){
					toggleOnOff(this, 'on');
				} else if ($(this).parent().find('.toggle_off').length > 0){
					toggleOnOff(this, 'off');
				}
				return false;

			});
			if ($(this).find('a').length 

i suspect the problem lies to here

			if ($(this).find('a').length 

so questions

1) should i rewrite tablecallback in my own controller?
2) i do not understand the condition of if ($(this).find('a').length <= 0), why you checking this?
3) if i rewrite tablecallback, will not overwrite the base controller?

admin

1) Perhaps there's an event that we can add at the end of the tableCallback method that triggers an event that you can subscribe to:
tableCallback : function(_this){ // ... removed for brevity if (_this.rearrangeOn){ _this.rearrangeItems(); } $('#data_table').trigger('tableRedrawn'); },

2) That adds the click event to the TDs that are in the row (all the rows without the link)