https://nipponhyojun.co.jp/assets/js/my.js

1$(function(){
2	//ログインモーダル
3	$(document).on("click",".modalLayout-login .btn-modalLogin",function(){
4		let $form = $(this).closest("form");
5		$.ajax({
6			url: '/api/login',
7			dataType: 'json',
8			type:'post',
9			data: $form.serialize(),
10			success: function(data) {
11				if(data.success){
12					location.reload();
13				}
14				else {
15					$$$.dialog.open({
16						title: '<div class="tCenter"><strong>IDまたはパスワードが違います。</strong></div>',
17						// txt: 'sample text',
18						btns: [{
19								name: 'OK',
20								class: 'btn btn-yes',
21								afterClose: function() {
22								},
23							}
24						]
25					})
26				}
27			}
28		});
29	});
30
31});
32
33
34//
35// 2022/02/08 阿部追記
36//
37/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
38* ajaxMore
39━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
40// 元の 「 ajaxMore 」 のモジュール（菊池さん作成のもの）
41
42/*************************************************************************************
43* ajaxMore
44*************************************************************************************/
45const ajax_more_init = function() {
46	$(this).each(function(index, el) {
47		const _$root = $(this);
48		const _$btn = $(this).find('[data-ajax-more-btn]');
49
50		const _option = $(this).data('ajax-more');
51
52		if (_option.page * _option.per +  _option.initialCount >= _option.total) {
53			_$btn.remove();
54			_$root.trigger('ajaxMore.allShow', [_option.page, _option.page * _option.per +  _option.initialCount, _option.total]);
55		}
56
57		_$root.find('[data-ajax-more-btn]').on('click', function(event) {
58			ajax_more_load.call(this, _option);
59		});
60
61		_$root.trigger('ajaxMore.init', [_option.page, _option.page * _option.per +  _option.initialCount, _option.total]);
62	});
63}
64
65const ajax_more_load = function(_option){
66	const _$root = $(this).closest('[data-ajax-more]');
67	const _$list = $(this).closest('[data-ajax-more]').find('[data-ajax-more-list]');
68	const _$btn = $(this);
69
70	$.ajax({
71		url: _option.url,
72		type: 'GET',
73		dataType: 'html',
74		data: {
75			initialCount: _option.initialCount,
76			per: _option.per,
77			total: _option.total,
78			page: _option.page,
79			customData: _option.data
80		},
81	})
82	.done(function(res) {
83		_option.page++;
84		_$list.append(res)
85
86		_$root.trigger('ajaxMore.show', [_option.page, _option.page * _option.per +  _option.initialCount, _option.total])
87
88		if ((_option.page-1) * _option.per  +  _option.initialCount  >= _option.total) {
89			_$btn.remove();
90			_$root.trigger('ajaxMore.allShow', [_option.page, _option.page * _option.per  +  _option.initialCount, _option.total]);
91		}
92
93	})
94	.fail(function() {
95		// console.log("error");
96	})
97	.always(function() {
98		// console.log("complete");
99	});
100}
101
102// module.exports = {
103// 	init: _init,
104// };
105
106
107//
108// 使用方法として、「common.js」で以下の記述で上記のモジュールを呼び出して
109// $$$.ajaxMore = require('./_modules/_ajaxMore');
110//
111// その後「common.js」内で、以下の記述を追記して使っています。
112//
113$(window).on('load', function(event) {
114	ajax_more_init.call($('[data-ajax-more]'))
115	// $$$.ajaxMore.init.call($('[data-ajax-more]'))
116});