How to make this to module pattern

[jemz]

can I ask some help how can I create module pattern with jquery.ajax

 $(function(){
 
     $('#btn1').click(function(e) {
                e.preventDefault();
                var s = $('#theform1').serialize();


                $.ajax({
                    type:'post',
                    dataType:'json',
                    url:'tomyserver.php',
                    data:s,
                    success:function(data){
                          //do something with data
                    }
                });
             });
             
             
             
             $('#btn2').click(function(e) {
                e.preventDefault();
                var s = $('#theform2').serialize();


                $.ajax({
                    type:'post',
                    dataType:'json',
                    url:'toanotherfile.php',
                    data:s,
                    success:function(data){
                          //do something with data
                    }
                });
             });
});             

Thank you in advance.

[WolfShade]

Could you please be more specific? I do not understand your query.

V/r,

[Dormilich]

I see no need for the Module Pattern here. a function would suffice.

function submitRequest(url, success)
{
    return function (evt) {
        var s = $(this.form).serialize();
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: url,
            data: s,
        }).done(success);
    };
}

[Lokesh]

@Dormilich is right. There is no need for module pattern rather defining methods for common code will suffice your need.

On other side, if you want to make things nice with few of the recommended aspects of javascript then i can help you little with what all i have learnt from fellow colleagues.

• Make use of namespace to bind everything to a single context

   var App = App || {};
  

• Always pass context to the self invoking functions

     (function($, window, document) {
               
     })(jQuery, window, document);
  

Let’s write your code in a more structured way -

    var App = App || {};

    // common code for ajax call handling
    (function($) {
        App.ajax = function(args) {
            return function() {
                var s = $(this.form).serialize();
                $.ajax({
                    type: 'post',
                    dataType: 'json',
                    url: url,
                    data: s,
                }).done(success);
            };
        };
    })(jQuery);

    (function($) {
        App.project = {
            btnHandler1: "#btn1",
            btnHandler2: "#btn2",
            bindEvents: function() {
                var context = this;
                $(handler1).on('click', function() {
                    App.ajax({
                        url: "",
                        callback: context.success()
                    });
                });
                $(handler2).on('click', function() {
                    App.ajax({
                        url: "",
                        callback: context.success()
                    });
                });
            },
            success: function() {
                // ajax success callback
            },
            init: function() {
                var context = this;
                this.bindEvents();
            }
        }
    })(jQuery);

    // document ready
    (function($) {
        App.project.init();
    })(jQuery);

Not sure, if i detailed these things in a manner which you can easily understand. May be someone with more experience in this forum will make improvements wherever necessary.

You can also have a look at this blog post for initial understanding https://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/

Best,
~ LY

[jemz]

@Dormilich @Lokesh

Thank you I will try your solution.