Идентификатор в модальное окно - JavaScript, Ajax - Страница 2

agatin · 08.10.2018, 15:24

Цитата:

Сообщение от ADSoft

Код:

strip_tags()

В самую первую очередь это и сделал, но тэги вырезаются вместе со значением

Serge_Bliznykov · 08.10.2018, 15:41

погодите. стоп. этот пример только показывает, как получить id.
что с ним делать дальше - это ваше дело.
в моём примере я просто вывел его на форму.
Вы его можете, например, отправить на сервер (и там сформировать письмо и отправить).

вот это получение id:

Код:

		var myid=$(this).attr('id');

всё остальное - просто для наглядности.

например, отправить на сервер через AJAX.
например, методом post():

Код:

	$.post('mymailer.php', {action:'sendMailToAdmin', id4send : myid}, null, 'json').done(function(data, result, jqXHR){
				alert('Сервер сообщает, что письмо успешно отправлено');
		}).fail(function(jqXHR, result, error){
				alert('Произошла ошибка при получении или анализе ответа сервера: '+error.message+'\nПопробуйте обновить страницу и попробовать еще раз.');
		});
	});

agatin · 09.10.2018, 08:10

Цитата:

Сообщение от Serge_Bliznykov

погодите. стоп. этот пример только показывает, как получить id.
что с ним делать дальше - это ваше дело.
в моём примере я просто вывел его на форму.
Вы его можете, например, отправить на сервер (и там сформировать письмо и отправить).

вот это получение id:

Код:

		var myid=$(this).attr('id');

всё остальное - просто для наглядности.

например, отправить на сервер через AJAX.
например, методом post():

Код:

	$.post('mymailer.php', {action:'sendMailToAdmin', id4send : myid}, null, 'json').done(function(data, result, jqXHR){
				alert('Сервер сообщает, что письмо успешно отправлено');
		}).fail(function(jqXHR, result, error){
				alert('Произошла ошибка при получении или анализе ответа сервера: '+error.message+'\nПопробуйте обновить страницу и попробовать еще раз.');
		});
	});

Подскажите пожалуйста, а почему когда я пытаюсь вывести значение переменной myid, у меня выходит пустая строка?

Делаю так:
<script>
var myid=$(this).attr('id');
document.write(myid);
</script>

До AJAX мне как до луны пешком...

Serge_Bliznykov · 09.10.2018, 09:39

Цитата:

Сообщение от agatin

До AJAX мне как до луны пешком...

Это Вы зря. в jQuery уже всё сделано за Вас, Вам нужно только использовать готовый метод (я написал рабочий пример. только для него нужно добавить на сервер скрипт, который получит данные от клиента и всё заработает).

Цитата:

Сообщение от agatin

Делаю так:

Код:

<script>
   var myid=$(this).attr('id');
   document.write(myid);
</script>

это Вы делаете неправильно.
потому что здесь очень важно значение this
что это такое - почитайте. например, Методы объектов, this

дело в том, что когда Вы пишете this тут:

Код:

$('a[data-reveal-id]').live('click', function(e) {
...
		var myid=$(this).attr('id');
....
	});

, то this присваивается объекту, который вызвал этот метод - т.е. той ссылки a с аттрибутом data-reveal-id, на которой произведён click
и у этого объекта есть data-reveal-id и data-animation и id
и его можно получить.

а когда Вы пишете просто отдельный скрипт:

Код:

<script>
   var myid=$(this).attr('id');
   document.write(myid);
</script>

то он вызывается в самом документе и, разумеется, никакого отношения к вашим a href не имеет.
ну сами подумайте, вот вызвали Вы этот скрипт.
А какое значение он Вам должен вернуть? id чего?
Ведь никто ещё никуда не кликал. и кликнет или нет — неизвестно!
Вам нужно получать id, когда кликнут по ссылке?
Тогда, очевидно, что Вам нужно писать скрипт, который вызывается при клике.
И вот там уже будет объект, который и вызвал действие (на котором кликнули).

Вы лучше расскажите, какую задачу Вы пытаетесь решить.
Может быть, тогда вместе подумаем, как лучше организовать логику этого действия.

agatin · 09.10.2018, 10:48

Цитата:

