Удаление элементов - JavaScript, Ajax

маГГ85 · 14.01.2012, 23:24

Уважаемые знатоки! Просьба помочь с динамическим удалением элементов <img class="sorting" id="pictureId_'.$row['picNum'].'" src="imgMin/'.$row['pic'].'" />'(sortable) в коде, желательно ajax

Код HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
     <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<title>Упорядочте фото</title>
    <meta name="">
	<meta name="">
    <!--[if IE]>
<link rel="stylesheet" href="css/ie.css" type="text/css">
<link rel="stylesheet" href="css/iecenter.css" type="text/css">
<![endif]-->
	<!--[if lte IE 6]><link rel="stylesheet" href="css/style_ie.css" type="text/css" media="screen, projection" /><![endif]-->
            <script type="text/javascript">
if (navigator.userAgent.toLowerCase().match('chrome'))
document.write('<link rel="stylesheet" type="text/css" href="css/stylechr.css" />')
if (navigator.userAgent.toLowerCase().match('safari'))
document.write('<link rel="stylesheet" type="text/css" href="css/stylesaf.css" />')
if (navigator.userAgent.toLowerCase().match('opera'))
document.write('<link rel="stylesheet" type="text/css" href="css/styleop.css" />')
</script>
	<script type="text/javascript" src="js/scriptaculous/prototype.js"></script>
	<script type="text/javascript" src="js/scriptaculous/scriptaculous.js"></script>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
	//<![CDATA[
	document.observe('dom:loaded', function() {
		var changeEffect;
		Sortable.create("sortlist", {tag:'img',overlap:'horizontal',constraint:false,
			onChange: function(item) {
				var list = Sortable.options(item).element;
				$('changeNotification').update(Sortable.serialize(list).escapeHTML());
				if(changeEffect) changeEffect.cancel();
				changeEffect = new Effect.Highlight('changeNotification', {restoreColor:"transparent" });
			},			
			onUpdate: function(list) {
				new Ajax.Request("Step222.php", {
					method: "post",
					onLoading: function(){$('activityIndicator').show()},
					onLoaded: function(){$('activityIndicator').hide()},
					parameters: { data: Sortable.serialize(list) }
				});
			}
		});	
	});
	//]]>
	</script>
    <script type="text/javascript">
// скрываем индикатор обработки данных
$(document).ready(
	function() {
		$('#load').hide();
	}
);
</SCRIPT>
    <style>
	<!--
	#sortlist {
		width: 360px;
		margin: 0 auto;
		padding: 20px;
		margin-bottom: 20px;
		text-align:center;

		}
	#sortlist img.sorting {
		float: left;
		margin: 4px;
		padding: 4px;
		border: 1px solid #ccc;
		}
		
	#sortlist img.sorting:hover { 
		float: left;
		margin: 4px;
		padding: 4px;
		cursor: move;
		}
	#activityIndicator {
		text-align: center;
		font: normal 1em georgia, arial, helvetica;
		}

	-->	
	</style>
<link rel="stylesheet" type="text/css" href="source/styles.css">
	</head>
<body>  
<div class="demo-description">
<h2>Порядок появления фото</h2>
<p>Фото будут появляться одно за другим с небольшой задержкой между кадрами. Все снимки "будут жить" в красивом ролике!</p>
<p><span class="blue">Перетащите</span> фото в любое место, если хотите изменить порядок появления снимков.</p>
</div><!-- End demo-description -->
	<div id="demo-status" class="hide">
		<p>
        	<a href="step1.php">Добавить еще</a> |
			<a href="step2r.php">Разбросать</a> |
			<a href="step2.php">Откат изменений</a> |
            <a href="step3.php">Дальше</a>
		</p>
		</div>

    <div id="activityIndicator" style="display:none; ">Применение изменений...</div> 
    <div id="sortlist">  
        <?php
			$login = $_SESSION['login'];
   
            $sql = mysql_query("SELECT * FROM s_pics WHERE login='$login' ORDER BY numNum");  
            while ($row = mysql_fetch_array($sql)) {  
                print '<img class="sorting" id="pictureId_'.$row['picNum'].'" src="imgMin/'.$row['pic'].'" />';  
            }  
        ?>
      
    </div>
</body>  
</html>

маГГ85 · 14.01.2012, 23:28

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

Код HTML:

// перехватываем значение id элемента с классом delete
// с помощью ajax, отправляем значение медодом POST файлу delete.php
$(function() {
	$(".delete").click(
		function() {
			$('#load').fadeIn();
			var commentContainer = $(this).parent();
			// получаем значение элемента
			var id = $(this).attr("id");
			var string = 'id='+ id ;
		
			$.ajax({
				type: "POST",
				// файл-обработчик
				url: "delete.php",
				data: string,
				cache: false,
				// сворачиваем удаленный комментарий, и выводим индикатор
				success: function(){
					commentContainer.slideUp('slow', function() {$(this).remove();});
					$('#load').fadeOut();
				}
			});
			return false;
		}
	);
});

Kostia · 15.01.2012, 00:32

Код не смотрел.
Вешай на событие onclick(или href:javascript) ajax запрос, которым передаёшь на сервер id удаляемой картинки, выполняешь sql запрос на сервере, проверяешь на ошибки и возвращаешь статус операции клиенту, в функции callback для запроса проверяешь пришедший статус и если он например "ok", то удаляешь картинку $("#pic_"+id).remove(); а иначе выводишь сообщение об ошибке.

маГГ85 · 15.01.2012, 01:21

Цитата:

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

Код не смотрел.
Вешай на событие onclick(или href:javascript) ajax запрос, которым передаёшь на сервер id удаляемой картинки, выполняешь sql запрос на сервере, проверяешь на ошибки и возвращаешь статус операции клиенту, в функции callback для запроса проверяешь пришедший статус и если он например "ok", то удаляешь картинку $("#pic_"+id).remove(); а иначе выводишь сообщение об ошибке.

спасибо, возьму за основу!!!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
динамическое удаление элементов	маГГ85	JavaScript, Ajax	7	26.12.2011 20:42
Массив. Удаление элементов.	iCaesy	Помощь студентам	5	23.10.2011 13:48
удаление элементов	ensoleille	Помощь студентам	4	16.01.2011 23:27
массивы. удаление элементов	Ananim-Pbl6ak	Паскаль, Turbo Pascal, PascalABC.NET	25	09.06.2009 11:07

15.01.2012, 00:32	#3
Kostia Участник клуба Регистрация: 21.11.2007 Сообщений: 1,692	Код не смотрел. Вешай на событие onclick(или href:javascript) ajax запрос, которым передаёшь на сервер id удаляемой картинки, выполняешь sql запрос на сервере, проверяешь на ошибки и возвращаешь статус операции клиенту, в функции callback для запроса проверяешь пришедший статус и если он например "ok", то удаляешь картинку $("#pic_"+id).remove(); а иначе выводишь сообщение об ошибке.