Advanced FuelCMS Request: JQX for the rest of us!

pierlo · April 2012

Hey there,
I'd love it if someone could provide a real-life example of how to use the JQX Javascript framework provided by FuelCMS.
http://www.getfuelcms.com/user_guide/javascript/jqx
The page of the user guide doesn't really explain how to use the js controller, but I'd love to learn that!
Anyone willing to step up?

@admin in general, what about having a moderated wiki for us FuelCMS users where we can share our finding and/or expand the user guide with comments? That would rock so much... the user guide has been idle for the past year almost! Is there really any particular reason why you wouldn't want comments to be added to the guide?
Thanks!

Lance · April 2012

Are you meaning extending/utilsing the jqx in your fuel back end modules or trying to bring it through to your client side?

I can give some examples for the former, not the latter, yet.

pierlo · April 2012

well i guess how to use it for advanced modules in the fuel backend... but anything helps, really!

Lance · April 2012

Okay, it functions as much like any other plugin/array/function structure I guess.

I can paste in a copy paste from one of my projects (see below) but without a specific problem or use case a bit hard to help.


fuel.controller.InvoiceController = jqx.createController(fuel.controller.BaseFuelController, {
	
	init: function(initObj){
		this._super(initObj);
	},

	add_edit : function(initObj){
		fuel.controller.BaseFuelController.prototype.add_edit.call(this);
		
		var new_id = 0;
		
		// Check for existing new item lines
		check_existing_new();
		
		// Calc totals and display
		adjust_totals_taxes();
		
		// Symbols available
		var symbols = $.parseJSON(initObj.currency_symbols);
		
		// Current symbol used
		var currency_symbol = $('#symbol').html();
		
		// Setting, show/hide of recurring timing info/fields
		if ($('#scheduled_no').is(':checked'))
		{
			$('#scheduledOptionsWrapper').hide();
		}
		else
		{
			$('#nextScheduledDateWrapper').hide();
		}
		
		$('#scheduled_yes').click(function(){
			$('#scheduledOptionsWrapper').show();
		});
		$('#scheduled_no').click(function(){
			$('#scheduledOptionsWrapper').hide();
		});
		$('#displayNextScheduledDate').click(function(){
			$('#nextScheduledDateWrapper').toggle();
		});
		
		// Initialise growing of textareas
		$('textarea').autoResize();
		
		// Remove an existing line
		$('.delete-item').live('click', function(){
			$(this).parent().parent().remove();
			adjust_totals_taxes();
			return false;
		});
		
		// Change of currency, change the symbol
		$('#currency').change(function(){
			currency_symbol = symbols[$(this).val()];

			$('span.symbol').html(currency_symbol);
			$('#symbol').html(currency_symbol);
			$('#totalCurrency').html($(this).val());
		});
		
		// Listners
		$('#tax').live('keyup', function(){adjust_totals_taxes()});
		$('.qty').live('keyup', function(){adjust_totals_taxes()});
		$('.cost').live('keyup', function(){adjust_totals_taxes()});
		$('.taxable').live('click', function(){adjust_totals_taxes()});
		$('#addItem').click(function(){add_clone();return false;});
		
		function adjust_totals_taxes()
		{
			// Tax field display
			normalise_tax_display();
			
			// Format to 2 dp
			var format_price = function(price)
			{
		  		return price.toFixed(2);
			}
			
			// Adjust the summary
			var adjust_summary = function(sub_total, tax_total, payment_total)
			{
		 		var total = sub_total + tax_total;
				
				if ( ! isNaN(payment_total))
				{
					var balance = total - payment_total;
					$('#balance').html(format_price(balance));
				}
				
				$('#subTotal').html(format_price(sub_total));
				$('#taxTotal').html(format_price(tax_total));
				$('#total').html(format_price(total));
			}
			
			var i = 0;
			var tax = $('#tax').val();
			var sub_total = 0;
			var tax_total = 0;
			var payment_total = parseFloat($('#totalPayments').html());

			// Calc invoice line values
			$('.line-item').not("#templateContainer").each(function(index, element)
			{
				i++;

				// Suck the DOM
				var quantity = $(this).find('input.qty').val();
				var cost     = $(this).find('input.cost').val();
				var amt_span = $(this).find('span.amount');
				var taxable  = $(this).find('input.taxable').is(':checked');
				
				// Calc line amount
				var amount = parseFloat(quantity) * parseFloat(cost);
				
				if (isNaN(amount)) amount = 0;
				
				// Update display
				amt_span.html(format_price(amount));
			
				// Calc totals
				sub_total += amount;
			  	
				// Calc tax for line if applies
				if (taxable) tax_total += (amount * parseFloat(tax));
			});
			
			// Update totals display
			adjust_summary(sub_total, tax_total, payment_total);
			
			// No lines showing
			if ( ! i) add_clone();
		}
		
		function normalise_tax_display()
		{
			// Find all the checked tax boxes that aren't in a tr#templateContainer (skip the template)
			if ( ! $('input.taxable:checked').parent().parent().not('tr#templateContainer').length)
			{
				$('#taxField').hide();
				$('#taxSummary').hide();
			}
			else
			{
				$('#taxField').show();
				$('#taxSummary').show();
			}
		}
		
		// Check if there is already new item lines
		function check_existing_new()
		{
			var mi = $('.jq-id').last();
			max_id = (parseInt(mi.val()));
			new_id = (isNaN(max_id)) ? 0 : max_id;
		}
		
		// Clone items template
		function add_clone()
		{
			// Increment added id's
			new_id++;

			// Clone the template and mod the class/id of it's <tr>
			var clone = $('#templateContainer').clone().removeClass('hidden').removeAttr('id').appendTo('#fuelCrmItems');
			
			// Swap out all the repid (replace id) for an increment to keep the _POST array normalised
			clone.html(clone.html().replace(/repid/gi, new_id));
		}
	}
});

That's a direct c & p from a project of mine. No doubt has little relevance but it's an example of how you can extend the base edit_add method from jqx in your own fuel module.

If you've got a specific task to achieve with jqx I might be able to help more.

pierlo · April 2012

thanks, but what about how to actually assign this from the model configuration? ie, what about 'js_controller' ? http://www.getfuelcms.com/user_guide/modules/simple

Lance · April 2012

You mean module (not model) config right?

The above I have in an advanced module and I include the above jqx in the module config simply with:


js_controller' => 'InvoiceController',

InvoiceController lives in modules/module_name/assets/js/fuel/controller

pierlo · April 2012

yeah sorry, I meant module there!

cool, i think i'm starting to grasp it now... In case I have more questions i'll post them here. In the meantime, thanks a lot dude!

admin · April 2012

Hey Peirlo,

We are currently working an updated user guide and will have some additional notes on jQX and javascript use in general in there. We have also discussed the idea of adding comments to the documentation but if we do, it won't be until after the next version of the documentation.

Howdy, Stranger!

Categories

Advanced FuelCMS Request: JQX for the rest of us!

Comments