Сообщение от Serge_Bliznykov

Это Вы зря. в jQuery уже всё сделано за Вас, Вам нужно только использовать готовый метод (я написал рабочий пример. только для него нужно добавить на сервер скрипт, который получит данные от клиента и всё заработает).

это Вы делаете неправильно.
потому что здесь очень важно значение this
что это такое - почитайте. например, Методы объектов, this

дело в том, что когда Вы пишете this тут:

Код:

$('a[data-reveal-id]').live('click', function(e) {
...
		var myid=$(this).attr('id');
....
	});

, то this присваивается объекту, который вызвал этот метод - т.е. той ссылки a с аттрибутом data-reveal-id, на которой произведён click
и у этого объекта есть data-reveal-id и data-animation и id
и его можно получить.

а когда Вы пишете просто отдельный скрипт:

Код:

<script>
   var myid=$(this).attr('id');
   document.write(myid);
</script>

то он вызывается в самом документе и, разумеется, никакого отношения к вашим a href не имеет.
ну сами подумайте, вот вызвали Вы этот скрипт.
А какое значение он Вам должен вернуть? id чего?
Ведь никто ещё никуда не кликал. и кликнет или нет — неизвестно!
Вам нужно получать id, когда кликнут по ссылке?
Тогда, очевидно, что Вам нужно писать скрипт, который вызывается при клике.
И вот там уже будет объект, который и вызвал действие (на котором кликнули).

Вы лучше расскажите, какую задачу Вы пытаетесь решить.
Может быть, тогда вместе подумаем, как лучше организовать логику этого действия.

Задача у меня состоит в следующем. На странице высвечивается список заголовков статей в виде ссылок, берется он из базы MySQL, надо чтобы человек щелкая на ссылку получал модальное окно с возможностью редактирования заголовка и самой статьи, после нажатия сохранить идет запись в базу MySQL и отсылка изменений на e-mail.

Serge_Bliznykov · 09.10.2018, 11:40

Цитата:

Сообщение от agatin

ача у меня состоит в следующем. На странице высвечивается список заголовков статей в виде ссылок, берется он из базы MySQL, надо чтобы человек щелкая на ссылку получал модальное окно с возможностью редактирования заголовка и самой статьи, после нажатия сохранить идет запись в базу MySQL и отсылка изменений на e-mail.

тогда у Вас уже всё есть.

jquery.reveal.js

Код:

	$('a[data-reveal-id]').live('click', function(e) {
		e.preventDefault();
		var modalLocation = $(this).attr('data-reveal-id');
		var myid=$(this).attr('id');
		if(!myid)
			myid='';
		$('#'+modalLocation).find('#article_id').val(myid);
		$('#'+modalLocation).reveal($(this).data());
	});

HTML

Код:

