Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » jQuery » Как правильно адаптировать кнопки из родных jqui окон в magnific popup?

Как правильно адаптировать кнопки из родных jqui окон в magnific popup?


     05.06.2020    mfp, jquery ui    jQuery, Общие вопросы по PHP    124

вопрос
Пытаюсь установить magnific на окно с отправкой жалобы.
Вот что получается:

function AddComplaint( id, action ){

	var b = {};
	var mailpromt = '';

	if(dle_group == 5) {
		mailpromt = dle_mail+"<div class='text-secondary'><input type=\"text\" name=\"dle-promt-mail\" id=\"dle-promt-mail\" class=\"form-control\" style=\"width:100%;\" value=\"\"></div>";
	}		

	$.get(dle_root + "engine/ajax/controller.php?mod=complaint", { id: id,  text: response, action: action, mail: entermail, user_hash: dle_login_hash }, function(data){
		if (data == 'ok') { $.toast(dle_p_send_ok, dle_info); } else { $.toast(data, dle_info); }

	$.magnificPopup.open({
	items: {
		src: '<div style="width:500px;position:relative;margin:0 auto;" class="bg-dark p-3"><div class="chb" style="font-size: 0.9rem;text-transform: uppercase;font-weight: 400;" class="text-light">'+dle_c_title+'</div><div class="mt-3 text-secondary f90" style="text-transform:none;">'+dle_complaint+'</div><div class="mt-3"><textarea name="dle-promt-text" id="dle-promt-text" class="form-control f90 mb-3" style="width:100%;height:100px;"></textarea>'+mailpromt+'</div><button type="button" id="jsend">Отправить</button></div>'
	},
	type: 'inline',
	mainClass: 'mfp-fade',
	removalDelay: 170,
	overflowY: 'hide',
	closeOnBgClick: false,
	showCloseBtn: true,	
	callbacks: {
	open: function() {	$('#dlepopup').show();
		$( "#jsend" ).click(function() {
			if ( $('#dle-promt-text').val().length < 1) {
			$('#dle-promt-text').addClass('ui-state-error');
			} else {
			var response = $('#dle-promt-text').val();
			var entermail = '';
			if ( $('#dle-promt-mail').val() ) {
				entermail = $('#dle-promt-mail').val();
			}
			$(this).dialog('close');
			$('#dlepopup').remove();
			$.post(dle_root + 'engine/ajax/controller.php?mod=complaint', { id: id,  text: response, action: action, mail: entermail, user_hash: dle_login_hash },
				function(data){
					if (data == 'ok') { $.toast(dle_p_send_ok, dle_info); } else { $.toast(data, dle_info); }
			});
			}
		});
		}
	}
	});	
	}, 'html');

};


Но не работает, не пойму что не так..
Кто знает, подскажите пожалуйста.
Думаю дело в $.get запросе, но не могу понять в чем именно

Ответа пока нет


15 комментариев

TeraMoune
Эксперт

TeraMoune - 5 июня 2020 09:01 -

А что в консоле пишет ?

Invokerlover
Юзер

Invokerlover - 5 июня 2020 09:32 -


Непонятная ошибка. Ни разу не сталкивался

TeraMoune
Эксперт

TeraMoune - 5 июня 2020 10:43 -

Цитата: Invokerlover
Непонятная ошибка. Ни разу не сталкивался

А Вы её хотя бы удосужились в переводчике банально перевести ? Там написано, что некая переменная save_last_viewed не определена, и забавное то, что она даже не часть функции. Разберитесь для начала, с ней, а уже потом будите думать о другой ошибке которая Вас уже ждёт и не дождётся, под названием (response не определена). Но как только переменная будет объявлена, то дальше еще две аналогичных.

Дальше, что такое у Вас в колбэке при открытии окна ?
$('#dlepopup').show(); Что Вы этим показываете ? В функции да и на странице я думаю нету уже данного объекта который был частью старой функции. Этот код уже по определению сорняк и хоть и не вызывает ошибки но и находиться ему там больше не нужно.

А затем Вы встретитесь с еще одной ошибкой, связанную с попыткой использовать $(this).dialog('close'); от плагина dialog без плагина dialog.

Строчкой ниже будет $('#dlepopup').remove(); закрытие того, чего не существует, это тоже сорняк.

