Почему laravel делает несколько ajax запросов к серверу на клик по кнопке?

Question

[Виктор Насонов]

laravel 5.7 использую также semantic ui и jquery все компилирую с помощью yarn в один app.js файл. Странное поведение на клике по кнопке. Выполняется несколько запросов ajax вместо одного. Нажал на кнопку один раз - два запроса ajax. нажал второй раз на ту же кнопку уже 4. нажал третий 6 раз. Куда копать?

Comments

[Максим Федоров]

в сторону кода

[Максим Федоров]

какого именно? в сторону того, который работает с вашим кликом

[Виктор Насонов]

Максим Федоров,

function createCustomProfile()
{
	app = "createCustomProfile";
	hideHomePage();
	$.ajax({
		url: '/getHomeData',
		type: 'post',
		data: {_token: $('meta[name="csrf-token"]').attr('content'), mode: 'createCustomProfile'},
		dataType: 'JSON',
		success: function (data) {
			console.log(data);
			avatar_upload_number = data.avatar_upload_number;
			$("#app").html('<h2 class="ui teal header">\
				<div class="content">\
					Настройки настраиваемого профиля\
				</div>\
				</h2>\
				<form class="ui large form" id="settingsForm" method="post" enctype="multipart/form-data">\
					{{ csrf_field() }}\
					<div class="ui segment">\
						<h3>Имя</h3>\
						<div class="field">\
							<div class="ui left icon input">\
								<i class="user icon"></i>\
								<input type="text" name="name" placeholder="Имя профиля">\
							</div>\
						</div>\
						<h3>Фамилия</h3>\
						<div class="field">\
							<div class="ui left icon input">\
								<i class="user icon"></i>\
								<input type="text" name="fname" placeholder="Фамилия профиля">\
							</div>\
						</div>\
						<h3>Ник</h3>\
						<div class="field">\
							<div class="ui left icon input">\
								<i class="user icon"></i>\
								<input type="text" name="nick" placeholder="Ник профиля">\
							</div>\
						</div>\
						<h2 class="ui teal header">\
							<div class="content">\
								Загрузите аватарку(можно несколько)\
							</div>\
						</h2>\
						<div class="ui segment" id="avatars">\
							<div class="avatar1">\
								<input id="avatar1" type="file" name="avatar1" style="display: none;" />\
								<div class="ui horizontal divider">Аватарка 1</div>\
								<div class="ui small image"><img id="avatarImage1" src="/images/avatar_upload.png"></div>\
								<div class="ui basic icon buttons">\
									<button class="ui button" onclick="addAvatar(' + avatar_upload_number + ');">Еще аватарка<i class="right arrow icon"></i></button>\
									<button id="buttonAvatar1" class="ui button" type="button">Загрузить<i class="upload icon"></i></button>\
								</div>\
							</div>\
						</div>\
						<br><button class="ui fluid large teal submit button" onclick="checkSettings(2);">Сохранить</button>\
						<br><button class="ui fluid large teal button" onclick="refresh(0);">Отменить</button>\
						<div class="ui error message"></div>\
				</form>\
			');
			$('.ui.form').form({
				fields: {
				name: {
				  identifier  : 'name',
				  rules: [
					{
					  type   : 'empty',
					  prompt : 'Пожалуйста введите имя'
					},
					{
					  type   : 'length[1]',
					  prompt : 'Ваше имя должно быть длиной от 1 символов'
					}
				  ]
				},
				fname: {
				  identifier  : 'fname',
				  rules: [
					{
					  type   : 'empty',
					  prompt : 'Пожалуйста введите фамилию'
					},
					{
					  type   : 'length[1]',
					  prompt : 'Ваша фамилия должна быть длиной от 1 символов'
					}
				  ]
				},
				nick: {
				  identifier  : 'nick',
				  rules: [
					{
					  type   : 'empty',
					  prompt : 'Пожалуйста введите ник'
					},
					{
					  type   : 'length[1]',
					  prompt : 'Ваш ник должен быть длиной от 1 символов'
					}
				  ]
				},
				}
			});
			$('[name=name]').val(data.name);
			$('[name=fname]').val(data.fname);
			$('[name=nick]').val(data.nick);
			$("#avatar1").change(function() {
				if (checkFile($('#avatar1')[0].files[0]))
				{
					if ($('#avatar1')[0].files[0]) {
						reader = new FileReader();
						reader.onload = function(e) {
							$('#avatarImage1').attr('src', e.target.result);
							avatars[1] = $('#avatar1')[0].files[0];
						}
						reader.readAsDataURL($('#avatar1')[0].files[0]);
					}
				}
			});
			$("#buttonAvatar1").on('click', function() {
				$("#avatar1").trigger('click');
			});
		}
	});

function checkSettings(mode)
{
	if (mode == 0)
	{
		$("#settingsForm").on('submit', function (e) {   
			e.preventDefault();
			
			var form = this;
			
			if( $('.ui.form').form('is valid'))
			{
				$.ajax({
					url: '/getHomeData',
					type: 'post',
					data: {_token: $('meta[name="csrf-token"]').attr('content'), mode:'anonymousCreate', avatar: $("input[name=avatar]:checked").val()},
					dataType: 'JSON',
					success: function (data) { 
						if (data.state == 'settings_ok')
						{
							hideApp();
							$.jGrowl('Настройки сохранены.', { theme: 'Right', life:3000 });
							showMenu(1);
							showHomePage();
							fillMyHomePage();
						} else
						{
							$.jGrowl(data.state, { theme: 'Right', life:3000 });
						}
					}
				});
			}
		});
	} else if (mode == 1)
	{
		$("#settingsForm").on('submit', function (e) {   
			e.preventDefault();
			
			var form = this;
			
			if( $('.ui.form').form('is valid'))
			{
				$.ajax({
					url: '/getHomeData',
					type: 'post',
					data: {_token: $('meta[name="csrf-token"]').attr('content'), mode:'anonymousSave', avatar: $("input[name=avatar]:checked").val()},
					dataType: 'JSON',
					success: function (data) { 
						if (data.state == 'settings_ok')
						{
							hideApp();
							$.jGrowl('Настройки сохранены.', { theme: 'Right', life:3000 });
							showMenu(1);
							showHomePage();
							fillMyHomePage();
						} else
						{
							$.jGrowl(data.state, { theme: 'Right', life:3000 });
						}
					}
				});
			}
		});
	} else if (mode == 2)
	{
		$("#settingsForm").on('submit', function (e) {   
			e.preventDefault();
			
			var form = this;
			
			if( $('.ui.form').form('is valid'))
			{
				//files = new Array();
				var fd = new FormData();
				fd.append('mode', "customProfileCreate");
				fd.append('name', $("input[name=name]").val());
				fd.append('fname', $("input[name=fname]").val());
				fd.append('nick', $("input[name=nick]").val());
				fd.append('filesCount', avatar_upload_number);
				for (i=1;i<avatar_upload_number;i++)
				{
					//files.push(avatars[i]);
					fd.append('avatar'+i , avatars[i]);
				}
				//fd.append('files', files);
				//console.log(fd);
				//console.log(files);
				$.ajax({
					url: '/getHomeData',
					type: 'post',
					/*data: {mode: "customProfileCreate", name: $("input[name=name]").val(), fname: $("input[name=fname]").val(), nick: $("input[name=nick]").val(), filesCount: avatar_upload_number, fd},*/
					data: fd,
					processData: false,
					contentType: false,
					dataType: 'json',
					headers: {
						'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					},
					success: function (data) { 
						console.log(data);
						/*if (data.state == 'settings_ok')
						{
							hideApp();
							$.jGrowl('Настройки сохранены.', { theme: 'Right', life:3000 });
							showMenu(1);
							showHomePage();
							fillMyHomePage();
						} else
						{
							$.jGrowl(data.state, { theme: 'Right', life:3000 });
						}*/
					},
					error: function (jqXHR, exception)
					{
						var msg = '';
						if (jqXHR.status === 0) {
							msg = 'Not connect.\n Verify Network.';
						} else if (jqXHR.status == 404) {
							msg = 'Requested page not found. [404]';
						} else if (jqXHR.status == 500) {
							msg = 'Internal Server Error [500].';
						} else if (exception === 'parsererror') {
							msg = 'Requested JSON parse failed.';
						} else if (exception === 'timeout') {
							msg = 'Time out error.';
						} else if (exception === 'abort') {
							msg = 'Ajax request aborted.';
						} else {
							msg = 'Uncaught Error.\n' + jqXHR.responseText;
						}
						console.log(msg);
					},
				});
			}
		});
	}
}

извените что много кода, просто времени нехватка..

на клик по кнопке сохранить(checkSettings(2)) происходит несколько запросов ajax.

[Виктор Насонов]

пробовал сделать ограничение и на клиенте и на сервере по времени добавления, например раз в минуту, но в одну секунду добавляется 2 -3 записи в базу.

[Виктор Насонов]

код работает под laravel homestead на локальной машине.
в интернете наталкивался на похожую чем то проблему там написано что на сервере работает все нормально а на локальной не пашет. но там маленько не то.
может что нибудь связано с неправильной компиляцией jquery и она запускает по клику несколько раз функцию. проверил после клика сколько событий на клике - событие всегда одно.

[Виктор Насонов]

решил проблему на клиенте - добавил переменную createOneCustomProfile устанавливаю ее в нужном месте в false и if (!createOneCustomProfile ) то делаю ajax запрос, потом делаю createOneCustomProfile = false в необходимом месте и все.

понимаю что костыль, но в чем проблема не могу понять...
если кто поможет тому респект!

[JhaoDa]

Тэг ларавел тут при чём?

[DevMan]

лара не отправляет аякс. от слова совсем.

[Виктор Насонов]

JhaoDa, хотя бы из за этого {{ csrf_field() }}