jQuery. I'm the sole developer on a "rails monolith" (254 tables, 540 models/classes, 4 years old), with enterprise-like architecture (ecommerce, event ticket sales, booking engine, access control, etc) and I'm positive the only way I'm able handle it all is because I stick to basic jquery. My secrets: - The rails-ujs adapter - $(document).on('event', '.element', ..) is fantastic. Never debug events ever again - sele…
Thank you for this comment. Several things there that I will look into! If you don't mind, could you elaborate a bit on the following: > - $(document).on('event', '.element', ..) is fantastic. Never debug events ever again > - a single javascript function that accepts a DOM element (body, a modal, section) and initializes all the elements the app knows of (selectize elements, date/time pickers, etc) inside that conta…
Simple example:
$(document).on 'ajax:success', '.guest-form', ->
notify 'success', 'Guest updated.'
$(@).parents('.modal').modal 'hide'
$(document).ajaxError (event, jqxhr, settings, thrownError) ->
handle_ajax_error(event, jqxhr)
@handle_ajax_error = (error, xhr) ->
if xhr.status is 422
error = JSON.parse(xhr.responseText)['errors']
notify 'error', error
else if xhr.status is 500
notify 'error', 'Error communicating with the server. We have been notified.'
if xhr.status is 401
notify 'warning', 'Session has expired. Redirecting to login...'
window.location = '/login'
if xhr.status is 403
window.location = '/access-denied'
So if you load in content via AJAX (I do this a lot for table views of data and the user wants to see a single record), rather than go to a separate page, I do an ajax call, put the result into a Twitter bootstrap modal, show the modal, and when the bs.modal.shown event fires, that "single javascript function" with the modal as the parameter is called, and it initializes all the javascript needed for that particular DOM container.Example:
$(document).on 'shown.bs.modal', 'a[data-toggle="tab"]', (e) ->
$modal_body = $( $(e.target).attr('href') )
general_init $modal_body
The general_init function will initialize all my selectize elements (among other things) as such: general_init = ($container) ->
add_selectize $container.find('input.membership-plan-select'), $.extend(true, {}, Selects.MembershipPlanOptions)
So when writing forms, lets say to create a new "Event Ticket" I simply plop in a text field with a class of "guest-select" and I instantly have an AJAX powered search field to find/create a guest to assign that ticket to.