Но это еще не всё, на этом моменте мы подошли к работающему скрипту, только есть одно но. Главный вопрос, зачем Вы выполняете $.get запрос перед выполнением кода $.magnificPopup.open({ ?

Invokerlover
Юзер

Invokerlover - 5 июня 2020 19:51 -

Благодарю, с save_last_viewed и response я разобрался.
$('#dlepopup').show(); - это я заменил на $.magnificPopup.close();

Главный вопрос, зачем Вы выполняете $.get запрос перед выполнением кода $.magnificPopup.open({ ?
- Тут я нашел как раз таки один и ваших советов(https://dle-faq.ru/faq/jquery/26130-kak-zamenit-okno-na-mgnific-popravit-ajax.html#comment-id-72839), опираясь на него я делал у себя.
Как быть с Get запросом?

TeraMoune
Эксперт

TeraMoune - 5 июня 2020 20:53 -

Ну тут нужно понимать есть два типа окон, первый когда нам заранее известен шаблон и он не слишком сложный и может быть прописан в одну строку в модуле мэджика в src:, как это сделано у Вас, и второй когда шаблон ну может быть весьма не простым и зависеть от разных факторов и настроек, вот во втором сперва идёт ajax запрос на получение этого шаблона, а уже затем результат ответа обрабатывается и если всё отлично то открываем окно и добавляем ответ в тот же src:

У Вас первый вариант.

Насчёт $.magnificPopup.close(); то он не нужен, модуль создаёт задний фон который блокирует взаимодействие с основным контентом, а от сюда и не возможность повторно вызвать функцию открытия окна. У модуля так же есть настройки позволяющие определить закрывать ли окно если будет произведён клик за пределами контента окна. Подробней о настройках читайте на сайте плагина.



P.S. $.magnificPopup.close(); как раз нужен в оставшемся запросе который уже отправляет жалобу, и при успешной отправке стоит закрывать таким образом окно.

Invokerlover
Юзер

Invokerlover - 5 июня 2020 21:33 -

Понял. Спасибо за помощь!
Только-только знакомлюсь с MFP

Invokerlover
Юзер

Invokerlover - 5 июня 2020 21:52 -

А как быть с окном подтверждений действий?
Оно работает немного не по тем принципам что мы обсуждали выше.

function DLEconfirm(message, title, callback){

	var b = {};

	b[dle_act_lang[1]] = function() { 
					$(this).dialog("close");
					$("#dlepopup").remove();						
			    };

	b[dle_act_lang[0]] = function() { 
					$(this).dialog("close");
					$("#dlepopup").remove();
					if( callback ) callback();					
				};

	$("#dlepopup").remove();

	$("body").append("<div id='dlepopup' class='dle-confirm' title='" + title + "' style='display:none'>"+ message +"</div>");

	$('#dlepopup').dialog({
		autoOpen: true,
		width: 500,
		resizable: false,
		dialogClass: "modalfixed dle-popup-confirm",
		buttons: b
	});

	$('.modalfixed.ui-dialog').css({position:"fixed"});
	$('#dlepopup').dialog( "option", "position", { my: "center", at: "center", of: window } );
};


Не совсем понимаю как и зачем работает условие
if( callback ) callback()

dj-avtosh
PHP-developer

dj-avtosh - 5 июня 2020 22:01 -

посмотрите тело метода callback.

ЯД: 41001679231462
Заказы в telegram (ремонт модулей, оптимизация нагрузок и т.п.): @blob42
В телегу писать сразу задачу и бюджет.

Invokerlover
Юзер

Invokerlover - 5 июня 2020 22:03 -

Вы имеете ввиду в mfp или в dle_js.js ?

dj-avtosh
PHP-developer

dj-avtosh - 5 июня 2020 22:22 -

имею ввиду тот файл, кусок из которого вы скинули в комменте.

ЯД: 41001679231462
Заказы в telegram (ремонт модулей, оптимизация нагрузок и т.п.): @blob42
В телегу писать сразу задачу и бюджет.

Invokerlover
Юзер

Invokerlover - 5 июня 2020 22:25 -

Это кусок из dle_js.js
А если ищу совпадения, То выдает всего 3 ответа
И большинство из них вот:

function DLEprompt(message, d, title, callback, allowempty){

	var b = {};

	b[dle_act_lang[3]] = function() { 
					$(this).dialog("close");						
			    };

	b[dle_act_lang[2]] = function() { 
					if ( !allowempty && $("#dle-promt-text").val().length < 1) {
						 $("#dle-promt-text").addClass('ui-state-error');
					} else {
						var response = $("#dle-promt-text").val()
						$(this).dialog("close");
						$("#dlepopup").remove();
						if( callback ) callback( response );	
					}				
				};

	$("#dlepopup").remove();

	$("body").append("<div id='dlepopup' class='dle-promt' title='" + title + "' style='display:none'>"+ message +"<br /><br /><input type='text' name='dle-promt-text' id='dle-promt-text' class='ui-widget-content ui-corner-all' style='width:97%;' value='" + d + "'/></div>");

	$('#dlepopup').dialog({
		autoOpen: true,
		width: 500,
		resizable: false,
		dialogClass: "modalfixed dle-popup-promt",
		buttons: b
	});

	$('.modalfixed.ui-dialog').css({position:"fixed"});
	$('#dlepopup').dialog( "option", "position", { my: "center", at: "center", of: window } );

	if (d.length > 0) {
		$("#dle-promt-text").select().focus();
	} else {
		$("#dle-promt-text").focus();
	}

};


грубо говоря, в файле dle_js.js нет самого метода

dj-avtosh
PHP-developer

dj-avtosh - 5 июня 2020 22:27 -

ну значит в другом месте где-то, поищите

ЯД: 41001679231462
Заказы в telegram (ремонт модулей, оптимизация нагрузок и т.п.): @blob42
В телегу писать сразу задачу и бюджет.

Invokerlover
Юзер

Invokerlover - 5 июня 2020 23:04 -

Разобрался, спасибо)

TeraMoune
Эксперт

TeraMoune - 6 июня 2020 12:51 -

Цитата: Invokerlover
Не совсем понимаю как и зачем работает условие
if( callback ) callback()

Сallback это параметр который содержит функцию которую стоит вызвать после нажатия на отмену. он не важен и не нужен в принципе. И не сработает если функция DLEprompt будет вызвана лишь с тремя параметрами.

Invokerlover
Юзер

Invokerlover - 6 июня 2020 16:57 -

А я уже его адаптировал под mfp, спасибо за помощь!

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх