Advanced FuelCMS Request: JQX for the rest of us!

edited April 2012 in Feature Requests
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!

Comments

  • edited 8:35AM
    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.
  • edited 8:35AM
    well i guess how to use it for advanced modules in the fuel backend... but anything helps, really!
  • edited 8:35AM
    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.
  • edited 8:35AM
    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
  • edited 8:35AM
    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
  • edited 8:35AM
    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!
  • edited 8:35AM
    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.
Sign In or Register to comment.