How to write one javascript module, that can be adapted for slightly different use cases?

Question

I'm creating a JavaScript module which, when a (next or previous) button is clicked at the bottom of a modal, the current modal (4 in total) submits the data as an AJAX request, and then opens the next modal.

However, as you can see the code within each sub-module is almost identical (profile, details...). The only changes would be the '$modal' variable and the two ajax requests (one for GET and the other for POST).

I have attempted to use the Prototypal pattern (for my first time), and this did not work. Any ideas of a solution? Thanks

var application = (function() {

    // cache DOM
    var $modals = $('.modals');
    var $buttons = $modals.find('.form_buttons');

    function openModal() {
        var modalId = $(this).attr('data-modal');
        // Don't worry about this part, I still have to write the modal change
        console.log(modalId);
    }


    // Profile
    profile = (function() {
        // cache DOM
        var $modal = $modals.find('#modal_one');
        // bind events
        $modal.on('click', 'button.submit_button', submit);
        $modal.on('click', 'button.previous_button', submit);

        function submit() {
            $.ajax({})
                .done(function() {
                    openModal.call(this);
                });
        }
    })();

    // Details
    details = (function() {
        // cache DOM
        var $modal = $modals.find('#modal_two');
        // bind events
        $modal.on('click', 'button.submit_button', submit);
        $modal.on('click', 'button.previous_button', submit);

        function submit() {
            $.ajax({})
                .done(function() {
                    openModal.call(this);
                });
        }
    })();

    // Education
    education = (function() {
        // cache DOM
        var $modal = $modals.find('#modal_three');
        // bind events
        $modal.on('click', 'button.submit_button', submit);
        $modal.on('click', 'button.previous_button', submit);

        function submit() {
            $.ajax({})
                .done(function() {
                    openModal.call(this);
                });
        }
    })();

    // Employment
    employment = (function() {
        // cache DOM
        var $modal = $modals.find('#modal_four');
        // bind events
        $modal.on('click', 'button.submit_button', submit);
        $modal.on('click', 'button.previous_button', submit);

        function submit() {
            $.ajax({})
                .done(function() {
                    openModal.call(this);
                });
        }
    })();

})();

Answer 1

Untested

var application = (function () {

  // cache DOM
  var $modals = $('.modals');
  var $buttons = $modals.find('.form_buttons');

  function fn($modal, ajaxObj) {
    // bind events
    $modal.on('click', 'button.submit_button', submit);
    $modal.on('click', 'button.previous_button', submit);

    function openModal() {
      var modalId = $modal.attr('data-modal');
      // Don't worry about this part, I still have to write the modal change
      console.log(modalId);
    }

    function submit() {
      $.ajax(ajaxObj)
        .done(openModal);
    }
  }

  fn($modals.find('#modal_one'), { /* obj to pass to ajax call for modal_one */ });
  fn($modals.find('#modal_two'), { /* obj to pass to ajax call for modal_two */ });
  //... etc...

  //alternatively you could probably just loop '$modals' and call 'fn' for each of them. 
  //
  //Also, brought 'openModal' into 'fn' which makes it a bit more maintainable imo. This is not
  //required though. Instead you could just have it side outside of 'fn' and call using
  //openModal.call($modal) or better: just pass $modal as a regular parameter without using 'this'. 


})();

Answer 2

You can pass to your method the "suffix" of the tab name.

add to your form an attribute "rel" with the variable and bind that event outside your object

var application = (function() {

    // cache DOM
    var $modals = $('.modals');
    var $buttons = $modals.find('.form_buttons');

    function openModal() {
        var modalId = $(this).attr('data-modal');
        // Don't worry about this part, I still have to write the modal change
        console.log(modalId);
    }
     // Profile
    modalChange = function(tabName) {
        // cache DOM
        var $modal = $modals.find('#modal_' + tabName);
        // bind events
        $modal.on('click', 'button.submit_button', submit);
        $modal.on('click', 'button.previous_button', submit);
    };
})();

function submit() {
    $.ajax({})
            .done(function() {
        openModal.call(application.modalChange( $(this).attr("rel") );
    });
}