Click data row to see detail of datas

Comments

• admin

  August 2014 edited 9:33PM

  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

  August 2014 edited 9:33PM

  could you give an example how to set this path
• admin

  August 2014 edited 9:33PM

  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

  August 2014 edited 9:33PM

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

  August 2014 edited 9:33PM

  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

  August 2014 edited 9:33PM

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

  August 2014 edited 9:33PM

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

  August 2014 edited 9:33PM

  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

  August 2014 edited 9:33PM

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

  August 2014 edited 9:33PM

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

  August 2014 edited 9:33PM

  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

  August 2014 edited 9:33PM

  It is under application folder
• admin

  August 2014 edited 9:33PM

  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

  October 2014 edited 9:33PM

  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

  October 2014 edited 9:33PM

  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

  October 2014 edited 9:33PM

  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

  October 2014 edited 9:33PM

  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

  October 2014 edited 9:33PM

  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)