<!DOCTYPE html>
<!-- 
 * Markup for jQuery Reveal Plugin 1.0
 * www.ZURB.com/playground
 * Copyright 2010, ZURB
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 -->
	<head>
		<meta charset="utf-8" />
		<title>Reveal Demo</title>
		
		<!-- Attach our CSS -->
	  	<link rel="stylesheet" href="reveal.css">	
	  	
		<!-- Attach necessary scripts -->
		<!-- <script type="text/javascript" src="jquery-1.4.4.min.js"></script> -->
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
		<script type="text/javascript" src="jquery.reveal.js"></script>
		
		<style type="text/css">
			body { font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif; }
			.big-link { display:block; margin-top: 100px; text-align: center; font-size: 70px; color: #06f; }
		</style>
		<script>
		$(function() {
			$('button[type=reset]').click(function () {
				$('#myModal').trigger('reveal:close');
			})
		});

		</script>
		
	</head>
	<body>

		<a href="#" class="big-link" data-reveal-id="myModal" id="p1">
			Fade and Pop
		</a>	
		
		<a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade" id="p222222">
			Fade
		</a>
		
		<a href="#" class="big-link" data-reveal-id="myModal" data-animation="none" id="p3">
			None
		</a>

	<form id="myModal" class="reveal-modal" method="POST" action="update_article.php">
		<span class="Header2">Редактирование статьи</span>
		<hr>
		<input id="article_name" name="article_name" value="Тут название статьи">
		<input type="hidden" id="article_id" name="article_id" value="">
		<div class="container">
			<button type="submit">Сохранить</button>
			<button type="reset">Отменить</button>
		</div>
		<a class="close-reveal-modal">×</a>
	</form>

			
	</body>
</html>

agatin · 09.10.2018, 13:21

Цитата:

Сообщение от Serge_Bliznykov

тогда у Вас уже всё есть.

jquery.reveal.js

Код:

	$('a[data-reveal-id]').live('click', function(e) {
		e.preventDefault();
		var modalLocation = $(this).attr('data-reveal-id');
		var myid=$(this).attr('id');
		if(!myid)
			myid='';
		$('#'+modalLocation).find('#article_id').val(myid);
		$('#'+modalLocation).reveal($(this).data());
	});

HTML

Код:

<!DOCTYPE html>
<!-- 
 * Markup for jQuery Reveal Plugin 1.0
 * www.ZURB.com/playground
 * Copyright 2010, ZURB
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 -->
	<head>
		<meta charset="utf-8" />
		<title>Reveal Demo</title>
		
		<!-- Attach our CSS -->
	  	<link rel="stylesheet" href="reveal.css">	
	  	
		<!-- Attach necessary scripts -->
		<!-- <script type="text/javascript" src="jquery-1.4.4.min.js"></script> -->
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
		<script type="text/javascript" src="jquery.reveal.js"></script>
		
		<style type="text/css">
			body { font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif; }
			.big-link { display:block; margin-top: 100px; text-align: center; font-size: 70px; color: #06f; }
		</style>
		<script>
		$(function() {
			$('button[type=reset]').click(function () {
				$('#myModal').trigger('reveal:close');
			})
		});

		</script>
		
	</head>
	<body>

		<a href="#" class="big-link" data-reveal-id="myModal" id="p1">
			Fade and Pop
		</a>	
		
		<a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade" id="p222222">
			Fade
		</a>
		
		<a href="#" class="big-link" data-reveal-id="myModal" data-animation="none" id="p3">
			None
		</a>

	<form id="myModal" class="reveal-modal" method="POST" action="update_article.php">
		<span class="Header2">Редактирование статьи</span>
		<hr>
		<input id="article_name" name="article_name" value="Тут название статьи">
		<input type="hidden" id="article_id" name="article_id" value="">
		<div class="container">
			<button type="submit">Сохранить</button>
			<button type="reset">Отменить</button>
		</div>
		<a class="close-reveal-modal">×</a>
	</form>

			
	</body>
</html>

Огромное Вам спасибо за Ваше терпение. Все теперь работает как надо.

Serge_Bliznykov · 09.10.2018, 13:45

Цитата:

Сообщение от agatin

Огромное Вам спасибо за Ваше терпение. Все теперь работает как надо.

Пожалуйста.

p.s. Тему всё равно закрывать не будем

08.10.2018, 15:41	#12
Serge_Bliznykov Старожил Регистрация: 09.01.2008 Сообщений: 26,229	погодите. стоп. этот пример только показывает, как получить id. что с ним делать дальше - это ваше дело. в моём примере я просто вывел его на форму. Вы его можете, например, отправить на сервер (и там сформировать письмо и отправить). вот это получение id: Код: `var myid=$(this).attr('id');` всё остальное - просто для наглядности. например, отправить на сервер через AJAX. например, методом post(): Код: `$.post('mymailer.php', {action:'sendMailToAdmin', id4send : myid}, null, 'json').done(function(data, result, jqXHR){ alert('Сервер сообщает, что письмо успешно отправлено'); }).fail(function(jqXHR, result, error){ alert('Произошла ошибка при получении или анализе ответа сервера: '+error.message+'\nПопробуйте обновить страницу и попробовать еще раз.'); }); });` Последний раз редактировалось Serge_Bliznykov; 08.10.2018 в 15:43.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Не выходит модальное окно	lloudb	HTML и CSS	5	30.11.2017 15:59
Модальное окно	PR0Z0N	Фриланс	1	31.10.2012 19:09
Модальное окно	Sprat	PHP	3	28.03.2012 16:04
Модальное окно	adm2010	Общие вопросы Delphi	2	28.09.2011 22:21