https://www.quierylamotte.fr/include/js/jquery/jquery.ajaxifier.js

1(function ($) {
2    'use strict';
3
4    var JqueryAjaxifier = function (inst, options) {
5        this.inst = $(inst);
6        this.o = options;
7        this.href = '';
8
9        // définition des options
10        this.o.target = (this.inst.data('target') ? this.inst.data('target') : this.o.target);
11        this.target = (this.o.target === null ? this.inst.next() : $(this.o.target));
12        this.o.selectorAjaxifier = (this.inst.data('selectorAjaxifier') ? this.inst.data('selectorAjaxifier') : this.o.selectorAjaxifier);
13        this.o.selectorAnchor = (this.inst.data('selectorAnchor') ? this.inst.data('selectorAnchor') : this.o.selectorAnchor);
14
15        // définition du type d'événement
16        this.o.event = (this.inst.data('event') ? this.inst.data('event') : this.o.event);
17        if (this.o.event === null) {
18            if (this.inst.prop('nodeName') === 'SELECT') {
19                this.o.event = 'change';
20            } else if (this.inst.is('form')) {
21                this.o.event = 'submit';
22            }
23        }
24        this.o.event = (this.o.event === null ? 'click' : this.o.event);
25        this.o.mode = (window.location.href.indexOf("cms_pseudo.php") >= 0 ? 'OFF_' : 'ON_');
26
27
28        $(this.inst).on(this.o.event, function(e) {
29                e.preventDefault();
30
31                this.ajaxify();
32
33                return false;
34            }.bind(this)
35        );
36
37        return this;
38    };
39
40    $.extend(JqueryAjaxifier.prototype, {
41        setHistory: function(data, url) {
42            if (window.location != url) {
43                window.history.pushState(data,'', url);
44            }
45        },
46        getData: function () {
47            var data = {};
48            let search = '';
49
50            if (this.inst.is('form')) {
51                data = this.inst.serialize();
52                this.href = this.inst.attr('action') + (this.inst.attr('action').indexOf('?') > -1 ? '&' : '?') + data;
53            } else if (this.inst.is('button') || this.inst.is('a') || (this.inst.is('select') && this.inst.find(':selected').data('href') != '' && typeof this.inst.find(':selected').data('href') != 'undefined')) {
54                if (this.inst.is('button')) {
55                  const a = document.createElement('a');
56                  a.href = this.inst.data('href') ? this.inst.data('href') : '#';
57                  search = a.search.substring(1);
58                  this.href = a.href;
59                  $.each(this.inst.data(), function(k, v) {
60                    data[k] = v;
61                  });
62                } else if (this.inst.is('select')) {
63                    var a = document.createElement('a');
64                    a.href = this.inst.find(':selected').data('href');
65                    search = a.search.substring(1);
66                    this.href = a.href;
67                } else {
68                    search = this.inst[0].search.substring(1);
69                    $.each(this.inst.data(), function(k, v) {
70                        data[k] = v;
71                    });
72                    this.href = this.inst.attr('href');
73                    console.log(this.href);
74                }
75
76                if (search !== '') {
77                    $.each(search.replace(/\+/g, ' ').split('&'), function (j, value) {
78                        var param = value.split('='),
79                            key = decodeURIComponent(param[0]),
80                            val = decodeURIComponent(param[1]);
81
82
83                        if (key.indexOf('[') !== -1) {
84                            var keyTab = key.split('[');
85                            if (data[keyTab[0]]) {
86                                if (keyTab[1] == ']') {
87                                    data[keyTab[0]].push(val);
88                                } else if (keyTab[1].length > 1) {
89                                    data[keyTab[0]][keyTab[1].replace(']', '')] = val;
90                                }
91                            } else if (keyTab[1] == ']') {
92                                data[keyTab[0]] = [val];
93                            } else if (keyTab[1].length > 1) {
94                                var _a = [];
95                               _a[keyTab[1].replace(']', '')] = val;
96                                data[keyTab[0]] = _a;
97                            }
98                        } else {
99                            data[key] = val;
100                        }
101                    });
102                }
103            } else if (this.inst.is('select')) {
104                var form = this.inst.closest('form');
105                if (form) {
106                    data = form.serializeArray()
107                }
108            }
109
110
111            return data;
112        },
113
114        ajaxify: function() {
115            this.o.onAjaxify.call(this);
116
117            if (this.o.urlWritting) {
118                var data = this.getData();
119                this.setHistory(data, this.href)
120            }
121
122            // Ajout du contexte BO / FO
123            if (typeof data === 'string' || data instanceof String) {
124                var param = data.replace(/\+/g, ' ').split('&');
125                param.push("mode=" + this.o.mode);

126                data = param.join('&');
127            }else{
128              data.mode = this.o.mode;
129            }
130            $.ajax({
131                    url: this.o.ajax,
132                    data: data,
133                    type: this.o.method
134                }
135            ).done(function(data) {
136                    if (this.o.clean) {
137                        this.target.empty();
138                    }
139                    this.target.append(data);
140
141                    if (this.o.selectorAjaxifier) {
142                        var options = this.o;
143                        options.event = null;
144                        $(this.o.selectorAjaxifier, this.target).jqueryAjaxifier(options);
145                    }
146
147                    if (this.o.selectorAnchor && $(this.o.selectorAnchor).length > 0) {
148                        $('html, body').animate({scrollTop:$(this.o.selectorAnchor).offset().top}, 'slow');
149                    }
150
151                    this.o.onAjaxified.call(this);
152                }.bind(this)
153            );
154        },
155    });
156
157    $.instancifyJqueryPluginA = function (inst, options) {
158        return  inst.JqueryAjaxifier || (inst.JqueryAjaxifier = new JqueryAjaxifier(inst, options));
159    };
160
161
162    $.fn.jqueryAjaxifier = function (options) {
163        var defaultOptions = {
164                method: 'POST', // POST ou GET
165                ajax: null, // Fichier contenant le contenu à loader
166                target: null, // Selector jquery pour la target (ou le contenu va être loader)
167                selectorAjaxifier: null, // relance l'ajaxifier avec ces options sur ce selector
168                selectorAnchor: null, // Si rempli après ajaxify aller à l'ancre
169                event: null, // Possibiliter de forcer sur quel événement on ajaxifie
170                clean: true, // Vide la target de son contenu
171                urlWritting: true, //Réécrie l'url
172                mode: 'OFF_',
173                onAjaxify: function() {},
174                onAjaxified: function() {},
175            },
176            obj = {}
177        ;
178
179        // Si collection non vide
180        if (this.length) {
181            this.each(function () {
182                //Crée une nouvelle instance
183                obj = $.instancifyJqueryPluginA(this, $.extend({}, defaultOptions, options));
184            });
185        }
186
187        // On retourne la collection, ou directement l'instance de l'objet si un seul résultat est renvoyé
188        return this.length === 1 && obj ? obj : this;
189    };
190}(jQuery));